body, html {

    background-color: #3e4143;
    
    background-image: url("/assets/img/background.svg");
    background-size: cover;      
    background-position: center;
    background-attachment: fixed; 
    background-size: 75px;

    color: white;
    
    font-family: 'Silkscreen';

    text-align: center;

    cursor: url("/assets/img/mouse_cursor.svg"), default;
    
    overflow-x: hidden;

}

a, button {
    cursor: pointer;
}

input, textarea {
    cursor: text;
}

#wrapper {
    padding: 40px 20px;
}

#appletContainer {
    width: 512px;
    height: 384px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;

    cursor: none;
}

#appletScaleWrapper {
    transform: scale(1);
    transform-origin: top left;
    width: 512px;
    height: 384px;

    cursor: none;
}

canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.logo {

    margin-top: -50px;
    margin-bottom: -50px;

}

.logo img {

    width: 60%;
    height: auto;

}

.download-link {
    color: yellow;
}

.image-button {

    width: 55px;
    height: auto;

    margin: 10px;

    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;

}

.image-button:hover {

    transform: scale(1.1);
    opacity: 1;
    
}

.flag-es:hover {
    content: url("/assets/img/lang/spanish_hover.svg");
}

.flag-en:hover {
    content: url("/assets/img/lang/english_hover.svg");
}

.discord:hover {
    content: url("/assets/img/social/discord_hover.svg");
}

.twitter:hover {
    content: url("/assets/img/social/twitter_hover.svg");
}
.youtube:hover {
    content: url("/assets/img/social/youtube_hover.svg");
}

.text-block {
    margin: 5px 0;
}

.text-block h1 {

    font-size: 50px;
    text-shadow: 5px 5px 0px black;

}

.text-block p {

    font-size: 35px;
    text-shadow: 3px 3px 0px black;
    
}

.description {
    text-shadow: 2px 2px 0px black;

}

footer {

    margin-top: 30px;

}

#followUsTitle {
    margin-top: 20px;
}

@media (max-width: 900px) {
    .logo img {
        width: 80%;
    }

    .text-block h1 {
        font-size: 38px;
    }

    .text-block p {
        font-size: 28px;
    }
}

@media (max-width: 700px) {
    .language-flag {
        width: 45px;
        margin: 5px;
    }
}

@media (max-width: 600px) {
    #appletContainer {
        width: 100%;
        height: auto;
    }

    #appletScaleWrapper {
        transform: scale(0.7);
        width: 512px;
        height: 384px;
        margin: 0 auto;
    }
}

@media (max-width: 450px) {
    #appletScaleWrapper {
        transform: scale(0.55);
    }

    .text-block h1 {
        font-size: 32px;
    }

    .text-block p {
        font-size: 24px;
    }
}

@media (max-width: 380px) {
    .text-block h1 {
        font-size: 28px;
    }

    .text-block p,
    .description {
        font-size: 18px;
    }
}