/* Yleiset asetukset */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    font-family: "Carter One", system-ui;
    background-color: #f4f4f4;
    color: rgb(34, 34, 34);
    line-height: 1.6;
}

/* Yläpalkki */
.header {
    background-color: #181818;
    color: white;
    padding: 20px;
    text-align: center;
}

.header h1 {
    margin: 0 0 15px;
    letter-spacing: 3px;
}


/* Navigointivalikko */
.navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.navigation a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

.navigation a:hover {
    color: #00bcd4;
}


/* Etusivun suuri osio */

.hero {
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 400px;
    padding: 80px 20px;

    text-align: center;
}

.hero {
    min-height: 793px;
    padding: 80px 20px;
    background: linear-gradient(135deg, #202020, #5a5a5a);
    color: rgb(255, 0, 242);
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.hero p {
    max-width: 600px;
}

body.etusivu .hero {
    background: transparent;
}

/* Painike */
.button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    background-color: #0098d4;
    color: #111111;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.button:hover {
    background-color: #0098d4;
}


/* Sisältö ilman valkoista laatikkoa */
.content {
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
    padding: 30px;

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border: none;
    border-radius: 0;
    box-shadow: none;

    height: auto;
    min-height: 0;
    max-height: none;

    color: white;
}

/* Pääotsikot */
.content h1 {
    color: #ffffff;
    font-size: 48px;
    text-align: center;

    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

/* Väliotsikot */
.content h2 {
    color: #00d9ff;
    font-size: 30px;

    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.8);
}

/* Tavalliset tekstit */
.content p,
.content li {
    color: #ffffff;
    font-size: 19px;
    line-height: 1.9;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
}

/* Linkit */
.content a {
    color: #00d9ff;
    text-decoration: none;
}

.content a:hover {
    color: #ffffff;
}


/* Kuvien asettelu */
.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Kuvien tyylit */
.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}  

/* Kuvatekstit */
.image-container figcaption {
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    color: #555;
}

/* Yhteystiedot */
.contact-info {
    text-align: center;
    margin-top: 20px;
} 


/* Tebex-logo */
.tebex-logo {
    display: block;
    margin: 20px auto;
    max-width: 200px;
    height: auto;
}

/* Sivuston taustakuva */
body {
    background-image: url("./TebexUnion.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}


/* Alapalkki */
.footer {
    padding: 20px;
    background-color: #181818;
    color: #ea00ff;
    text-align: center;
}


/* Puhelimille ja pienille näytöille */
@media (max-width: 600px) {

    .header h1 {
        font-size: 24px;
    }

    .navigation {
        gap: 12px;
    }

    .hero {
        min-height: 350px;
        padding: 50px 20px;
    }

    .hero h2 {
        font-size: 28px;
    }

    .content {
        margin: 15px;
        padding: 22px;
    }
}

body {
    background-color: red !important;
}


/* Yläpalkki */
.navbar {
    background-color: #181818;
    height: 65px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 30px;
    box-sizing: border-box;
}

/* Yläpalkin linkit */
.navbar a {
    color: white;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;

    transition: color 0.3s ease;
}

/* Hiiren osoitin linkin päällä */
.navbar a:hover {
    color: #00d9ff;
}

/* Poistetaan sivun oletusreunukset */
body {
    margin: 0;
}



/* Yläpalkki kaikilla sivuilla */
.navbar {
    background-color: #181818;
    width: 100%;
    height: 55px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

    box-sizing: border-box;
}

/* Yläpalkin linkit */
.navbar a,
.navbar a:visited {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

/* Linkkien hover-efekti */
.navbar a:hover {
    color: #ea00ff;
}

/* Poistetaan ylimääräiset reunukset */
body {
    margin: 0;
}



/* Kaikkien sivujen taustakuvat */
body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Etusivu */
body.etusivu {
    background-image: url("tausta.png");
}

/* Tietoa meistä */
body.tietoa {
    background-image: url("tausta.png");
}

/* Säännöt */
body.saannot {
    background-image: url("tausta.png");
}

/* Yhteystiedot */
body.yhteystiedot {
    background-image: url("tausta.png");
}

/* Tebex */
body.tebex {
    background-image: url("tausta.png");
}

body.etusivu .hero {
    background: transparent !important;
}


/* Sivuston rakenne */
html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Pääsisältö täyttää vapaan tilan */
main {
    flex: 1;
}

/* Alapalkki sivun alareunaan */
.footer {
    background-color: #181818;
    color: #ea00ff;
    text-align: center;
    padding: 20px;
    margin-top: auto;
}

body.etusivu {
    background-color: #181818;
}


/* Etusivun rakenne */
body.etusivu {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Pääsisältö täyttää jäljellä olevan tilan */
body.etusivu main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Etusivun kuva ja sisältö */
body.etusivu .hero {
    flex: 1;
    min-height: 0;
    height: auto;
    padding: 40px 20px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: transparent !important;
}

/* Alapalkki */
body.etusivu .footer {
    margin-top: 0;
    flex-shrink: 0;
    background-color: #181818;
    padding: 20px;
    text-align: center;
}


/* Etusivun otsikko */
body.etusivu .hero h2 {
    color: white;
    font-size: 42px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.9);
}

/* Etusivun esittelyteksti */
body.etusivu .hero p {
    color: white;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    max-width: 700px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
}


/* Tietoa meistä -sivun otsikko */
body.tietoa .content h1 {
    color: #171717;
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
}

/* Väliotsikot */
body.tietoa .content h2 {
    color: #ea00ff;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Tekstikappaleet */
body.tietoa .content p {
    color: #222;
    font-size: 17px;
    line-height: 1.8;
}


/* Tietoa meistä -sivun taustakuva */
body.tietoa {
    background-image: url("tausta.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* Säännöt-sivun taustakuva */
body.saannot {
    background-image: url("tausta.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* Otsikot */
body.saannot .content h1 {
    color: #171717;
    font-size: 36px;
    margin-bottom: 40px;
}

/* Discord- ja RP-sääntöjen otsikot */
body.saannot .content h2 {
    color: #ea00ff;
    font-size: 36px;
    margin-top: 30px;
    margin-bottom: 40px;
}

/* Sääntötekstit */
body.saannot .content p {
    color: #222222;
    font-size: 16px;
    line-height: 1.8;
}


/* Säännöt-sivun pääotsikko */
.saannot-otsikko {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #181818;
    margin-bottom: 40px;
}


/* Yhteystiedot-otsikko */
.yhteystiedot-otsikko {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #181818;
    margin-bottom: 40px;
}


/* Yhteystiedot-sivun otsikko */
body.yhteystiedot .content h1 {
    text-align: center;
    font-size: 36px;
    margin: 10px 0 30px;
}


/* Otsikko keskelle */
body.yhteystiedot main.content h1 {
    text-align: center;
    font-size: 36px;
    margin: 10px 0 30px;
}


/* Otsikko keskelle */
body.yhteystiedot .yhteystiedot-laatikko h1 {
    text-align: center;
    font-size: 36px;
    margin: 10px 0 30px;
}


/* Tebex-otsikko keskelle */
body.tebex main.tebex-laatikko h1 {
    text-align: center;
    font-size: 36px;
    margin: 10px 0 30px;
}



/* Koko sivuston fontti */
html {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
}

body, button, input, textarea {
    font-family: 'Poppins', sans-serif;
}

/* Kaikkien sivujen pääotsikot */
h1 {
    font-size: 42px;
    font-weight: 700;
}

/* Väliotsikot */
h2 {
    font-size: 28px;
    font-weight: 600;
}

/* Tavalliset tekstit */
p, li {
    font-size: 18px;
    line-height: 1.8;
}

/* Yläpalkin linkit */
.navbar a {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 600;
}

/* Painikkeet */
button, .btn {
    font-size: 18px;
    font-weight: 600;
}



/* Etusivun sisältöalue */
body.etusivu .hero {
    position: relative;
    min-height: calc(100vh - 110px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    overflow: hidden;
}

/* Union-logon sijoitus */
.union-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Logon koko ja animaatio */
.union-logo {
    display: block;
    width: min(1200px, 90vw);
    max-width: none;
    height: auto;

    animation: unionFloat 5s ease-in-out infinite;

    filter: drop-shadow(
        0 15px 25px rgba(0, 0, 0, 0.4)
    );
}

/* Leijuva animaatio */
@keyframes unionFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}

/* Tekstit logon eteen */
.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 20px;
    text-shadow: 0 2px 8px black;
}

@media (prefers-reduced-motion: reduce) {
    .union-logo {
        animation: none;
    }
}


/* Hidas leijuva liike */
@keyframes unionFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.03);
    }
}

/* Huomioidaan vähennetyn liikkeen asetus */
@media (prefers-reduced-motion: reduce) {
    .union-logo {
        animation: none;
    }
}


/* Etusivu täsmälleen näytön kokoiseksi */
html,
body.etusivu {
    margin: 0;
    padding: 0;
}

/* Etusivun asettelu */
body.etusivu {
    height: 100vh;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* Yläpalkki */
body.etusivu .navbar {
    flex-shrink: 0;
    height: 50px;
}

/* Etusivun pääsisältö */
body.etusivu .hero {
    flex: 1;
    min-height: 0;
    height: auto;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

/* Alapalkki */
body.etusivu .footer,
body.etusivu footer {
    flex-shrink: 0;
    padding: 15px;
    margin: 0;
}

/* Leijuva Union-logo */
body.etusivu .union-logo {
    width: min(1100px, 85vw);
    max-height: 90%;
    object-fit: contain;

    animation: unionFloat 5s ease-in-out infinite;
}

/* Logon animaatio */
@keyframes unionFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.etusivu .union-logo {
        animation: none;
    }
}


/* CARTER ONE - KOKO SIVUSTO */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
button,
nav,
header,
footer,
input,
textarea {
    font-family: "Carter One", cursive !important;
}

/* Pääotsikot */
h1 {
    font-size: 42px;
}

/* Väliotsikot */
h2 {
    font-size: 30px;
}

/* Tavalliset tekstit */
p, li {
    font-size: 18px;
    line-height: 1.8;
}

/* Yläpalkki */
.navbar a {
    font-size: 17px;
}

/* Etusivun pääotsikko */
.hero h2 {
    font-size: 42px;
}


/* Tietoa meistä -sivun asettelu */
.tietoa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
    margin-top: 70px;
}

/* Kolmas osio keskelle */
.tietoa-grid section:last-child {
    grid-column: 1 / -1;
    text-align: center;
}

/* Mobiiliasettelu */
@media (max-width: 768px) {
    .tietoa-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tietoa-grid section:last-child {
        grid-column: auto;
    }
}


/* Yhteystiedot ja Tebex ilman valkoisia laatikoita */
body.yhteystiedot main.content,
body.tebex main.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: none;

    height: auto;
    min-height: 0;
    max-height: none;

    margin: 0;
    padding: 65px 30px;

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border: none;
    border-radius: 0;
    box-shadow: none;

    color: #ffffff;
    box-sizing: border-box;
}

/* Sivujen pääotsikot */
.yhteystiedot-sisalto h1,
.tebex-sisalto h1 {
    font-size: 52px;
    color: white;
    text-align: center;
    margin: 0 0 60px;

    text-shadow: 0 4px 12px rgba(0,0,0,0.9);
}

/* Tekstiosioiden asettelu */
.yhteystiedot-tekstit,
.tebex-tekstit {
    width: 100%;
    max-width: 650px;
    text-align: center;
}

/* Väliotsikot */
.yhteystiedot-tekstit h2,
.tebex-tekstit h2 {
    color: #ea00ff;
    font-size: 30px;
    margin-bottom: 25px;
}

/* Tavalliset tekstit */
.yhteystiedot-tekstit p,
.tebex-tekstit p {
    color: white;
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* Tekstien varjostus */
.yhteystiedot-sisalto h2,
.yhteystiedot-sisalto p,
.tebex-sisalto h2,
.tebex-sisalto p {
    text-shadow: 0 3px 10px rgba(0,0,0,0.9);
}

/* Discord- ja Tebex-painikkeet */
.union-painike {
    display: inline-block;
    padding: 15px 30px;

    background: #ea00ff;
    color: #ffffff !important;

    text-decoration: none;
    border-radius: 12px;

    font-size: 18px;
    transition: 0.3s ease;
}

.union-painike:hover {
    background: #ea00ff;
    transform: translateY(-4px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Mobiilinäkymä */
@media (max-width: 768px) {
    body.yhteystiedot main.content,
    body.tebex main.content {
        padding: 45px 20px;
    }

    .yhteystiedot-sisalto h1,
    .tebex-sisalto h1 {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .yhteystiedot-tekstit h2,
    .tebex-tekstit h2 {
        font-size: 24px;
    }
}


/* TIETOA MEISTÄ JA SÄÄNNÖT */

/* Poistetaan mahdolliset vanhat laatikkotyylit */
body.tietoa main.content,
body.saannot main.content {
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
    padding: 30px;

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border: none;
    border-radius: 0;
    box-shadow: none;

    height: auto;
    min-height: 0;
    max-height: none;
}

/* Pääotsikot */
body.tietoa .content h1,
body.saannot .content h1 {
    color: #ffffff !important;
    font-size: 48px;
    text-align: center;

    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

/* Väliotsikot */
body.tietoa .content h2,
body.saannot .content h2 {
    color: #ea00ff !important;
    font-size: 28px;

    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
}

/* Tavalliset tekstit */
body.tietoa .content p,
body.saannot .content p,
body.saannot .content li {
    color: #ffffff !important;
    font-size: 18px;
    line-height: 1.8;

    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.95);
}

/* Carter One */
body.tietoa .content,
body.saannot .content {
    font-family: "Carter One", cursive;
}

/* Mobiililaitteet */
@media (max-width: 768px) {
    body.tietoa .content h1,
    body.saannot .content h1 {
        font-size: 36px;
    }

    body.tietoa .content h2,
    body.saannot .content h2 {
        font-size: 24px;
    }

    body.tietoa .content p,
    body.saannot .content p {
        font-size: 16px;
    }
}

/* UNION - LUMISADE */

#snowfall {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -20px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    0% {
        transform: translate3d(0, -20px, 0);
    }

    100% {
        transform: translate3d(
            var(--drift),
            105vh,
            0
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .snowflake {
        animation: none;
        display: none;
    }
}

/* UNION - KAIKKIEN SIVUJEN PÄÄOTSIKOT */

.page-title {
    font-family: 'Carter One', cursive;
    font-size: 48px !important;
    font-weight: normal;

    color: white;
    text-align: center;

    position: relative;
    width: 100%;

    margin: 70px 0 0 0 !important;
    padding: 0 !important;

    line-height: 1.2;

    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
}

/* UNION - SÄÄNTÖJEN KAKSI SARAKETTA */

.rules-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;

    width: 90%;
    max-width: 1500px;

    margin: 50px auto 0;
    align-items: start;
}

.rules-column {
    min-width: 0;
    text-align: left;
}

.rules-column h2 {
    font-family: 'Carter One', cursive;
    font-size: 28px;
    color: #ea00ff;

    margin: 0 0 30px 0;
    text-shadow: 2px 2px 5px black;
}

.rules-column p {
    font-family: 'Carter One', cursive;
    font-size: 16px;
    color: white;

    line-height: 1.8;
    margin-bottom: 20px;

    overflow-wrap: break-word;
    text-shadow: 2px 2px 4px black;
}

/* MOBIILINÄKYMÄ */

@media (max-width: 768px) {
    .rules-container {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 90%;
    }
}

/* UNION - YHTEYSTIETOJEN KAKSI SARAKETTA */

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;

    width: 90%;
    max-width: 1300px;

    margin: 50px auto 0;
    align-items: start;
}

.contact-column {
    min-width: 0;
    text-align: center;
}

.contact-column h2 {
    font-family: 'Carter One', cursive;
    font-size: 28px;
    color: #ea00ff;

    margin: 0 0 30px 0;
    text-shadow: 2px 2px 5px black;
}

.contact-column p {
    font-family: 'Carter One', cursive;
    font-size: 16px;
    color: white;

    line-height: 1.8;
    margin-bottom: 20px;

    text-shadow: 2px 2px 4px black;
}

/* DISCORD-PAINIKE */

.contact-button {
    display: inline-block;
    background: #ea00ff;
    color: white;

    padding: 15px 28px;
    border-radius: 12px;

    font-family: 'Carter One', cursive;
    font-size: 16px;
    text-decoration: none;

    transition: 0.3s;
}

.contact-button:hover {
    background: #ea00ff;
    transform: scale(1.05);
}

/* SÄHKÖPOSTI */

.contact-email {
    color: #ea00ff;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-email:hover {
    text-decoration: underline;
}

/* MOBIILINÄKYMÄ */

@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 90%;
    }
}

/* UNION - YHTEYSTIETOJEN LINKKIEN VÄRIT */

.contact-button,
.contact-button:visited {
    color: white !important;
}

.contact-email,
.contact-email:visited {
    color: white !important;
}

/* Väri myös hiiren ollessa linkin päällä */

.contact-button:hover,
.contact-email:hover {
    color: white !important;
}
.contact-button {
    background-color: #ea00ff !important;
    color: white !important;
}

/* UNION - TIETOA MEISTÄ -SIVUN ASETTELU */

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 70px;
    row-gap: 80px;

    width: 90%;
    max-width: 1000px;

    margin: 70px auto 0;
    align-items: start;
}

.about-column {
    min-width: 0;
    text-align: left;
}

.about-column h2 {
    font-family: 'Carter One', cursive;
    font-size: 28px;
    color: #ea00ff;

    margin: 0 0 20px 0;
    text-shadow: 2px 2px 5px black;
}

.about-column p {
    font-family: 'Carter One', cursive;
    font-size: 16px;
    color: white;

    line-height: 1.8;
    margin: 0 0 20px 0;

    text-shadow: 2px 2px 4px black;
}

/* MOBIILINÄKYMÄ */

@media (max-width: 768px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 90%;
    }
}

/* UNION - FOOTER JA TEKIJÄT */

.footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 90px;
    background: #181818;
    width: 100%;
}

.footer-credits {
    position: absolute;
    left: 25px;

    font-family: 'Carter One', cursive;
    font-size: 12px;
    color: #525252;
}

.footer-copyright {
    font-family: 'Carter One', cursive;
    font-size: 16px;
    color: #ea00ff;
}

/* MOBIILINÄKYMÄ */

@media (max-width: 600px) {
    .footer {
        flex-direction: column;
        gap: 8px;
        padding: 15px;
    }

    .footer-credits {
        position: static;
    }
}