:root {
    --bg: #ffffff; /* Päätaustaväri sivustolle */
    --text: #6f7468; /* Tavallisen tekstin väri */
    --heading: #707468; /* Otsikkotekstin väri */
    --accent: #cfe5c8; /* Korostusväri vaaleanvihreänä */
    --accent-strong: #d46a6a; /* Tummempi korostuspunainen */
    --radius: 12px; /* Yleinen kulman pyöristys */
    --spacing-xxs: 8px; /* Erittäin pieni väli */
    --spacing-xs: 12px; /* Pieni väli */
    --spacing-s: 20px; /* Normaali pieni väli */
    --spacing-m: 30px; /* Keskikokoinen väli */
    --spacing-l: 40px; /* Suurempi väli */
    --spacing-xl: 60px; /* Erittäin suuri väli */
}



/* 
   PERUSASETUKSET
*/
body {
    background: var(--bg); /* Sivun taustaväri */
    overflow-x: hidden; /* Poista vaaka-scrollaus */
    position: relative; /* Perustila pseudo-elementeille */

}

/* 
   TAUSTAKAARET
   - ::before ja ::after luovat kaksi erillistä koriste-elementtiä
   - nämä eivät ole oikeita HTML-elementtejä vaan "piirrettyjä" lisäosia
*/


.background-curves::before,
.background-curves::after {
    content: ""; /* Pakollinen, muuten pseudo-elementti ei näy */
    position: absolute; /* Sijoitetaan tarkasti parentin sisälle */

    width: 500px; /* Muodossa käytettävä leveys */
    height: 140px; /* Muodossa käytettävä korkeus */

    background: var(--accent); /* Täyttää muodon korostusvärillä */

    border-radius: 100px; /* Pyöristää kulmat kokonaan */

    z-index: -1; /* Sijoittaa muodon taustalle */
}

/* 
   VASEMMAN ALAKULMAN MUOTO
*/
.background-curves::before {
    bottom: 100px; /* Etäisyys alareunasta */
    left: -150px; /* Työntyy vasemmalta ulos ruudusta */

    transform: rotate(-30deg); /* Kierrä muoto hieman */
    outline: 2px solid #8ab090; /* Siisti offset-ääriviiva */
    outline-offset: 12px; /* Etäisyys muodon reunasta */
}

/* 
   OIKEAN YLÄKULMAN MUOTO
*/
.background-curves::after {
    top: -100px; /* Työntyy ylös ruudun ulkopuolelle */
    right: -120px; /* Työntyy oikealta ulos */

    width: 220px; /* Kapeampi muoto kuin before */
    height: 600px; /* Pystympi muoto */

    border-radius: 120px; /* Pyöristää muodon uudelleen */
    outline: 2px solid #8ab090; /* Siisti offset-ääriviiva */
    outline-offset: 12px; /* Etäisyys muodon reunasta */
}

@font-face {
  font-family: "Open Sauce";
  src: url("../fonts/open-sauce/OpenSauceOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Open Sauce";
  src: url("../fonts/open-sauce/OpenSauceOne-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* ===== BACK LINK — aina oikeassa alakulmassa ===== */

.back-link,
.back a,
.success-back,
.work-footer .back-link {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  font-family: "Abhaya Libre", serif;
  font-size: 1.1rem;
  color: var(--heading);
  text-decoration: none;
  letter-spacing: 1px;
  opacity: 1;
  transition: opacity 0.2s;
  z-index: 100;
}

.back-link:hover,
.back a:hover,
.success-back:hover,
.work-footer .back-link:hover {
  opacity: 0.6;
}




@media (min-width: 2000px) {
  .back-link,
  .back a,
  .success-back,
  .work-footer .back-link {
    font-size: 1.6rem;
    bottom: 3rem;
    right: 3rem;
  }
}


/*==== vihrät palkin asetukset =====*/

@media (max-width: 768px) {

    .background-curves {
        overflow: hidden;
    }

    .background-curves::before {
        width: 300px;
        height: 55px;

        left: -50px;
        bottom: 20px;

        transform: rotate(-15deg);

        outline-width: 1px;
        outline-offset: 2px;
    }

    .background-curves::after {
        width: 85px;

        right: 20px;

        outline-width: 1px;
        outline-offset: 2px;
    }
}