@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: #121212;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

.btn_twitch:hover {
    background-color: #6441A4 !important;
}

.btn_technic:hover {
    background-color: #1389D2 !important;
}

#wip {
    position: absolute;
    z-index: 99998;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #121212;
    background-image: url('../../img/bg_noware.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#wip_img_cover {
    position: absolute;
    z-index: 99997;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(#12121221, #121212c7);
    background-color: #12121228;
}

#wip_content {
    z-index: 99999;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    text-align: center;
    font-size: 2em;
}

main {
    min-height: 100vh;
    width: 100%;
    background-color: #121212;
    color: #fff;
    padding: 0;
    margin: 0;
    background-image: url('../../img/bg_noware.jpg');
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

main a {
    color: #fff;
    text-decoration: none;
}

main img {
    width: 384px;
    height: auto;
    border-radius: 6px;
}

#logo {
    margin: 0;
    padding: 8px 0px 8px 12px;
}

#publisher {
    font-size: 0.72em;
}

@media (min-width: 1000px) and (min-height: 501px) {

    main {
        background-color: #121212;
        color: #fff;
        padding: 0;
        margin: 0;
        background-image: url('../../img/bg_noware.jpg');
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100vw;
        position: relative;
        top: 0;
        left: 0;
    }

    #logo {
        position: absolute;
        left: 7%;
        top: 4%;
        font-size: 6em;
    }

    #info_box p {
        margin: 0;
    }

    #info_box {
        max-width: 372px;
        padding: 8px 0px 8px 12px;
        border-radius: 6px;
        background-color: #232323;
        position: absolute;
        left: 7%;
        bottom: 13%;
    }

    #info_box h3, p {
        margin: 0;
    }

    .download_box {
        position: absolute;
        transform: translate(-50%, -50%);
        right: 0%;
        top: 50%;
        height: auto;
        width: 19em;
        /* background-color: #12121223; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .download_box a {
        background-color: #232323;
        border: none;
        border-radius: 6px;
        padding: 4px 8px 8px 8px;
        margin: 16px 0;
        width: 100%;
        display: block;
        font-size: 1.8em;
        text-align: center;
        font-weight: bold;
        color: #fff;
        transition: 0.2s;
    }

    .download_box a:hover {
        background-color: #181818;
        transition: 0.2s;
    }
}

@media screen and (max-width: 1000px) {
    main img {
        width: 100%;
        height: auto;
    }

    #logo {
        margin-left: 0.6em;
        font-size: 2.2em;
    }

    #info_box {
        margin-top: 4em;
        margin-left: 2em;
        padding-right: 2em;
        margin-bottom: 4em;
    }

    .download_box {
        width: 17em;
        margin-left: 2em;
    }

    .download_box a {
        background-color: #232323;
        border: none;
        border-radius: 6px;
        padding: 4px 8px 8px 8px;
        margin: 16px 0;
        width: auto;
        display: block;
        font-size: 1.4em;
        text-align: center;
        font-weight: bold;
        color: #fff;
        transition: 0.2s;
    }
}

@media screen and (max-height: 499px) {
    #logo {
        margin-left: 0.6em;
        font-size: 2.2em;
    }

    #info_box {
        margin-top: 4em;
        margin-left: 2em;
        padding-right: 2em;
        margin-bottom: 4em;
    }

    .download_box {
        width: 17em;
        margin-left: 2em;
    }

    .download_box a {
        background-color: #232323;
        border: none;
        border-radius: 6px;
        padding: 4px 8px 8px 8px;
        margin: 16px 0;
        width: auto;
        display: block;
        font-size: 1.4em;
        text-align: center;
        font-weight: bold;
        color: #fff;
        transition: 0.2s;
    }
}

::selection
{
    color: #ffffff;
    background-color: #F5832A;
}

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #232323;
}
::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #333; /* #111 */
}