h1 {
    color: white;
    font-size: 45px;
    font-family: "bebas Neue", sans-serif;
    text-align: center;
    position: relative;
    /*voi siirtää mutta säilyttää oman paikan sivun rakenteessa*/
    left: -200px;
    /*tämä siirtää otsikkoa vasempaan*/
    margin-top: 200px;
    /*siirtää ala*/
}

.menu {
    display: flex;
    justify-content: center;
    /*tämä tekee 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 taustaväri */
}

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

.menu a:hover {
    color: black;
    /* että voi painaa kun hiiri menee linkin päälle */
}

img {
    position: absolute;
    top: 20%;
    /*kuva siirtyy ylhäältä alas 20 prosenttia*/
    right: 0;
    /* se menee täysin oikeaan reunaan*/
    max-width: 500px;
    height: auto;
    /*säilyttää kuvan oikeat mittasuhteet*/
}

body {
    background-color: rgb(255, 192, 192);
    margin: 0;
    height: 100vh;
    /*sivun korkeus on koko näytön korkuinen*/
    align-items: center;
    /*keskittää*/
    width: 100%;
    /*koko näytön levyinen*/
    background-repeat: no-repeat;
    background-size: 100% auto;
    background: linear-gradient(rgba(255, 192, 192, 0.7), rgba(255, 192, 192, 0.7)),
        url("kampaamokuva.png") center/cover no-repeat;
    /*kuva pysyy taustalla ja muut menee sen eteen*/

}


td,
th {
    border: 1px solid #ffe1ef;
    text-align: center;
    /*keskitää*/
    padding: 8px;

}

table {
    margin: 200px 0 0 200px;
    width: 500px;
}

.footer {

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

@media (max-width: 768px) {

    h1 {
        position: static;
        /*että elementtien oletussijottelu pysyy alkuperäisenä*/
        left: 0;
        margin: 50px auto;
        text-align: center;
        font-size: 35px;
    }

    img {
        position: static;
        display: block;
        margin: 20px auto;
        width: 80%;
        /* menee näytön mukaan */
        max-width: 300px;
        /* pienempi ettei liian iso */
        height: auto;
    }

    table {
        position: static;
        width: 90%;
        /* tämä tekee että menee näytön mukaan */
        margin: 20px auto;
    }

    .table-container {
        overflow-x: auto;
        /*vaakasuora vieritys mobiiliversioon */
    }

    body {
        background-position: center top;
        background-size: cover;
    }

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