@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Poppins:wght@500;600;700&display=swap'); /*google fonttien import*/

* {
    margin: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

h1, h2 {
    font-family: 'Lato', sans-serif;
}

body {
    max-width: 100%;
    margin: 0 auto;
    z-index: -2;
    background-color: #ececec;
}

.locked {
  pointer-events: none;
  opacity: 0.4;
}


.locked2 {
  pointer-events: none;
  display: none;
}

#locked1 {
  pointer-events: none;
  opacity: 0.4;
}



#liikkuvaheader {
    padding: 1em;
    /* How to create a gradient background -apuna käyttäen (https://cssgradient.io/blog/how-to-create-a-gradient-background/)  */
    background-image: linear-gradient(to right bottom,#006699 40%, #1686be, #239CD9);
    /* background-color: #2d6c85; */
    color: #f0ebeb;
    font-family: 'Poppins', sans-serif;
    position:sticky;
    top: 0;
    display: block;
    transition: top 0.5s;
    transition-delay: 0.5s;
    z-index: 1000;
    box-shadow: 0 0 15px 0 black;
}
#ikoni { /* Headerin taustalla näkyvä "kuvake" */
    position: absolute;
    padding-left: 0em;
    font-size: 6em;
    opacity: 0.1;
    align-items: center;
}

.nav-toggle { 
    display: none; /* piilotetaan inputin checkbox, jotta voidaan käyttää vain ikonia nappina */
}

.nav-toggle-label {
    display: none;
    float: right;
    font-size: 2em;
    padding: 0.7em 0.5em 0.5em 0.5em;
}

#puhnav{
    display: none;
}

.nav-toggle:checked ~ #puhnav {
    display: block;
}
.navnappi2 a::before, .navnappi2akt a::before {
    content: '';
    display: block;
    height: 3px;
    background: #fff;
    transition: transform 250ms ease-in-out ;
}

.navnappi2 a::before{
    transform: scale(0,1);
}

.navnappi2akt a::before{
    transform: scale(1,1);
    }

#linkit2 a:hover::before {
    transform: scale(1,1);
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 1em 0em 0.5em 1.2em;
    text-decoration: none;
}
.passu {
    margin-top: 0em;
    margin-left: 2em;
}


#nimi {
    font-size: 230%;
    letter-spacing: 0.2em;
    font-weight: 700;
    padding: 0.5em 0em 0.5em 1em;
    transition: 0.4s;
    float: left;
}

.navnappi, .navnappiakt {
    display: block;
    font-size: 1.25em;
    float: right;
    padding: 0.5em 0em;
}

.navnappi2, .navnappi2akt {
    display: flex;
    justify-content: center;
}
/* Create a responsive navigation nav with no JS! -modifioituna (https://www.youtube.com/watch?v=8QKOaTYvYUA)
*/
.navnappiakt a::before, .navnappi a::before {
    content: '';
    display: block;
    height: 2px;
    background: #fff;
    transition: transform 250ms ease-in-out ;
}
.navnappi a::before {
    transform: scale(0,1);
}

.navnappiakt a::before {
    transform: scale(1,1);
}

#linkit a:hover::before {
    transform: scale(1,1);
}

 .navhampurilainen {
    display: none;
    float: right;
    font-size: 2em;
    padding: 0.7em 0.5em 0.5em 0.5em;
} 

#linkit, #pcnav {
    margin: auto;
    max-width: 1200px;
}

#linkit {
    margin: auto;
}

.navigointirivi, .navigointiteksti {
    font-family: 'Lato', sans-serif;
    font-size: 1.15em;
}
.navigointiteksti {
    display: inline-block;
    color: #D93848;
}

#yla {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    max-height: 500px;
    overflow: hidden;
    display: flex;
}
#tausta { /* Etusivun taustavideo */
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.9;
    z-index: 1;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    object-fit: cover;
}

.kerros { /* Etusivun taustavidon värikerros */
    position: absolute;
    top:  0;
    left: 0;
    background: #282b2c;
    opacity: 0.7;
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
    z-index: 10;
} 

#ylatekstit { /* Videon päälle tulevat tekstit */
    position: absolute;
    top: 20%;
    width: 100%;
    text-align: center;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#ratkaisu { /* Videon päälle tulevat tekstit */
    padding: 0 0.25em;
    z-index: 20;
    font-size: 4.5em;
    color: rgb(255, 255, 255);
    text-shadow: 
        /* https://stackoverflow.com/questions/2570972/css-font-border - foorumikeskustelusta bongattu kommentti nimim."rAthus".
        ensimmäinen kerros at 1px */
        /* -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000, 
         1px  1px 0px #000,*/
        /* toinen kerros at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

#just { /* Videon päälle tulevat tekstit */
    padding: 0 1em;
    z-index: 20;
    font-size: 3.5em;
    color: rgb(255, 255, 255);
    text-shadow:  /* first layer at 1px */
        /* -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000, */
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

#otayht { /* Taustavideon päälle tuleva nappi */
    font-family: 'Poppins', sans-serif;
    font-size: 1.4em;
    margin: 3.5em 0 0;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
    color: white;
    padding: 0.7em 1em;
    /* border: 1px solid #333; */
    border-radius: 4px;
    background: #D93848;
}
input {
    width: 8em;
}



#otayht:hover{
    background-color: #239CD9;
    color: #fff;
    transition: 0.5s;
}

.keski { /* Sivujen keskiosio */
    background-color: white;
    position: relative;
    margin: auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 3em;
    font-family: 'Lato', sans-serif;
    font-size: 0.8em;
    font-weight: 700;
}

.kukaolen { /* Etusivun keskiosion tekstit */
    padding: 1em 0em;
    color: black;
    font-size: 3em;   
}

.kukaolen_sininen { /* Etusivun keskiosion siniset tekstit */
    color: #239CD9;
}

.ala { /* Alaosio, sisältää "vahvuus -kortit" */
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    display: flex;
}

/* "Card IMAGE, Luan Manara, kokoelmasta: https://freefrontend.com/css-cards/ modifioituna (https://codepen.io/luanmanara/pen/poyLbWx) */
.container{ /* osio, joka sisältää kortit */
    max-width: 1200px;
    position: relative;
    display: flex;
    justify-content:space-around;
    flex-wrap:  wrap;
    margin: 0 auto;
    background-color: white;
}

.card { /* yksittäinen kortti */
    padding: 0em 0.5em;
    font-family: 'Poppins', sans-serif;
}

.container .card{
    position: relative;
    cursor: pointer;
    padding-bottom: 2em;
}

.container .card .face{ /* Kortin molemmat osat */
    max-width: 380px;
    height: 230px; /*200*/
    transition: 0.5s;
}

.container .card .face.face1{ /* Kortin yläosa */
    position: relative;
    background: #004466;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
    transform: translateY(10px);
}

.container .card:hover .face.face1{
    background: #D93848;
    transform: translateY(0);
}

 .lue{ /* Lue lisää -nappi */ 
    opacity: 0.3;
    font-weight: 500;
}

.container .card .face.face1 .content{ /* Kortin yläosan sisältö */
    opacity: 0.5;
    transition: 0.5s;
}

.container .card:hover .face.face1 .content{
    opacity: 1;
}
.container .card:hover .face.face1 h3{
    text-shadow: 2px 2px black;
}
/* .container .card:hover .face.face1 i{ 
    text-shadow: 2px 2px black;
} */

.container .card .face.face1 .content i{ /* Kortin yläosan ikoni*/
    font-size: 5em;
    max-width: 380px;
    color: white;
    text-shadow: 2px 2px black;
}

.container .card .face.face1 .content h3{ /* Kortin yläosan otsikko*/
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.container .card .face.face2{ /* Kortin alaosa */
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    box-sizing: border-box;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.8);
    transform: translateY(10px);
}

.container .card:hover .face.face2{
    transform: translateY(0); 
}

.container .card .face.face2 .content p{
    margin: 0;
    padding: 0;
}

.container .card .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: black;
    padding: 5px;
    border: 1px solid #333;
    border-radius: 4px;   
}
.container .card:hover .content .lue{
    opacity: 1;
    transition: 0.4s;
    border: 0;
}

.container .card .face.face2 .content a:hover{
    background: #D93848;
    color: #fff;
    border: 1px solid white;
}

footer { 
    background-color: #006699;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding: 3em 3em 3em 1em;
    color: aliceblue; 
    font-family: 'Poppins', sans-serif; 
    justify-content: space-around;
    
}

.yhteystiedot {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content:space-between;
}

#loppuotiskko { /* "Yhteystiedot" */
    padding: 0;
}

#yht { /* Yhteystietojen lista (ul) */
    padding: 1em;
    clear: both;
    min-width: 220px; 
}

address {
    font-style: normal;
}

#osoite {
    padding-top: 1em;
}

footer img {
    border-radius: 50%;
    height: 300px;
    width: 300px;
}

#yhteenveto { /* Footerissa olevan yhteenvedon artikkeli */ 
    padding: 1em;
    max-width: 450px;
  
}
#yhteenvetoteksti { /* Footerissa olevan yhteenvedon tekstit */ 
    padding-top: 1em;
  
}

.email, .soita { /* Lähetä sähköposti ja soita puhelimeen -napit */
    margin: 0.5em 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 500;
    color: white;
    padding: 5px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #D93848;
    
}

.email:hover, .soita:hover {
    background: #239CD9;
    color: #fff;
    transition: 0.5s;
}

.tyo, .har, .min { /* Alasivujen otsikkojen muotoilua */
    padding-top: 1em;
}
.vah { /* Alasivujen otsikkojen muotoilua */
    padding-top: 0em;
}
.vah h2, .tyo h2, .min h2 { /* Alasivujen otsikkojen muotoilua */
    padding-top: 0em;
}

#vahvuudetlistaus .vah::before { /* Luodaan selkeyttä väleihin viivoilla */
    content: '';
    display: block;
    height: 1px;
    background:#282b2c;
}

.vahteksti, .tyoteksti, .harteksi {
    padding-top: 0.5em;
}

#tyokokemuskeski, #vahvuudetkeski, #minakeski {
    padding: 2em;
}
#vahvuudetlistaus, #vahekalist {
    padding-top: 0em;
}

.banneri {
        position: relative;
        margin: 0 auto;
        max-width: 100%;
        max-height: 200px;
        overflow: hidden;
        display: flex;
    }

.bannerikuva {
    width: 1200px;
    height: 200px;
    object-fit: cover;
    padding: 0;
    margin: 0 auto;
}

#vahvuus, #tyokokemus, #mina {
    font-size: 1.4em;
    font-weight: 500;
}
#vahvuus { /* Vahvuudet -alasivun vahvuus -osion muotoilua */
    padding-top: 1em;
}

#vahvuusscroll { /* Vahvuudet -alasivun pikalinkki listaus (ul) */
    display: flex;
    justify-content: center;
    gap: 0.5em;
    justify-content: space-evenly;
    margin: 0;
    padding-top: 1em;
    flex-wrap: wrap;
    padding-bottom: 1em;
    padding: 1em;
}
.vahvuusscroll_linkki { /* Vahvuudet -alasivun pikalinkki -nappien linkit (li) */
    flex-shrink: 1;
    flex-grow: 1;
    max-width: 300px;
    min-width: 180px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.8);
    transform: translateY(2px);
}
.vahvuusscroll_linkki:hover {
    transform: translateY(0px);
    transition: 0.4s;
}
.vahvuusscroll_linkki > *{
    flex-basis: 100%;
    color: #000;
    margin: 0;
    padding: 0.3em 1em 0.3em 1em;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9em;
    color: white;
    border-radius: 3px;
    background: #D93848;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.vahvuusscroll_linkki > *:hover {
    background-color: #1686be;
    transition: 0.4s;
}

/*Ankkurilinkkien säätö, liikkuvan headerin takia offsettiä*/
h3, h2 {
    position: relative;
}
h3 a, h2 a {
    position: absolute;
    top: -125px;
}

.vah p {
    padding-top: 0.8em;
}
.vah q { /* Muotoillaan asiakaspalaute näkyvämmäksi osaksi */
    font-style: italic;
    background-color: #38d95e4d;
    display: block;
    padding: 0.5em;
}

.avainsana { /* Vahvuudet -alasivun sanan "Avainsanat:" muotoilu */
    font-weight: 900;
    padding-bottom: 0em;
}

.avainsanat { /* Vahvuudet -alasivun avainsanojen muotoilut */
    padding: 0.5em;
    font-weight: bold;
    display: inline-block;
    background-color: #239cd952;
    text-shadow: 1px 1px white;
    margin-bottom: 1em;
}
.vah h3 {
    font-size: 1.5em;
    padding-top: 1em;
}
.vah a {
    display: inline;
    font-weight: bold;
    color: black;
    padding: 0;
    margin: 0;
    text-decoration: underline;
}

.harrastelista li {
    padding-top: 0.3em;

}

.katso2, .harraste { /* Harrastuslistauksen linkit */
    display: inline;
    margin: 0;
    padding: 0;
    color: black;
    text-decoration: underline;
}

#mina p { /* Minä -artikkeliosuuden muotoilu */
    padding-top: 0.5em;
}



/* Alla asetukset sivuston skaalautuvuuteen, kun selainikkuna pienenee */
@media (max-width: 928px) {
    #nimi {
        font-size: 180%;
        padding-top: 0.6em;
        transition: 0.4s;
    }
    .passu {
        margin-top: 1.75em;
        margin-left: 1.25em;
    }
    input {
    width: 8em;
    }   

    #ikoni {
        font-size: 5em;
    }

    .navnappi, .navnappiakt {
        font-size: 1em;
    }

    #ratkaisu {
        font-size: 3em;
        transition: 0.4s;
    }

    #just  {
        font-size: 2em;
        transition: 0.4s;
    }

    #ylatekstit {
        top: 21%;
    }

    /* #etusivukeski{
        font-size: 0.65em;
    } */

    .kukaolen {
        font-size: 2.25em;
    }

    .yhteystiedot { /* Footerin yhteystietojen ja muiden osuuksien säätö allekkain */ 
        flex-wrap: wrap;
        flex-direction: column;
    }

    footer img {
        margin-left: 3em;
    }

    #otayht {
        margin-top: 5em;
        padding: 0.4em 0.6em 0.4em 0.6em;
    }
}  


@media (max-width: 745px) {
    #nimi {
        padding: 0.36em 0em 0.2em 0.4em;
        font-size: 140%;
    }
    .passu {
        margin-top: 1em;
        margin-left: 0.75em;
    }
    input {
        width: 7em;
    }   

    #ikoni {
        font-size: 3.6em;
    }

    .navnappi, .navnappiakt { /* Pc-näkymän headerin linkkien piilotus */ 
        display: none;
    }

    .navnappi2, .navnappi2akt {
        font-size: 1.25em;
    }

    .nav-toggle-label {
        display:block;
        padding: 0.1em 0.3em 0 1em;
    }

    .columns {
        flex-direction: column;
    }
 
    #ylatekstit {
        top: 15%;
    }

    #ratkaisu {
        font-size: 2.2em;
    }

    #just {
        font-size: 1.5em;
    }

    #otayht {
        font-size: 1.3em;
        margin-top: 4.5em;
        padding: 0.4em 0.6em 0.4em 0.6em;
    }

    /* #etusivukeski {
        font-size: 0.5em;
    } */

    .kukaolen {
        font-size: 1.75em;
    }

    .cards {
        flex-direction: column;
        height: 600px;
    }

    h3 a, h2 a {
        top: -100px; /*kun ruutu on kapeampi, on liikkuvaheader ohuempi ja ankkurilinkkejä pitää säätää */
    }

    .banneri{
        max-height: 150px;

    }

    .bannerikuva {
        height: 150px;
    }
}

@media (max-width: 550px) { /* Taustavideon päällä olevan napin viimeinen hienosäätö */
    #otayht {
        font-size: 1em;
        margin-top: 1.5em;
        padding: 0.3em 0.5em 0.3em 0.5em;
    }
    .passu {
        margin-top: 0.5em;
        margin-left: 0.255em;
    }

    input {
        width: 6em;
    }   
}