html,body,#root {
        min-height: 100vh;
        min-width: 100vw;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        overflow-y: disable;
        background-image: url("/images/TreeBG2.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: -100;
    }

    body {
        margin: 0;
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body::-webkit-scrollbar {
        display: none; /* Chrome, Safari, and Opera */
    }

    code {
        font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace
    }

    h1 {
        display: grid;
        justify-content: center;
        font-family: "Fontdiner Swanky", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 3vw;
        height: 1vw;
        color: green;
        text-align: center;
        filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px -1px 0 black);
        top: -3vh;
        position: relative;
    }

    .App {
        position: relative;
        display: flex;
        justify-content: center;
        text-align: center;
        min-height: 90vh;
        min-width: 90vw;
        object-fit: cover;
        overflow-y: disable;
    }

    .Container{
        overflow-y: auto;
    }

    .SelectionContainer {
        background-color: #1b1717;
        min-height: 100%;
        min-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column
    }

    .SelectOption {
        text-align: start;
        padding: 2px 10px;
        width: 200px;
        background-color: #3a3737;
        border-radius: 5px;
        color: #fff;
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: x-large
    }

    .Arrow {
        font-size: xx-large;
        color: #636060
    }

    .BgCredits,.BackButtonContainer {
        position: absolute;
        top: 5px;
        left: 5px
    }

    .BackButton {
        padding: 5px 10px;
        background-color: #3a3737;
        border-radius: 5px;
        color: #fff;
        cursor: pointer
    }

    .Container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
        width: 60vw;
    }

    .Modal {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #080808cc;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100
    }

    .Dialog {
        height: 90%;
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 101
    }

    .Scrollable {
        overflow-y: auto
    }

    .Dialog.Scrollable {
        justify-content: flex-start;
        align-items: center;
        padding: 20px 10px 40px;
        box-sizing: border-box
    }

    .Dialog.Scrollable .DialogImage {
        max-height: 90vh;
        width: auto;
        max-width: 100%;
        margin-bottom: 25px
    }

    .DialogImage {
        background-color: #080808;
        padding: 5px;
        border-radius: 10px;
        max-height: calc(100% - 100px);
        max-width: 100%;
        display: block;
        object-fit: contain;
        -webkit-user-select: none;
        user-select: none;
        background: linear-gradient(60deg,#fff 0% 5%,red 5% 10%,#fff 10% 15%,red 15% 20%,#fff 20% 25%,red 25% 30%,#fff 30% 35%,red 35% 40%,#fff 40% 45%,red 45% 50%,#fff 50% 55%,red 55% 60%,#fff 60% 65%,red 65% 70%,#fff 70% 75%,red 75% 80%,#fff 80% 85%,red 85% 90%,#fff 90% 95%,red 95% 100%)
    }

    .DialogText {
        background-color: #08080880;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        height: 60px;
        min-width: 30%;
        font-size: x-large;
        border-width: 0px 2px 2px 2px;
        padding: 0 20px
    }

    .DialogLink {
        margin-left: 10px
    }

    .Tile {
        display: flex;
        justify-content: center;
        align-items: center;
        color: White;
        height: 10vw;
        width: 10vw;
        font-size: 3.5vw;
        font-weight: 500;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
        margin: 20px;
    }

    .Tile:hover {
        -webkit-filter: drop-shadow(2px 2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white) drop-shadow(-2px -2px 0 white);
        filter: drop-shadow(2px 2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white) drop-shadow(-2px -2px 0 white)
    }

    .TileImage {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }

    .Masked {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 9;
        -webkit-mask-image: url(/labeldark.png);
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-image: url(/labeldark.png);
        mask-size: 100% 100%;
        mask-position: center;
        mask-repeat: no-repeat
    }

    .TileText {
        height: 10%;
        z-index: 11;
        text-shadow: 2px 2px black
    }

    .BgSmall {
        display: none
    }

    .Denied {
        animation: shake 1s;
        animation-iteration-count: infinite
    }

    @keyframes shake {
        0% {
            transform: translate(1px,1px) rotate(0)
        }

        20% {
            transform: translate(-3px) rotate(1deg)
        }

        40% {
            transform: translate(1px,-1px) rotate(1deg)
        }

        60% {
            transform: translate(-3px,1px) rotate(0)
        }

        80% {
            transform: translate(-1px,-1px) rotate(1deg)
        }

        to {
            transform: translate(1px,-2px) rotate(-1deg)
        }
    }

    @media only screen and (max-width: 1200px) {
        .Tile {
            height:12vw;
            width: 12vw;
            font-size: 5vw
        }
    }

    @media only screen and (max-width: 650px) {
        .Tile {
            height:16vw;
            width: 16vw;
            font-size: 8vw
        }

        .BgLarge {
            display: none
        }

        .BgSmall {
            display: block
        }
    }

    .SnowflakeContainer {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        z-index: 50;
        pointer-events: none
    }

    .snowflake {
        --size: 1vw;
        width: var(--size);
        height: var(--size);
        position: absolute;
        top: -20vh;
        z-index: 50;
        pointer-events: none
    }

    @keyframes snowfall {
        0% {
            transform: translate3d(var(--left-ini),0,0)
        }

        to {
            transform: translate3d(var(--left-end),100vh,0)
        }
    }

    .snowflake:nth-child(1) {
        --size: .5vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 5vw;
        rotate: 0deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 1s
    }

    .snowflake:nth-child(2) {
        --size: .3vw;
        --left-ini: 0vw;
        --left-end: -3vw;
        left: 10vw;
        rotate:-3deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -2s
    }

    .snowflake:nth-child(3) {
        --size: .6vw;
        --left-ini: 0vw;
        --left-end: 3vw;
        left: 15vw;
        rotate: 4deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 5s
    }

    .snowflake:nth-child(4) {
        --size: .7vw;
        --left-ini: 0vw;
        --left-end: -2vw;
        left: 20vw;
        rotate: 5deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -2s
    }

    .snowflake:nth-child(5) {
        --size: .2vw;
        --left-ini: 0vw;
        --left-end: -8vw;
        left: 25vw;
        rotate: -2deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -3s
    }

    .snowflake:nth-child(6) {
        --size: .4vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 30vw;
        rotate: -4deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 2s
    }

    .snowflake:nth-child(7) {
        --size: .7vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 35vw;
        rotate: 4deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 0s
    }

    .snowflake:nth-child(8) {
        --size: .9vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 40vw;
        rotate: 2deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -3s
    }

    .snowflake:nth-child(9) {
        --size: .5vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 45vw;
        rotate: 0deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -7s
    }

    .snowflake:nth-child(10) {
        --size: .3vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 50vw;
        rotate: -3deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 7s
    }

    .snowflake:nth-child(11) {
        --size: .6vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 55vw;
        rotate: 4deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 9s
    }

    .snowflake:nth-child(12) {
        --size: .7vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 60vw;
        rotate: 2deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -4s
    }

    .snowflake:nth-child(13) {
        --size: .1vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 65vw;
        rotate: 0deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 6s
    }

    .snowflake:nth-child(14) {
        --size: .9vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 70vw;
        rotate: -1deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 1s
    }

    .snowflake:nth-child(15) {
        --size: .3vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 75vw;
        rotate: 2deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -4s
    }

    .snowflake:nth-child(16) {
        --size: .8vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 80vw;
        rotate: 5deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -3s
    }

    .snowflake:nth-child(17) {
        --size: .5vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 85vw;
        rotate: -3deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 3s
    }

    .snowflake:nth-child(18) {
        --size: .4vw;
        --left-ini: 0vw;
        --left-end: 5vw;
        left: 90vw;
        rotate: 2deg;
        animation: snowfall 9s linear infinite;
        animation-delay: 7s
    }

    .snowflake:nth-child(19) {
        --size: .6vw;
        --left-ini: 0vw;
        --left-end: 2vw;
        left: 95vw;
        rotate: 0deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -4s
    }

    .snowflake:nth-child(20) {
        --size: .2vw;
        --left-ini: 0vw;
        --left-end: -8vw;
        left: 100vw;
        rotate: 3deg;
        animation: snowfall 9s linear infinite;
        animation-delay: -2s
    }

    .buggiewindow {
        background: #00000055;
        z-index: 500;
        display: grid;
        justify-content: center;
        margin: auto;
        align-content: center;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .giftbox {
        z-index: 502;
    }

    .galleryBox {
        z-index: 502;
    }


    .gifterrorbox {
        text-align: center;
        border-radius: 20px;
        padding: 20px;
        color: red;
        font-size: 50px;
        background: whitesmoke;
        z-index: 501;
    }