.menu {
    display: flex;
    justify-content: center;
    /*tämä vie valikon ylhäällä keskelle */
    gap: 40px;
    /* väli valikon osien väliin */
    padding: 30px 0;
    /* vähän tilaa ylös */
    background-color: rgb(255, 192, 192);
    /* valikon tausta */
}

.menu a {
    text-decoration: none;
    /* tämä poistaa alleviivauksen */
    color: rgb(0, 0, 0);
    font-size: 20px;
    font-weight: bold;
    /*tämä lihavoittaa valikon tekstit*/
}

.menu a:hover {
    color: black;
    /* että voi painaa ja tulee se sormi siihen*/
}

h1 {
    font-size: 100px;
    color: rgb(255, 255, 255);
    /*siirtyy keskemmälle*/
    margin-left: 170px;
    font-family: "Bebas Neue", sans-serif;

}

body {
    background-color: rgb(255, 192, 192);
    /*taustaväri*/
    background:
        linear-gradient(rgba(255, 192, 192, 0.7), rgba(255, 192, 192, 0.7)),
        url("hiusten\ leikkuu.png") right center/30% 100% no-repeat, url("peili\ kuva2.png")left center/20% 80% no-repeat;
    background-size: 70% 90%, 30% 90%;
    /*Kuvat sen takia kun "pallot" tekisi sivusta sekavamman näkösen ja kuvat taustalla ovat siistimpiä*/
    /* skaalautuu täyttämään ruudun säilyttäen mittasuhteet*/
}

.kuvat {
    display: flex;
    justify-content: center;
    /*keskelle*/
    gap: 15px;
    margin-top: 70px;
    padding-left: 300px;
    /*siirtää kuvia*/
}

.kuvat img {
    width: 200px;
    height: auto;
}

.varaa {
    background-color: black;
    color: white;
    padding: 15px 32px;
    font-size: 24px;
    text-decoration: none;
    display: inline-block;
    margin-left: 100px;
    font-family: "Libre Baskerville", serif;
}

.tietoa {
    max-width: 600px;
    margin: 40px 0 40px 100px;
    padding: 40px;
    border-radius: 10px;
    border: 2px solid #d2a679;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
}

.tietoa h2 {
    color: #ffffff;
    margin-bottom: 30px;
    /*tekstin ja otsikon väli*/
    font-size: 20px;
}

.tietoa p {
    font-size: 17px;
    line-height: 1.6;
    /*riviväli tekstiin*/
}

/* Tausta koko sivulle */
body {
    background-color: rgb(255, 192, 192);
    font-family: "Libre Baskerville", serif;
}

/* Asiakkaiden kommenttiosio */
.asiakkaat {
    padding: 50px 20px;
}

/* Otsikko */
.asiakkaat h2 {
    margin-bottom: 30px;
    /*kuvan siirtäminen alhaalta*/
    font-family: Arial, sans-serif;
    color: #ffffff;
    /* otsikon väri*/
    text-align: left;
}

/* Yksittäiset kommentit allekkain */
.asiakkaat .kommentti {
    margin: 15px 0;
    padding: 20px;
    font-family: 'cursive', 'Dancing Script', sans-serif;
    /* kaunokirjoitus */
    font-size: 17px;
    line-height: 1.5;
    background-color: hsla(338, 85%, 89%, 0.584);
    /* hieman vanhanaikainen paperin sävy */
    border: 2px solid #d2a679;
    /* vintage-reuna */
    border-radius: 10px;
    /* pyöristetyt reunat */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
    /* hieno varjo */
    max-width: 700px;
}

/* Vaihtoehtoisesti jokaiselle kommentille oma sävy */
.kommentti1 {
    border-color: #d2691e;
}

.kommentti2 {
    border-color: #a0522d;
}

.kommentti3 {
    border-color: #cd853f;
}

.footer {

    width: 100%;
    background-color: rgb(255, 192, 192);
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 30px;
}

@media (max-width: 768px) {

    body {
        background-size: cover;
        /*taustakuva täyttää koko alueen*/
        background-position: center;
        /*kuva pysyy keskellä*/
    }

    h1 {
        font-size: 35px;
        margin-left: 0;
        text-align: center;
    }

    .menu {
        flex-direction: column;
        /*valikon osat menee päällekkäin*/
        gap: 15px;
    }


    .varaa {
        display: block;
        /* vie koko rivin leveydelle */
        width: 70px;
        /* voi säätää leveyttä */
        text-align: center;
        /* keskittää tekstin */
        margin: 20px auto;
        /* keskittää napin vaakasuunnassa */
        padding: 15px 0;
        /* napin korkeus */
        font-size: 20px;
        /* hieman pienempi teksti */
        background-color: black;
        /* haluttu nappi-tausta */
        color: white !important;
        /* valkoinen teksti */
        text-decoration: none;
    }

    a,
    a:visited {
        text-decoration: none;
        color: inherit;
    }

    /*poistaa alleviivauksen ajanvarausnapista*/

    .kuvat {
        flex-direction: column;
        /*kuvat menee päällekkäin*/
        padding-left: 0;
        align-items: center;
    }

    .kuvat img {
        width: 40%;
    }

    .footer {
        position: static;
        /* footer tulee sivun loppuun eikä peitä sisältöä */
    }
}