* {
          box-sizing: border-box;

}

body { /*tämän asetukset eivät koske esim <h1> */
    background-color: #f4f4f4;  /*taustan väri vaalean harmaa*/
    color: #555555; /*tekstin väri hyvin tumman harmaa*/
       font: normal 16px Arial, Helvetica, sans-serif; 

    line-height: 1.6em; /*lisää tekstin korkeutta ja myös rivien välistä tilaa*/
    margin: 0; /*kannattaa tehdä aina default asetukseksi joka html dokkarissa*/ 
}

.container4 {
    width: 80%; /*Määrittelee laatikon leveyden, prosentteina sivu on "autoresponsive" eli jos ruutua pienentää, se näyttää oikealta silti*/
    margin:auto; /*Määrittelee marginaalin yhtäpaljon kummallekkin puolelle: vasen-oikea*/
    margin-top: 50px;
}

.flex-container { /*niille karttasivuille, ei saa poistaa*/
          display: flex;
          flex-wrap: wrap;
}

.flex-container div {  /*niille karttasivuille, ei saa poistaa*/
            flex: 25%;
            border: 1px solid black;
            padding: 1rem;
}


h3 { /*sitä "SIVU PÄIVITTYY AUTOMATTISESTI 5 MIN VÄLEIN" tekstiä varten*/
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(82, 82, 82);
}

a:link, a:visited { /*etusivun valikkonappuloille*/
    border: solid 1px #0094ff;
    background: lightskyblue;

    /*background-color: #3669f4;*/
    color: darkblue;
    padding: 14px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
    width: 50%;
    
    font-size: 1.5rem;
}
  
  a:hover, a:active { /*etusivun valikkonappuloille*/
    background-color: #3669f4;
    color: whitesmoke;
    font-weight: bold;
    font-size: 1.5rem;
}



ul {
    padding:0;
    list-style:none; /*poistaa näkyvistä ne listan pienet pallukat*/
    text-align: center;
    
}

li {
    padding: 8px 0 8px 0; /*hieman tilaa listayksiköiden väliin muttei reunoille*/
    
    margin-top: 10px;
}



/* Responsive layout - makes a one column-layout instead of a four-column layout */
        @media (max-width: 900px) {
          
        .flex-container { 
            margin-left: 10%; /*jättää vasempaan reunaan reunuksen jotta sormella skrollaus helpompaa*/
        }
          .flex-container div {
            flex: 100%;

          }
          
       a:link, a:visited { /*etusivun valikkonappuloille kännykän käytäjälle*/
    
        width: 70%; /*Tän täytyy olla näin leveä jotta teksti pysyy yhdellä rivillä kännykän näytöllä*/
        }
    

        

}