html, body {
            margin: 0;
            padding: 0;
            font-family: Roboto;
            /* font-size: 14pt;  */
            color: var(--hanakoShirt);
        }

        body {
            background: var(--sandyBack) url('img/bg.png') fixed;
            font-size: 1.3em;
            box-sizing: border-box;
        }

        /* layout */

        #left, #right {
            position: fixed;
            height: 100%;
            background-size: 100% 100%;
            z-index: -1;
        }

        #left {
            width: 575px;
            left: 0;
            background: url('img/side1.png') no-repeat top left fixed;
        }

        #right {
            width: 450px;
            right: 0;
            background: url('img/side2.png') no-repeat top right fixed;
        }

        #begin {
            float:none;
            clear:both;
            height: 1em;
            position: relative;
        }

        #wrapper {
            margin: 0 auto;
            width: 100%;
            /* max-width: 1200px; */
        }

        /* header style */

        header {
            position: relative;
            float: left;
            max-width: 400px;
            /* margin-left: 10em; */
            margin-left: 7%;
            margin-right: 1em;
            z-index: 2;
        }

        header figure:before {
            background-color: var(--neneRibbon);
            content: "";
            position: absolute;
            width: calc(100% + 4px);
            height: 100%;
            left: -20px;
            bottom: 5px;
            z-index: -1;
            border-radius: 1em;
            transform: rotate(-10deg);
        }

        header figure {
            width: 100%;
            position: relative;
        }

        header img {
            max-width: 350px;
            border-radius: 1em;
            border: 5px solid var(--daffodil);
        }

        main {
            position: relative;
            float: left;
            width: 90%;
            max-width: 1024px;
            margin: 0 auto;
            padding: 1em;
            background: rgba(219, 202, 163, 0.5);
            border-radius: 1em;
            z-index: 1;
        }

        footer {
            float: none;
            clear: both;
            display: block;
            text-align: center; 
        }

        article {
            margin: 1em 0;
        }

        /* bold, italic, underline, strike, spacer */

        b, strong {
            font-family: "Passion One", sans-serif;
            font-style: normal;
            font-size: inherit;
            text-transform: uppercase;
            color: var(--daffLight);
            background-color: var(--kouEye);
            padding: 0 5px;
        }
        i, em {
            color: var(--daffStem);
            background-color: var(--daffLight);
            padding: 0 3px;
        }
        u {}
        strike {
            color: var(--bgGrey);
        }

        ul.prettyFly li {
            list-style-type: none;
            text-align: left;
        }

        a:link,
        a:visited,
        a:hover,
        a:active {
            text-decoration: none;
            color: var(--neneEye);
            font-weight: 700;
            border-bottom: 2px dashed var(--daffodil); 
        }

        hr.spacer {
            display: block;
            border: 0;
            height: 2em;
        }

        /* nav  */

        nav ul {
            list-style-type: none;
        }

        nav ul li {
            width: 50%;
            float: left;
        }

        li.long {
            width: 100%;
            float: none;
            clear: both;
        }

        nav ul li a:link,
        nav ul li a:visited,
        nav ul li a:hover,
        nav ul li a:active {
            color: var(--neneRibbon);
            font-family: "Passion One";
            font-size: 20pt;
            text-shadow: 3px 3px white;
            text-align: right;
        }

        nav ul li a {
            display: block;
            position: relative;
            padding: 10px;
            background-color: var(--daffLight);
            border-left: 10px solid var(--neneEye);
            border-bottom: 3px solid var(--kouEye);
            box-shadow: 3px 5px var(--kouEye);
            margin: 10px;
        }

        /* main headers */

        .decor {
            margin: 0 auto -1em;
            padding: 0;
            text-align: center;
        }

        h1.decor {
            font-family: Chaloops, serif;
            font-size: 30pt;
            letter-spacing: -1px;
        }

        h2.decor {
            color: var(--neneRibbon);
            font-family: "Hermes 1943", serif;
            font-size: 36pt;
            margin-bottom: 25px;
            position: relative;
            letter-spacing: -5px;
        }

        h2.decor:before {
            background-color: var(--daffLight);
            content: "";
            position: absolute;
            width: calc(100% + 4px);
            height: 60%;
            left: -2px;
            bottom: 10px;
            z-index: -1;
            border-radius: 1em 0;
            letter-spacing: -2px;
        }

        .decor span {
            transform: rotate(-3deg);
            top: 5px;
            color: var(--neneEye);
            position: relative;
        }
        .decor span:nth-child(even) {
            bottom: 7px;
            transform: rotate(3deg);
            position: relative;
        }

        /* second headers */

        main h1, 
        main h2,
        main h3 {
            /* margin: -15px 0; */
            /* margin-bottom: -15px; */
            padding: 0 10px;
            position: relative;
            font-family: Chaloops, serif;
            color:  var(--neneRibbon);
            height: 40px;
        }

        main h1 span, 
        main h2 span,
        main h3 span {
            font-family: "Hermes 1943", serif;
            font-size:24pt;
            color:  var(--neneRibbon);
        }

        main h1 {
            border-left: 50px solid var(--kouEye);
            border-radius: 1em;
        }

        main h1:before {
            content: "🌸 ";
        }

        main h2:before {
            content: "⭐ ";
        }

        main h3:before {
            content: "👻 ";
        }

        main h4,
        main h5,
        main h6 {
            text-transform: uppercase;
            margin: -10px 0;
        }

        /* main h1:before {
            background-color: var(--kouEye);
            content: "";
            position: absolute;
            width: 50%;
            height: 20%;
            left: -2px;
            bottom: 25%;
            z-index: -1;
            border-radius: 1em 5px;
            letter-spacing: -2px;
            border-bottom: 2px dashed var(--daffLight);
        } */

       

        /* gallery */

        .gallery {
            margin: 0.5em auto;
            width: 100%;
            display: block;
            text-align: center;
        }

        .gallery:after {
            float: none;
            clear: both;
            margin-bottom:1em;
        }

        hr.clearGal {
            float: none;
            clear: both;
            margin-bottom:1em;
            border: 0;
            width: 100%;

        }

        main figure {
            position: relative;
            float: left;
            width: 175px;
            display: inline;
            text-align: center;
        }

        main figure:before {
            background-color: var(--daffLight);
            content: "";
            position: absolute;
             width: calc(100% + 4px); 
            /* height: 80%; */
            z-index: -1;
            border-radius: 20em;
            letter-spacing: -2px;
        }

        main figure img {
            border-radius: 20em;
            max-width: 225px;
            max-height: 225px;
            position:relative;
            border: 2px solid var(--hanakoShirt);
            background: var(--daffLight);
            padding: 5px;
        }

        


        /* blockquoting */

        blockquote::before, blockquote:after {
            font-family: "Bungee";
            font-size:48pt;
            color: var(--daffStem);
            position: absolute;
            padding: 0;
            z-index: -1;
           
        }

        blockquote {
            /* font-family: "Shadows Into Light";
            font-size: 16pt;
            line-height: 20px; */
            width: 90%;
            background: rgba(228,161,95,0.5);
            padding: 10px;
            margin-right: 1em;
        }

        blockquote:before {
            content: "“";
            margin: -25px 0 0 -30px;
        }

        blockquote:after {
            display:block;
            content: "„";
            margin: -60px 0 0 -30px;
        }

        /* ========== TCG SPECIFIC ============= */

        /* for forms */

        form table input, form table textarea, form table option {
            font-family: "Passion One";
            font-size: 14pt;
            width: 100%;
            color: var(--neneEye);
            border-radius: 5px;
            border: 3px solid var(--daffodil);
            padding: 15px;
            background:  var(--daffLight);
        }

        form table {
            width: 80%;
        }

        form table, form table tr, form table td{
            text-align: center;
            margin: 1em;
        }


        /* for logs */

        .myLogs {
        height: 225px; 
        width: 325px;
        overflow-y: auto; 
        overflow-x: hidden; 
        margin: 0 auto; 
        width: 100%;
        text-align: left; 
        font-size: 10pt;

        }


        /* for cardsearch */

        .daggles, .daggles form {
            text-align: center;
            margin: 0 auto;
            padding: 15px;
        }


        .daggles form input {
            background: var(--daffLight);
            border: 3px solid var(--daffodil);
            color: var(--neneEye);
            font-family: "Passion One";
            font-size: 14pt;
            padding: 15px;
            border-radius: 3px;
        }

        .dimmedCard{
            opacity:0.5;
            filter:alpha(opacity=30);
        }       

        /* for collecting decks */
            
        article.colDeck {
            text-align:center;
            margin: 0 auto;
            width:100%;
        }
            
        section.card_col { 
            min-width: 420px;
            float: left;
            width: 49%;
            text-align: center;
            line-height: 0;
            margin: 0;
            padding: 0;
        }

        .card_col h2 {
            font-family: "Passion One";
            font-size: 16pt;
            display: inline-block;
            text-decoration: none;
            border: 0;
        }

        .card_col br, .card_col img {
            margin: 0;
            padding: 0;
        }

        hr.clearMe {
            display: block;
            border: 0;
            float: clear;
            clear: both;
        }

        hr.clearMe:after {
        content: "";
        clear: both;
        display: table;
        }

        /* for cardnames under cards - EDIT THE PHP FOR THIS! */

        .list-inline {
            display: inline;
            position: justify;
            margin: 0;
            padding: 0;
        }

        .list-inline li {
            display: inline-block;
        }

        .list-inline li img {
            display: block;
            position: relative;
            text-align: center;
            margin: 0 auto;
        }

        .cardname { 
            color: var(--neneEye);
            font-weight: 600;
            line-height: 25px;
            width: 150px; /* 115px */
            display: block;
            font-size: 12pt;
            margin: 4px;
            margin: 0 auto;
        }

         /* needed table */

        .content h1,
        .content h2,
        .content h3 {
            /* font-family: Roboto; */
            font-weight: 700;
            border-bottom: 3px solid var(--neneEye);
            margin: 25px 0 0 0;
            padding: 0;
        }

        .content h1:before,
        .content h2:before,
        .content h3:before {
            content: "💕 ";
        }

         table.needed {
            width: 100%;
          }

          table.needed b {
            background: none;
            color: var(--kouEye);
            font-size: 16pt;
          }

          table.needed td {
            padding: 5px;
            border-bottom: 1px solid var(--daffodil);
            color: var(--neneRibbon);
            font-size: 12pt;
          }

          table.needed td.nDeck {
            width: 30%;
            overflow: hidden;
            border-right: 3px solid var(--neneEye);
          }

          table.needed tr:nth-child(odd) {
            background: var(--sandyBack);
          }

          table.needed tr:nth-child(even) {
            background: var(--daffLight);
          }

          table.needed span {
            color: var(--daffodil);
            font-weight: 700;
          }

          /* for trading.horde menus */

          /* for hold */

            #hold {
                width: 100%;
                max-width: 500px;
                margin: 0 auto;
                background-color: var(--kouEye);
                padding: 25px;
            }

            #hold td {
                width: 25%;
                text-align: center;
            }

            #hold img {
                border: 1px solid var(--daffodil);
                padding:5px;
                border-radius: 3px;
                background: #fff;
            
            }


        /* for pullout menus */

         /* Style the button that is used to open and close the collapsible content */
        .collapsible {
            cursor: pointer;
            width: 100%;
            text-align: left;
            outline: none;
        }

        .collapsible.chonk {
            padding: 18px;
            background: var(--neneEye);
            color: var(--daffLight); 
            font-family: Passion One;
            font-size: 18pt;
            border: none;
        }

        .collapsible.inline {
            padding: 3px;
            background: none;
            color: var(--neneEye); 
            font-family: Chaloops;
            font-size: 18pt;
            border-left: none;
            border-right:none;
            border-top: none;
            border-bottom: 3px double var(--neneRibbon);
            
        }
        
        
        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active, .collapsible:hover {
            /* background: transparent; */
            /* background-color: #ccc; */
        }
        
        /* Style the collapsible content. Note: hidden by default */
        .content {
            padding: 0 18px;
            /* background-color: white; */
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }

          .collapsible:after {
            content: '\02795'; /* Unicode character for "plus" sign (+) */
            font-size: 13px;
            color: white;
            float: right;
            margin-left: 5px;
          }
          
          .active:after {
            content: "\2796"; /* Unicode character for "minus" sign (-) */
          }