/* CSS Gridin tyylit*/

*{
    margin:0px;
    padding:0px;
   
}

/*Tässä body ja main osuudet*/

body{
    background-color:lightpink;
}

main{
    text-align:justify;
}

/*Otsikot h1-h6*/

h1{
    font-family:Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    font-size:4em;
    color:mediumvioletred;
    padding-top:100px;
}
h2{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:3em;
    text-align:center;
    
  
}

h3{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:2em;
    text-align:center;
    padding:10px;
    margin-top:30px;
    padding-bottom:40px;
    margin-right:60px;
    margin-left:20px;
}
h4{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:1em;
    text-align:justify;
    margin-right:20px;
    margin-top:40px;
    margin-left:20px;
 
}
h5{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:2em;
    text-align:center;
    margin:30px;
}
h6{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:2em;
    text-align:left;
    margin-top:-30px;
    padding:20px;
}

/*Header ja nav */

header{
    background-color:rosybrown;
   margin:auto;
   height:350px;
  }

  nav{
  background-color:lightpink;
  background-attachment: fixed;
  background-size:cover;
  height:50px;
  text-align: center;
  padding-top: 50px;
  font-size:2em;
  color:black;
  padding:20px;
  }
  nav li{
    display:inline;
    padding:20px}

    nav a:link{
        color:black;
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        text-decoration:none;
        text-transform: uppercase;
        font-style: normal;
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    nav a:visited{
        color:black;
    }
    
    nav a:hover{
        background-color:mediumorchid;
    }
    nav a:active{
        background-color:pink;
    }
  
/* Tässä alkaa artikkelit eli kaksi isointa ja pienet sivussa*/

    .grid-artikkelit{
        display:grid;
        grid-template-columns: 2fr 1fr;
        gap:20px;
        text-align:justify;
    }
    .grid-artikkelit img{
        max-width: 100%;
        clear:right;
        float:left;

        
    }
    article{
      clear:left;
      float:right;
    }
    .article-content{
        padding:10px;
        margin-bottom:40px;

     
}
.article-content1{
    padding:100px;
    margin-left:50px;

 
}

.eka{
    text-align:justify;
    padding-top:-100px;
   
   
   }

   .eka h3{
       margin-top:-40px;
   }
.eka img{clear:right;
    float:left;
    margin-left:20px;
        padding:20px;
        padding-top:50px;
        padding-bottom:50px;
        margin:50px;
        margin-top:-43px;
    
   }

    .sivuartikkelit{
        background-color:white;
        text-align:justify;
        padding-bottom:30px;
        padding-left:20px;
     
    }
    .sivuartikkelit img{
        float:left;
        clear:right;
        margin-left:20px;
        padding:20px;
        padding-top:20px;
        padding-bottom:20px;
    }
    .kokosivu{
        background-color: white;
        border: 2px solid black;
        margin-top:-122px;
    }


    /*Footer alkaa tästä*/

   footer{
       margin-top:-60px;
    background-color:rosybrown;
    background-attachment: fixed;
    background-size:cover;
    height:70px;
    text-align: center;
    padding-top: 30px;
    font-size:2em;
    color:black;
    padding:30px;
}

footer ul li{
    display:inline;}

    footer a:link{
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        text-decoration:none;
        text-transform: uppercase;
        font-style: normal;
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    footer a:visited{
        color:black;
    }
    
    footer a:hover{
        background-color:violet;
    }
    footer a:active{
        background-color:salmon;
    }

footer img{
    width:100px;
    height:80px;
    float:left;

}

/* MOBIILI VERSIOT */

     
  /* Mobiiliversiot alle 481px suuremmat ruudut */
@media screen and (max-width: 481px){
    nav li{
        size:3em;
    }


    
 
    
    
    /* Tablettiversiot yli 481px suuremmat ruudut */
    @media screen and (min-width: 481px){
 

 
    
    /* Laptop-versiot yli 769px suuremmat ruudut */
    @media screen and (min-width: 769px){

    /* Desktop-versiot yli 1025px suuremmat ruudut */
    @media screen and (min-width: 1025px){
  
    
@media screen and (max-width: 990px){