:root {
                --green: #47ff6f;
                --lightPurple: #43256E;
                --darkPurple: #1B0F49;
            }

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

            @font-face {
                font-family: Citree regular;
                src: url("../fonts/Citree\ regular.otf")format("opentype");
                font-weight: bold;
            }

            @font-face {
                font-family: Citree regular;
                src: url("../fonts/Citree\ regular.otf")format("opentype");
                font-style: italic;
            }

            @font-face {
                font-family: Citree regular;
                src: url("../fonts/Citree\ regular.otf")format("opentype");
                font-style: italic;
                font-weight: bold;
            }

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

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

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

            @font-face {
                font-family: James regular;
                src: url("../fonts/James-regular.otf")format("opentype");
                font-style: italic;
                font-weight: bold;
            }

            ::selection {
                background-color: var(--green);
                color: var(--darkPurple);
            }

            body {
                font-family: 'Citree regular';
                font-size:18px;
                color: #edfcf1;
                background-size: cover;
                background-attachment: fixed;
                background-position: center;
                background-image: url('../assets/site/homeBG_default.png');
                padding: 0px;
                margin: 0px;
            }

            hr {
                color:var(--green);
            }

            #container {
                max-width: 1500px;
                margin: 0 auto;
                margin-right:120px;
                background-color: rgba(27, 15, 73, 0.95);
                padding: 20px;
            }

            #container a {
                color: var(--green);
            }

            nav {
                z-index: 9;
                color:var(--green);
                background-color: #210f49;
                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;
            }

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

            .navlink img {
                width:210px;
            }

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

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

            .dropdown-content {
                display: none;
                top: -20px;
                left:210px;
                position: absolute;
                background-color: #3f2676;
                width: 200px;
                z-index:999;
                border:2px solid var(--green);
            }

            .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: var(--green);
                border-width: 10px;
                margin-top: -10px;
            }

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

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

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

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

            .dropdown:hover {
                cursor: pointer;
            }

            #openNav {
                z-index:9;
                margin: 0px;
                padding: 0px;
                position:fixed;
                text-align: center;
                left:0px;
                width:50px;
                height:100%;
                background-color: var(--lightPurple);
                transition: .2s;
                border-right:2px solid var(--green);
                cursor: pointer;
            }

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

            #openNav h1 {
                position: absolute;
                color: var(--green);
                transform: rotate(-90deg);       
                font-family: James regular;
                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;
            }

            #flex {
                display: flex;
                justify-content: space-between;
            }
            
            .textbox {
                position: relative;
                text-align: center;
            }

            h1,
            h2,
            h3,
            strong {
                color: var(--green);
                font-family: James regular;
            }

            h1 {
                font-size:32px; 
            }

            h2 {
                font-size:22px;
            }

            strong {
                color: #41f098;
            }
            .popup {
                position: relative;
                display: block;
                color: var(--green);
            }

            .popup-content {
                z-index: 99;
                display: none;
                left:-70%;
                position: absolute;
                bottom:100%;
                background-color: #3f2676;
                opacity: 0.9;
                width: 150px;
            }

            .popup-content a {
                padding: 10px;
                text-decoration: none;
                display: block;
                color: #070330;
                text-align: center;
            }

            .popup-content a:hover {
                background-color: #a88fed;
                color: #000;
            }

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

            .popup:hover .popupbtn {
                background-color: #a5ffdc;
            }

            #footer {
                border:2px solid green;
                z-index: 99;
                height: 30px;
                width:98%;
                margin: 0 auto;
                margin-top:6px;
                font-weight:lighter;
                font-size:15px;
                color:#41f098;
                background-color: #210f49;
                display: flex;
                justify-content: space-around;
                align-items: center;
                }

            .footerlink a{
                z-index: 99;
                display: flex;
                padding: 5px;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
                text-decoration: none;
                }

            .footerlink a:hover {
                color: #b3f0f2;
                text-decoration: underline;
            }

    @media (max-width: 450px) {
        nav {
            z-index: 9;
            color:var(--green);
            background-color: #210f49;
            position:fixed;
            padding: 10px;
            width: 100%;
            height:300px;
            transform: translateY(-300px);
            transition: .2s;
            }

        .navlink {
            font-family: James regular;
            text-align: center;
            text-transform:uppercase;
            margin-top:30px;
            min-width:210px;
            z-index:1;
            }

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

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

        .dropdown-content {
            display: none;
            top: -20px;
            left: 110px;
            position: absolute;
            background-color: #3f2676;
            width: 200px;
            z-index:999;
            border:2px solid var(--green);
        }
        .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: var(--green);
          border-width: 10px;
          margin-top: -10px;
        }

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

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

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

        .dropdown:hover .dropdown-content {
            display: grid;
            z-index:99999;
        }

        .dropdown:hover {
            cursor: pointer;
        }

        #openNav {
            z-index:99;
            margin: 0px;
            padding: 0px;
            position: fixed;
            text-align: center;
            top:0px;
            width:100%;
            height:50px;
            background-color: var(--lightPurple);
            transition: .2s;
            border-bottom:2px solid var(--green);
            cursor: pointer;
        }

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

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

        #openNavBtn {
            display: none;
        }

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

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

        #openNavBtn:checked + label > nav {
            transform: translateY(-60px);
        }

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

        #flex {
            flex-wrap: wrap;
        }
        
        .main {
            width:90%;
            margin:0px
        }

        #container {
            margin: 0 auto;
            width:95%;
            margin-top:50px;
        }
    
            }