@import "global_colors.css";

:root {
    --font-family: "Determination Mono";
    --font-size: 24px;
    --button-font-size: 34px;

    --link-color: #dddddd;
}

body {
    background-image: url("img/background.png");
    background-blend-mode: overlay;

    max-width: 100%;
    overflow-x: hidden;
}

header, footer { background-color: var(--container-bg-color); }
#header-branding { top: 32px; }
.header-links { margin-top: 10px; }
@media(max-width: 1000px) {
    .header-links {
        margin-top: 20px;
        background-color: var(--container-bg-color);
    }
}
#header-branding:after { content: "ndertale - The Surface"; }
#header-branding-interaction { width: 530px; /*background-color: #ff000066;*/ }
@media(max-width: 800px) {
    #header-branding:after { content: "ndertale ..."; }
    #header-branding-interaction { width: 330px; }
}
@media(max-width: 420px) {
    #header-branding:after { content: "nder ..."; }
    #header-branding-interaction { width: 260px; }
}
@media(max-width: 385px) {
    #header-branding:after { content: " ..."; }
    #header-branding-interaction { width: 180px; }
}

@media(max-width: 310px) { * { display: none; } }

#download-btn {
    font-family: "Determination Mono";
    padding: 15px 25px;
}
#download-icon {
    padding-right: 5px;
    position: relative;
    top: 1px;
}
#dc-link:hover { color: #7785cc; }
#yt-link:hover { color: #cc0000; }

@media(max-width: 590px) { #logo-img { width: 100%; } }
#sans-img {
    position: relative;
    right: 260px;
}
#sans-dialouge {
    position: relative;
    bottom: 200px;
    font-size: 32px;
    left: 120px;
    font-family: "Undertale Sans";
}
@media(max-width: 830px) {
    #sans-img {
        position: relative;
        left: -45%;
        bottom: 60px;
        transform: rotate(45deg);
    }
    #sans-dialouge {
        left: 0px;
        bottom: 120px;
    }
}