body {



        margin: 0;

        padding: 0;

        display: flex;

        flex-direction: column;

        height: 100vh;

        background-color: #f5f5f5;

    }



    header {

        background-color: #fff;

        background-image: url('img/myymala.png');

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        background-attachment: fixed;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        height: 100vh;

        width: 100vw;

        position: relative;

    }



    p {

        font-size: 1.1vw; /* Skaalautuva fonttikoko */

        color:white;

        background-color: #37a850;

        box-shadow: 0 16px 18px rgba(0, 0, 0, 2.9); /* Lisää varjostusta nav-baarille */

        margin-bottom: 20vh; /* Lisää väliä logon ja navin välille */

        opacity: 0.95;
         text-align: center; /* Keskittää tekstin vaakasuunnassa */

    }
    
  


    nav {

        display: flex;

        gap: 1vw; /* Skaalautuva väli */

        

        justify-content: center;

        

        box-shadow: 0 14px 16px rgba(0, 0, 0, 2.9); /* Lisää varjostusta nav-baarille */

        margin-bottom: 2vh; /* Lisää väliä logon ja navin välille */



    }

    

    nav a {

        text-decoration: none;

        color: white;

        font-weight: bold;

        padding: 1vh 1vw; /* Skaalautuva padding */

        background-color: #37a850;

        border-radius: 0.5vw; /* Skaalautuvat pyöristetyt kulmat */

        font-size: 1.6vw;

        font-family: 'Playfair Display', serif; /* Käytä Playfair Display -fonttia */

        transition: all 0.3s ease; /* Sileä siirtymä hover-efektissä */

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Alkuperäinen varjostus */

        position: relative; /* Lisää sijaintiominaisuus */

        opacity: 0.90;

    }

    

    nav a::after {

        content: '';

        position: absolute;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.1);

        top: 0;

        left: 0;

        z-index: -1;

        transition: opacity 0.3s ease;

        border-radius: inherit; /* Peri alkuperäinen border-radius */

        opacity: 0; /* Tee efekti oletuksena näkymättömäksi */

    }

    

    nav a:hover::after {

        opacity: 1; /* Tee efekti näkyväksi hoverilla */

    }

    

    nav a:hover,

    nav a:focus {

        background-color: #37a850; /* Hiiren ollessa linkin päällä taustaväri muuttuu */

        color: #ffffff; /* Tekstin väri muuttuu hiiren ollessa päällä */

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9); /* Voimakkaampi varjostus hoverilla */

        transform: translateY(-2px); /* Nostaa linkkiä hieman ylöspäin */

        

    }

    

    



    .logo {

        display: block;

        width: 40vw; /* Säädä leveyttä viewportin leveyden mukaan */

        max-width: 100%; /* Estää liian suureksi venymisen */

        min-width: 80px; /* Estää liian pieneksi kutistumisen */

        height: auto; /* Säilyttää kuvan alkuperäiset mittasuhteet */

        margin-top: 10vh; /* Siirtää logoa ylemmäksi */

        

        opacity: 0.95;

        

    }



    .login-small {

        display: block;

        font-size: 0.6vw; /* Skaalautuva fonttikoko */

        color: #666;

        position: absolute; /* Asettaa elementin suhteessa sen lähimpään position: relative; määritellyn esivanhempiin */

        top: 10px; /* Asettaa elementin 10 pikseliä yläreunasta */

        left: 10px; /* Asettaa elementin 10 pikseliä vasemmasta reunasta */

    }



    main {

        flex-grow: 1;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    img {

        max-width: 99%;

        height: auto;

        display: flex;

        justify-content: left;

        align-items: left;

    }

/* Media queries mobiililaitteille */
@media (max-width: 768px) {
    p {
        font-size: 4vw; /* Suurempi fonttikoko pienemmille näytöille */
        margin-bottom: 10vh;
    }

    nav {
        flex-direction: column; /* Vaihdetaan navigaation suunta pystysuuntaiseksi */
        gap: 2vh; /* Suurempi väli navigaatiolinkkien välillä */
    }

    nav a {
        font-size: 5vw; /* Suurempi fonttikoko pienemmille näytöille */
        padding: 2vh 4vw; /* Suurempi padding navigaatiolinkkeihin */
    }

    .logo {
        width: 60vw; /* Levennetään logoa mobiilinäytöillä */
        margin-top: 5vh; /* Pienennetään marginaalia mobiilinäytöillä */
    }

    .login-small {
        font-size: 2.5vw; /* Suurempi fonttikoko pienemmille näytöille */
    }
}

@media (max-width: 480px) {
    header {
        height: 100vh; /* Vähennetään headerin korkeutta pienemmillä näytöillä */
    }

    .logo {
        width: 80vw; /* Suurempi logo pienemmillä näytöillä */
    }

    p {
        font-size: 4vw; /* Vielä suurempi fonttikoko pienemmillä näytöillä */
    }

    nav a {
        font-size: 6vw; /* Vielä suurempi fonttikoko pienemmillä näytöillä */
    }

    .login-small {
        font-size: 3vw; /* Suurempi fonttikoko pienemmillä näytöillä */
    }
}