@font-face {
                font-family: Albert-regular;
                src: url('/fonts/Albert-regular.otf')format("opentype");
            }

            body {
                padding: 0px;
                margin: 0px;
                font-family: 'Albert-regular';
                font-size: 22px;
                letter-spacing: 1px;
                background-size: 100%;
                background-attachment: fixed;
                background-position: center;
                color: #edfcf1;
                background-image: url('/shrines/images/thresh/threshbg.png');
                background-attachment: fixed;
                overflow-x:hidden;
            }
                        
            body, html {
                cursor: url(/assets/shrines/thresh/cursor.png), pointer;
            }

            body a {
                color: #47ff6f;
                font-weight: bold;
            }

            main {
                display:flex;
                flex-wrap: wrap;
            }

            .container {
                padding-right: 25px;
                text-align: center;
                background-color: #000;
                opacity: 90%;
                padding:20px;
                margin:10px;
            }

            .section {
                display:flex;
                margin-left:50px;
            }

            .section > img {
                align-self: center;
                max-width:50%;
            }

            button {
                color: #a7f2fc;
                padding: 0px 10px 35px 10px;
                font-size: 30px;
                font-weight: bold;
                font-family: 'albert-regular';
                height: 40px;
                background-color: #0e6a51;
                border-width: 5px;
                border-style: outset;
                border-color: #0b3d09;
                cursor: url(/assets/shrines/thresh/cursor2.cur), auto;
            }

            button:hover {
                color: #b2f1cf;
                text-decoration: underline;
                background-color: #214426;
            }

            h1 {
                color: #60d68a;
                font-size: 70px;
                text-align:left;
                margin: 0 auto;
            }

            h2 {
                font-size: 40px;
                text-align:left;
                margin: 0 auto;
                opacity: 0.5;
                color: #2fb9a4;
                font-weight: bold;
            }

            strong {
                color: #41f098;
            }
            
            #spellContainer {
                margin: 0px 20px 0px 0px;
                order:3;
            }
            
            .spell {
                padding:10px;
            }

            .spell img {
            border: 5px solid #168562;
            border-style: outset;
            }
            
            .spell:hover {
                transition: all .2s ease-in-out;
                transform: scale(1.1);
            }
            
            .spell .tooltiptext {
                visibility: hidden;
                width: 300px;
                background-color: black;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 10px;
                position: fixed;
                top: 10%;
                right: 110%;
                border: 1px solid green;
            }
            
            .spell:hover .tooltiptext {
                visibility: visible;
            }

            nav {
                z-index: 9;
                color:var(--green);
                background-color: rgba(11, 2, 15, 0.9);
                background-image: url("../images/sitewide/navgif.gif");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position-y: 97%;
                position:fixed;
                padding: 10px;
                height: 100%;
                width: 200px;
                transform: translate(-220px);
                transition: .2s;
                font-size:18px;
            }

            .navlink {
                font-family: Citree;
                text-align: center;
                text-transform:uppercase;
                margin-top:70px;
                min-width:210px;
            }

            .navlink img {
                width:210px;
            }

            .navlink a:hover {
                color: #b3f2b6;
                text-decoration: underline;
            }

            .dropdown {
                position: relative;
                display: block;
                color: var(--green);
                z-index:999;
            }

            #homePage {
                background-size: contain;
                background-repeat: no-repeat;
                background-position: 55px;
                width:200px;
                height:175px;
                background-image: url(/shrines/images/thresh/homebutton.png);
            }

            #homePage:hover {
                background-image: url(/shrines/images/thresh/homebutton_hover.png);
                background-position: 0px;
                transform: scale(1.1);
            }

            .dropdown-content {
                display: none;
                top: -20px;
                left:210px;
                position: absolute;
                background-color: #18271e;
                width: 200px;
                z-index:999;
                border:2px solid black;
            }

            .dropdown-content:after,
            .dropdown-content:before {
                right: 100%;
                top: 33px;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }

            .dropdown-content:after {
                border-color: rgba(136, 183, 213, 0);
                border-right-color: black;
                border-width: 10px;
                margin-top: -10px;
            }

            .dropdown-content:before {
                border-color: rgba(194, 225, 245, 0);
                border-right-color: black;
                border-width: 13px;
                margin-top: -13px;
            }

            .dropdown-content a {
                padding: 10px;
                text-decoration: none;
                display: block;
                color: #4ddf59;
                text-align: center;
                z-index:999;
                border: 1px solid black;
                border-bottom:0px;
            }

            .dropdown-content a:hover {
                background-color: #8fedce;
                color: #000;
            }

            .dropdown:hover .dropdown-content {
                display: grid;
            }

            .dropdown:hover {
                cursor: url(/assets/shrines/thresh/cursor2.cur), auto;
            }

            #openNav {
                z-index:9;
                margin: 0px;
                padding: 0px;
                position:fixed;
                text-align: center;
                left:0px;
                width:50px;
                height:100%;
                background-color: black;
                transition: .2s;
                border-right:2px solid rgb(55, 146, 85);
                cursor: url(/assets/shrines/thresh/cursor2.cur), auto;
            }

            #openNav:hover {
                transform: scaleX(1.1);
            }

            #openNav h1 {
                font-size: 35px;
                position: absolute;
                color: var(--green);
                transform: rotate(-90deg);
                top:40%;
                left:-10px;
                text-shadow:
                0 0 7px #13db1d57,
                0 0 10px #c8ffd4a2,
                0 0 20px #c5eece71;
            }

            #openNavBtn {
                display: none;
            }

            .openNavArrow {
                position:absolute;
                z-index:99;
                top:42%;
                left:55px;
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 25px 0 25px 25px;
                border-color: transparent transparent transparent var(--green);
                opacity: .1;
                transition: .5s;
                visibility: visible;
            }

            #openNav:hover > .openNavArrow {
                opacity:1;
                transition: .5s;
                transform: translateX(10px);
            }
            
            #openNavBtn:checked + label > div {
                left:220px;
                transition: .2s;
            }

            #openNavBtn:checked + label > nav {
                transform: translate(0px);
            }

            #openNavBtn:checked + label .openNavArrow {
                visibility: hidden;
            }

            @media only screen and (max-width: 450px) {

                body {
                    overflow-x:visible;
                }

                #topbutton {
                    top:0%;
                    left:0%;
                }

                .section {
                    display:inline;
                }

                .section > img {
                    visibility: hidden;
                    height:0px;
                    width:0px;
                }

                #spellContainer {
                    display:flex;
                    flex-wrap:wrap;
                    justify-content: center;
                    margin:0;
                    padding:0;
                }
                .spell {
                padding:1px;
                }

                .spell:hover {
                    transform: scale(1);
                }

                .spell img {
                border: 5px solid #168562;
                border-style: outset;
                }

                .spell .tooltiptext {
                top: 110%;
                right:110%;
                left:0%;
                border: 1px solid green;
            }

                .spell:hover .tooltiptext {
                visibility: hidden;
            }
                .spell:active .tooltiptext {
                visibility: visible;
            }
            }