@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

:root {

    /* Art Theme */
    --background: #DEC19B;
    --foreground: #654A3B;

    --footer-foreground: #654A3B5c;

    --button-background: #7d4c3240;
    --button-background-accent: #DEC19B;
    --button-foreground: #654A3B;
    --button-accent: #C58E55;

    --img-border: #1f1f1f;

    --shado-down: 1.2px 4.6px 5.3px rgba(0, 0, 0, 0.026),
        2px 8px 10px rgba(0, 0, 0, 0.08);
    --shadow-up:
        0.3px 0.3px 0.3px rgba(0, 0, 0, 0.1),
        0.7px 0.7px 0.7px rgba(0, 0, 0, 0.1),
        1.3px 1.3px 1.3px rgba(0, 0, 0, 0.1),
        2.2px 2.2px 2.2px rgba(0, 0, 0, 0.1),
        4.2px 4.2px 4.2px rgba(0, 0, 0, 0.1),
        10px 10px 10px rgba(0, 0, 0, 0.1);
}

html {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Noto Sans';
}

.footer {
    display: grid;
    place-items: center;
    margin: 6vw;
}

.footer p {
    color: var(--footer-foreground);
    font-family: 'Maven Pro', monospace;
    font-weight: bold;
}

@media (max-width: 900px) {
    .footer {
        margin-top: 15vh;
    }
}