/* SUUREN NÄYTÖN TYYLIMÄÄRITTELYT */
/* desktop 1920 x 989  */

    body {
        background-color: #F5F5F5;
        color: #171717;
        font-size: 16px;
        font-family: Arial, sans-serif;
        margin: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        /* padding kannattaa laittaa 0 —> selaimissa saattaa olla märitelmiä joita emme tiedä */
        padding: 0; 
    }


    /* sivun yläosa */
    header {
        padding: 10px 20px;
    }

    /* sivun sisällön? asettelu */
    .sisalto {
        margin-left: 10%;
        /* sivun reunaan tilaa 10% */
        margin-right: 10%;
        /* sivun reunaan tilaa 10% */
    }

    /* valikon yleiset määrittelyt */
    nav {
        color: #171717;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-bottom: 1px solid black;
        gap: 30px;
        padding-bottom: 5px;
    }

    /* valikon logon määrittelyt */
    #logo {
        height: 30px;
        /* logo max 30px */
        width: auto;
        padding: 0;
        background: transparent;
        border-style: none;
        margin-right: auto;
        /* logo vasemmalle --> muut valikosta oikeelle  */
    }

    /* valikon logo-kuvan määrittelyt- */
    #logo img {
        height: 40px;
        width: auto;
        border-style: none;
        margin-right: auto;
    }

    /* valikon linkkien eli laatikoiden (paitsi logo/first child) määrittelyt  */
    nav a {
        color: black;
        background-color: rgba(245, 245, 245, 0.83);
        text-decoration: none;
        font-size: 18px;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        padding: 10px 20px;
        /* tila tekstin ja laatikon välissä - laura */
    }

    /* valikon linkkien hover (paitsi logo/first child) määrittelyt */
    nav a:hover {
        color: #39475c;
        font-weight: bold;
        background-color: #F5F5F5;
        border-width: 1px;
        border-color: #39475c;
    }

    /* miltä tällä hetkellä valittu/ auki olevan sivun "laatikko" näyttää valikossa  */
    #valittu {
        font-weight: bold;
        border-width: 1px;
    }

    /* h1 id - slogan määrittelyt, huom, ei enää background color*/
    #slogan {
        color: #171717;
        font-size: 28px;
        margin-bottom: 30px;

    }

    /* toimintakehote määrittelyt */
    .toimintakehote {
        background-color: #51627b;
        color: white;
        padding: 15px 30px;
        text-decoration: none;
        border-radius: 25px;
        font-size: 20px;
    }

    /* toimintakehote hover-määrittelyt */
    .toimintakehote:hover {
        background-color: #39475c;
    }

    /* ALATUNNISTE (kaikki sivut) */
    /* footer-tyylit tänne*/

    /* footer yleiset määrittelyt */
    footer {
        background-color: #d4d2d2;
        display: flex;
        /* footer skaalautuu? */
        align-items: center;
        padding: 30px 10%;
        margin-top: auto;
    }

    /* footerin vasen ja keskimmäinen sarake (osoite ja yhteistiedot) määrittelyt */
    .footer {
        flex: 1;
        border-right: 1px solid black;
        min-height: 80px;
        padding: 0 40px;
        /* tilaa pysty-viivan ja tekstin väliin*/

    }

    /* footerin copyright määrittely */

    .copyright {
        flex: 1;
        text-align: center;
        /* asettaa copyrightin alemmas*/
    }

    /* Etusivun tyylit */
    /* Lisää etusivun tyylit tänne */
    #etusivu {
        background-image: url("images/harmaa_auto_rannalla.jpeg");
        background-size: cover;
        height: 300px;
        background-position: right center;
        /* taustakuva asettuu paremmin */
    }

    .indexesittely {
        max-width: 450px;
    }

    /* Tuotteet-sivun tyylit */
    /*Lisää Tuotteet-sivun tyylit tänne*/
    /* tuotekuvien määrittely */

    .kuva1 {
        float:left;
        max-width: 400px;
        width: 100%;
    }

    .kuva2 {
        float:left;
        max-width: 400px;
        width: 100%;
    }

    /* tuotekuvausten määrittely */

    .grid-teksti1 {
    margin-left: 40px;
    margin-top: 20px;
    margin-bottom: 30px;
}

    .grid-teksti2 {
    margin-left: 40px;
    margin-top: 20px;
    margin-bottom: 30px;
}

    /* Yhteystiedot-sivun tyylit */

    #yhteystiedot-sivu header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        box-sizing: border-box;
        background-color: transparent;
    }

    /*Sivun yläosan kuva */
    .yhteys-ylakuva {
        background-image: url("images/harmaa_auto_rannalla_2_yht-tiedot.jpg");
        background-size: cover;
        background-position: 60% center;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* yläosan kuva otsikko */
    .yhteys-otsikko {
        text-align: center;
        background-color: rgba(81, 98, 123, 0.65);
        padding: 12px 25px;
    
    }

    .yhteys-otsikko h1 {
        color: white;
        font-size: 32px;
        margin: 0;
    }

    /* yhteystiedot sisältö */

    .yhteystiedot {
        background-color: #F5F5F5;
        padding: 25px 10% 30px;
    }

    /* esittelyteksti */
    .yhteys-esittely {
        max-width: 700px;
        margin: 0 auto;
        padding-bottom: 10px;
        text-align: center;
    }


    .yhteys-esittely h2 {
        font-size: 28px;
        margin-bottom: 15px;

    }

    .yhteys-esittely p {
        font-size: 17px;
        line-height: 1.6;
    }

    /* yhteystiedot */
    .yhteys-tiedot {
        display: flex;
        justify-content: space-around;
        margin: 10px auto 0;
        max-width: 1000px;
        padding: 15px 0;
        border-top: 1px solid #D4D2D2;
    }



/*yksittäinen yhteystieto*/

.yhteys-tieto {
    text-align: center;
    padding: 10px 40px;
}

.yhteys-tieto h3 {
    color: #171717;
    font-size: 20px;
    margin-bottom: 10px;
}

.yhteys-tieto p {
    font-size: 16px;
    line-height: 1.5;
}

.yhteys-tieto a {
    color: #51627b;
    text-decoration: none;
}

.yhteys-tieto a:hover {
    text-decoration: underline;
}

/* Yhteydenottolomake */

.yhteydenotto {
    max-width: 700px;
    margin: 25px auto 50px;
    padding: 40px 50px;
    background-color: #E8EAEC;
    border-radius: 10px;
}

/* lomakkeen otsikko */

.yhteydenotto h2 {
    text-align: center;
    color: #171717;
    font-size: 23px;
    margin-top: 0;
    margin-bottom: 40px;
}

/* Lomake */

.lomake-esittely {
    text-align: center;
    font-size: 14px;
    color: #687386;
    margin-top: -25px;
    margin-bottom: 45px;
}

.yhteydenotto form {
    display: flex;
    flex-direction: column;
}

/* nimi ja sähköposti vierekkäin */
.lomake-rivi {
    display: flex;
    gap: 25px;
}

.lomake-kentta {
    flex: 1;
}

/* Lomakkeen tekstit */

.yhteydenotto label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom:8px;
    color: #171717;
}

/* kentät */
.yhteydenotto input,
.yhteydenotto select,
.yhteydenotto textarea {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 16px;
    border: 1px solid #999999;
    background-color: white;
    padding: 12px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* aihe */
.yhteydenotto select {
    height: 45px;
}

/* viestikenttä */
.yhteydenotto textarea {
    height: 150px;
    resize: vertical;
}

/* lähetä-painike */
.yhteydenotto button {
    background-color: #51627b;
    color: white;
    border: none;
    padding: 13px 25px;
    border-radius: 25px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    cursor: pointer;
    align-self: center;
}

/*painikkeen hover */
.yhteydenotto button:hover {
    background-color: #39475c;
}


/* MOBIILIVERSIO TYYLIT TÄNNE*/
/* mobiili  384 X 692 */

/*mobiilikoko*/
@media screen and (max-width: 600px) {


    /*päävalikko*/
    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
}

    nav a {
        font-size: 13px;
        padding: 6px 10px;
        width: auto;
}

    #logo {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
}

    .sisalto {
        margin-left: 5%;
        margin-right: 5%;
    }
    #slogan {
        font-size: 18px;
        line-height: 1.2;
    }
    .toimintakehote {
        font-size: 18px;
    }

    /* YHTEYSTIEDOT */
    .yhteystiedot {
        padding: 20px 5%;
}

    .yhteys-esittely {
        width: 100%;
    }

    .yhteys-esittely h2 {
        font-size: 20px;
    }

    .yhteys-esittely p {
        font-size: 15px;
    }

    .yhteys-tiedot {
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        padding: 15px 0;
    }

    .yhteys-tieto {
        padding: 10px 0;
        width: 100%;
        box-sizing: border-box;
    }

    .yhteys-tieto p {
        font-size: 15px;
        overflow-wrap: break-word;
    }


    /*lomake*/
    .yhteydenotto {
        padding: 25px 20px;
    }

    .lomake-rivi {
        flex-direction: column;
        gap: 0;
    }

    .yhteys-ylakuva {
        height: 300px;
        background-position: 70% center;
        align-items: center;
    }

    .yhteys-otsikko {
        width: auto;
        box-sizing: border-box;
        padding: 12px 10px;
        background-color: rgba(23, 23, 23, 0.55);
    }

    .yhteys-otsikko h1 {
        font-size: 28px;
        margin: 0;
        color: white;

    }

    /*ETUSIVU*/
    
    #etusivu {
        background-image: url("images/harmaa_auto_rannalla.jpeg");
        background-size: cover;
        height: 350px;
        background-position: center;
        /* taustakuva asettuu paremmin */
    }

/* ALATUNNISTE */
footer {
    flex-direction: column;
    text-align: center;
}

.footer {
    border-right: none;
    border-bottom: 1px solid black;
    padding: 10px 40px;
    min-height: 80px;
}
}