:root {
            --weirdGreen: #47ff6f;
            --lightPurple: #43256E;
            --darkPurple: #1B0F49;
        }
        
        @font-face {
            font-family: Inkfree;
            src: url("../fonts/Inkfree.ttf")format("opentype");
        }

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

        @font-face {
            font-family: Citree regular;
            src: url("../fonts/Citree\ regular.otf")format("opentype");
        }
        
        body {
            text-align: center;
            width:100%;
            height:auto;
            font-family: 'Inkfree';
            color: #f2feff;
            background-color: #21023a;
            background-image: url(../images/landing/landingBG.png);
            background-blend-mode: multiply;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }
        
        body a {
            color: #47ff6f;
        }

        .header {
            height:200px;
        }

        main {
            position:absolute;
            left:20%;
            display:flex;
            justify-items: center;
            background-image: url(../images/landing/landingpageBG.png);
            background-repeat: no-repeat;
            background-size:contain;
            padding:50px;
            font-size:18px;
            margin: 0 auto;
            width: 550px;
            height:800px;
            text-align: center;
        }

        main:hover{
            background-image: url(../images/landing/landingpageBG_enter.png);
            background-blend-mode: darken;
            background-repeat: no-repeat;
            background-size:contain;
        }

        .intro {
            font-weight: bold;
            position:relative;
            transform: rotate(-2deg);
            left:70px;
            top:18%;
            width:450px;
        }

        main ul {
            text-align: left;
        }

        h1 {
            font-family: James-regular;
            color: #47ff6f;
            margin: 0 auto;
            text-shadow:
             0 0 7px #13db1d57,
             0 0 10px #c8ffd4a2,
             0 0 20px #47ff6f71;
        }
        
        .enterbutton {
            margin: 0 auto;
            position:relative;
            left:50px;
            top:150px;
            width:500px;
            z-index:9;
        }

        .enterbutton img {
            width:200px;
            height:auto;
        }

        .enterbutton:hover {
            transform: translateX(20px);
            transition: transform .2s;
        }

        #infoSidebar {
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            position:absolute;
            width:250px;
            padding:0px;
            top:200px;
            right:500px;
            background-color: #78007c79;
            color: var(--weirdGreen);
            text-align:left;
        }

        #infoSidebar summary{
            margin:5px 0px 0px 10px;
            font-family: James;
            font-size:20px;
        }

        #infoSidebar li {
            font-size:20px;
        }

        #infoSidebar hr{
            width:100%;
            margin: 0;
            color: var(--weirdGreen);
        }

        #infoSidebar details{
            font-family: Citree regular;
            cursor: pointer;
            user-select: none;
            font-size:14px;
            margin:0px 10px;
        }

        #infoSidebar img{
            width:50px;
        }

        @media (max-width: 450px) {

            #infoSidebar {
                display:flex;
                flex-wrap: wrap;
                flex-direction:row;
                position:relative;
                width:250px;
                padding:0px;
                top:0px;
                left:25%;
                background-color: #78007c79;
                color: var(--weirdGreen);
                text-align:left;
            }

            body {
                overflow-x:hidden;
            }

            .header {
            background-size: contain;
            background-size:600px;
            }

            main {
            padding: 15px;
            padding-top:300px;
            width: 300px;
            text-align: center;
            position:relative;
            }

            main {
            display:flex;
            justify-items: center;
            background-image: url(/images/landingpageBG.png);
            background-repeat: no-repeat;
            background-size:contain;
            background-position: -100px;
            font-size:18px;
            margin: 0 auto;
            width: 550px;
            height:800px;
            text-align: center;
        }

            .enterbutton img {
            width:200px;
            }
        }