* {
    scroll-behavior: smooth;    /* Tekee sivulla selaamisen sulavammaksi */
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    scroll-margin-top: 80px;    /* Jättää 80px välin ylös kun siirrytään ankkuripisteeseen */
}

body {
    margin-top: 0;
    margin: 10px;
    background-image: url(Pictures/Background_1.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    text-align: center;
    text-shadow: 0px 2px 3px #58480e;
}

p {
    padding: 10px;
}

/* Navbar */

.navbar {
    margin-top: 0;
    position: sticky;
    top: 0;   
    box-shadow: 0 4px 8px 0 rgba(10, 0, 97, 0.2);
    border-radius: 20px;
    background-color: #0598dbdd;
}

ul {
    list-style-type: none;
    padding: 4px ;
    display: flex;      /* Järjestää elementit riviin */
    flex-wrap: wrap;    /* Elementit siirtyy toiselle riville jos liian kapea näyttö */
    justify-content: center;
    gap: 4px;
}

.navbar a:link, .navbar a:visited {
    color: #F5FEFF;
    padding: 10px;      /* Klikattava alue linkin ympärillä */
    display: inline-block;  /* Tekee linkin "alueesta" klikattavan */
    text-decoration: none;      /* Poistaa alaviivan */
    text-shadow: 0px 2px 3px #58480e;
    font-weight: bold;
    border-radius: 20px;
}

.navbar a:hover, .navbar a:active {
    background-color: #83b2e7;
    transform: scale(1.10);     /* Skaalaa linkkiä isommaksi */
}

/* Logo */

.logo {
    display: flex;
    justify-content: center;
}

.logo img {
    max-width: 100%;    /* Kuva skaalautuu enintään alkuperäiseen kokoonsa */
}

/* Boxes */

.box {
    display: block;
    background-color: #0598dbbb;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: 0 4px 8px 0 rgba(10, 0, 97, 0.2);   /* Laittaa laatikoille varjostuksen */
}

/* Video */

#trailer  {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#trailer iframe {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 20px;
}

/* Team mebers */

#team img {
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(10, 0, 97, 0.2);
}

#team figcaption {
    text-align: center;     /* Keskittää kuvatekstit kuvien alla */
    font-weight: bold;
}

.devs, .art, .gamelink{
    display: flex;
    flex-direction: column;     /* Kuvat näkyvät päällekkäin */
    align-items: center;
    gap: 24px;      /* Väli jokaisen kuvan välillä */
}

/* More Info */
.gameportal {
    background-color: #0375aa;
    border-radius: 20px;
}
.gameportal a:link, a:active {
    color: #F5FEFF;
    display: inline-block;
    text-decoration: underline;
    text-shadow: 0px 2px 3px #58480e;
    font-weight: bold;
    border-radius: 20px;
}

/* Get the game image link */

.gamelink img {
    transition: transform 0.2s;     /* Animoi siirtymän 02 sekunnilla */
    border-radius: 20px;
}
.gamelink img:hover {
    transform: scale(1.1);          /* Kuva muuttuu isommaksi osoittimen alla */
}
/* Collaborators */

#info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.collab img {
    padding: 10px;
    border-radius: 20px;
    max-width: 100%;        /* Kuva skaalautuu enintään alkuperäiseen kokoonsa */
    margin-bottom: 10px;    /* Tila jokaisen kuvan alla */
}

/* Copyright */

.copyright {
    text-align: center;
}
/* Bigger screen */

@media only screen and (min-width: 800px) {      /* Muuttaa rakennetta, kun näytön leveys enemmän kuin 800px */

    body {
        margin-top: 10px;
        margin: 0 20%;
    }

    .devs, .art, .gamelink {
        flex-direction: row;        /* Isommalla näytöllä elementit riveissä */
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }
    .navbar {
        font-size: 1.5em;           /* Muuttaa fonttia isommaksi isoilla näytöillä */
    }
    .devs img, .art img {
        margin: 0;
    }
}