:root {
    font-family: Terminus, Arial;
    background-color: #121212;
    color: #ececec;
    cursor: default;
}

body {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

@font-face {
    font-family: Terminus;
    src: url('/assets/fonts/Terminus.ttf') format(truetype);
}

header {
    margin-left: -8px;
    margin-right: -8px;
    margin-top: -8px;
    text-align: center;
    transition: transform 2s ease;
    position: sticky;
    top: 0;
    z-index: 50;

    &[data=closed] {
        /* Something that may be used for the Nav Bar */
        transform: translateY(-130px);

        h1 {
            padding-top: 50px;
        }
    }
}

h1.main-title {
    transition: padding-top 1.75s ease;
    font-size: clamp(25px, 4vw, 32px);
    text-align: center;
}

p.main-title {
    text-align: center;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 2px;
    font-size: 20px;
}

nav.navigation {
    background-color: #b29b7b;
    background-color: #707096;
    border-bottom: solid
        /*white*/
        #707096 5px;
    box-shadow: inset 0px -20px 10px -10px #707096, 0px 0px 10px 10px #707096;
    image-rendering: pixelated;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20%;
    padding-right: 20%;
    justify-content: center;
    transition: padding 0.5s ease;

    .nav-buttons {
        margin: 5px 20px;
        padding: 5px;
        flex-grow: 2;
        background-color: black;
        cursor: pointer;
        color: #ececec;
        text-decoration: none;
        font-size: 20px;
        max-width: 300px;
        min-width: 75px;
        user-select: none;

        &:hover {
            background-color: #1d1d1d;
            scale: 1.05;
        }

        &:active {
            color: #ececec;
        }
    }
}

div.main-home {
    margin-left: 3%;
    margin-right: 3%;
    /*background-color: #76476b;*/
    min-height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 18px;

    div {
        &.welcoming-box {
            width: 30%;
            min-width: 200px;
            margin: 10px;
            flex-grow: 1;

            h2 {
                text-align: center;
                margin: 5px;
            }
        }

        &.right-box {
            width: 30%;
            flex-grow: 2;
            margin: 10px;

            sup {
                vertical-align: top;
                display: flex;
                margin-top: -5px;
                justify-content: center;
                opacity: 0.5;
                position: relative;
                z-index: -1;
            }

            h2 {
                text-align: center;
                margin: 5px;
            }
        }

        &.error-page {
            flex-grow: 2;
            margin: 10px;
            text-align: center;

            div {
                margin-top: clamp(10px, 5%, 50px);
            }
        }
    }
}

div.main-home.games {
    justify-content: center;
}

div.extra-home {
    margin-left: 3%;
    margin-right: 3%;
    /*background-color: #76476b;*/
    min-height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 18px;

    div {
        &.center-row {
            flex-grow: 2;
            text-align: center;
            margin-bottom: 25px;
        }
    }
}

.br-element {
    display: none;
}

a:-webkit-any-link {
    color: #d35883;

    &:active {
        color: #c99fb8;
    }
}

a:link {
    color: #d35883;

    &:active {
        color: #c99fb8;
    }
}

.games.scrolling {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    scrollbar-width: none;
    max-height: 215px;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

    div,
    a {
        scroll-snap-align: center;
        scroll-margin: 25px;
    }
}


h3:hover span.version-number:hover {
    background-color: #121212 !important;
    color: #ececec !important;
    width: 50vw;
    max-width: 100px;
    cursor: help;

    /*&:active {
        max-width: 200px;
        cursor: ew-resize;
    }*/
}

span.version-number {
    overflow-y: hidden;
    height: 23.374px;
}

.news-area.scrolling {
    overflow-y: scroll;
    scrollbar-width: thin;
    max-height: 50vh;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border: solid 3px white;
    margin-left: 6%;
    margin-right: 6%;
    border-radius: 5px;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

    noscript article {
        padding-bottom: 20px;
        scroll-snap-align: start;

        h3 {
            background-color: rgba(211, 88, 131, 0.5) !important;
            font-size: 22px;
            margin-top: 0;
            margin-bottom: 10px;
            padding: 5px 5px;
            position: sticky;
            top: 0;
            border-top: solid 3px white;
            border-bottom: solid 3px white;
            word-spacing: 5px;
            z-index: 20;
            user-select: none;

            span.version-number {
                position: absolute;
                float: right;
                right: 10px;
                background-color: rgba(146, 61, 91, 0.5);
                user-select: none;
                padding: 2px;
                border-radius: 2.25px;
                transition: 0.25s ease;
                max-width: fit-content;
            }

            &:hover {
                span.version-number {
                    color: transparent;
                    background-color: transparent;
                }
            }
        }

        span.h3-inside {
            display: flex;
            flex-direction: column;
        }

        section {
            background-color: #923d5b !important;
            font-size: 20px;
            min-height: 5vh;
            margin-left: 2vw;
            margin-right: 2vw;
            align-content: center;
            padding: 5px;
            border-radius: 10px;
            filter: drop-shadow(10px 5px rgba(18, 18, 18, 0.25));
            user-select: none;
        }
    }

    article {

        br::selection {
            background-color: transparent;
        }

        &::selection {
            background-color: #1d1d1d;
            color: #eeeeee;
        }

        /*max-height: 500px;*/
        padding-bottom: 20px;
        scroll-snap-align: start;

        &:nth-child(odd) {
            /*background-color: crimson;*/
            background-color: #515151;

            h3 {
                /*background-color: rgba(220, 20, 60, 0.5);*/
                background-color: rgba(81, 81, 81, 0.5);
            }
        }

        &:nth-child(even) {
            /*background-color: cornflowerblue;*/
            background-color: #3e3e3e;

            h3 {
                /*background-color: rgba(100, 148, 237, 0.5);*/
                background-color: rgba(62, 62, 62, 0.5);
            }
        }

        h3 {
            font-size: 22px;
            margin-top: 0;
            margin-bottom: 10px;
            padding: 5px 5px;
            position: sticky;
            top: 0;
            border-top: solid 3px white;
            border-bottom: solid 3px white;
            word-spacing: 5px;
            z-index: 20;

            span.h3-inside {
                display: flex;
                flex-direction: column;
            }

            span.version-number {
                position: absolute;
                float: right;
                right: 10px;
                background-color: rgba(18, 18, 18, 0.5);
                user-select: none;
                padding: 2px;
                border-radius: 2.25px;
                transition: 0.25s ease;
                max-width: fit-content;
            }

            &:hover {
                span.version-number {
                    color: transparent;
                    background-color: transparent;
                }
            }

            +section {
                background-color: rgba(18, 18, 18, 0.5);
                font-size: 20px;
                min-height: 20vh;
                margin-left: 2vw;
                margin-right: 2vw;
                align-content: center;
                padding: 5px;
                border-radius: 10px;
                filter: drop-shadow(10px 5px rgba(18, 18, 18, 0.25));

                &:target {
                    animation: news-target 2s forwards ease;
                }

                code.news {
                    font-family: Terminus;
                    background-color: #5757d5;
                    mix-blend-mode: luminosity;
                    border-radius: 2.50852px;
                    padding-left: 2.50852px;
                    padding-right: 2.50852px;

                    &::selection {
                        background-color: transparent;
                    }

                    &:hover {
                        background-color: #1d1d1d;
                    }
                }

                +input[type=button] {
                    font-family: Terminus !important;
                    font-size: 16px;
                    cursor: pointer;
                    background-color: #121212;
                    color: #eee;
                    margin-top: 2px;
                }

                figure {
                    margin: 10px 5px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    img.news {
                        width: 70vw;
                        max-width: 100%;
                        image-rendering: auto;
                        -webkit-user-drag: none;

                        &.pixelated {
                            image-rendering: pixelated;
                        }
                    }
                }
            }
        }
    }
}

@keyframes news-target {
    50% {
        scale: 1.025;
    }

    60% {
        scale: 1.025;
        border: solid rgb(241, 175, 51);
    }

    100% {
        border: solid rgb(210, 152, 44);
    }
}

.copyright-area {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
}

.error-intro {
    transform: translateY(-200px);
    animation: error-intro 1s forwards cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes error-intro {
    50% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(0);
        font-size: 300%;
    }

    75% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

.dropdown {
    position: static;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
}

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

.dropdown-content-links {
    min-width: 190px;
    background-color: #121212;
}

.games-search-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    .games-search[type=submit] {
        margin-top: 10px;
        min-width: 20%;
        max-width: 300px;
        background-color: #121212;
        color: #eee;
        font-family: Terminus;
        font-size: 18px;
        cursor: pointer;

        &:disabled {
            background-color: #515151;
            cursor: not-allowed;
        }
    }

    .games-search[type=search] {
        width: 5vw;
        min-width: 60%;
        max-width: 90%;
        font-family: Terminus;
        height: 20px;
        font-size: 20px;
        background-color: #121212;
        color: #eee;
        text-align: center;

        &:disabled {
            border-color: #515151;
            cursor: not-allowed;
        }

        &:invalid {
            border-color: #d35883;
        }

        &:valid {
            border-color: #66d358;
        }
    }
}