@charset "utf-8";

/*Megacity2 harjoituksen tyylitiedosto
Tekijä Laura Onali
Licence none public domain*/

*{
    margin:0px;
    padding:0px;
    }
    
*{
    box-sizing: border-box;
}

/*OTSITKO H1, H2, H3 JA P */

h1{
    color:white;
    text-shadow: 2px 2px 2px black;
    font-size:4em;
    font-family: Arial, Helvetica, sans-serif;
    text-align:right;
    padding-right: 100px;
    
   
}
h2{
display:inline-block;
font-size:medium;
background-color: black;
background-size: 20%;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
margin-top:10px;
margin-bottom:30px;
color:white;
text-align:left;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
max-width: 50%;
}


p{ 
font-family: Arial, Helvetica, sans-serif;
text-align:justify;
margin-top:10px;
margin-bottom:10px;


}

/* HEADER */
header {
    background-image: url(../img/headerkuva.jpg);
    background-repeat:no-repeat;
    height:350px;
    background-size:cover;
    display:grid;
    justify-items:right;
    align-content:center;
}
header p{
    display:grid;
    justify-items:right;
    align-content:center;
    padding-right:100px;
    font-size:larger;
    color:white;
    text-shadow:2px 2px 2px black ;
    margin:5px;
    
}


/*NAVIGOINTI PALKKI*/

nav{
    background-color: black;
    text-align:center;
    padding:40px;
    
}
nav li{
    display:inline;
    padding:10px;
    border:2px solid grey;
    border-radius:1px; 
    margin-right:-5px;} 
    

nav a:link{
    font-family: sans-serif;
    font-size:small;
    color:#7A7B73;
    text-decoration: none;
    font-style:normal;
    display:inline-block;
    padding-top:10px;
    padding-bottom:10px;
}

nav a:visited{
    color:#7A7B73
}
nav ul li:first-child {
    border-top-left-radius: 15px; border-bottom-left-radius: 15px;} 
nav ul li:last-child {
    border-top-right-radius: 15px; border-bottom-right-radius: 15px;}

nav ul li:first-child a:visited {
    border-top-left-radius: 15px; border-bottom-left-radius: 15px;} 
nav ul li:last-child a:visited {
    border-top-right-radius: 15px; border-bottom-right-radius: 15px;}


/*Section ja kaupungit*/

.asettelu{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 30px;
    text-align:justify;
}

section::after{
    display:block;
    content:"";
    clear:both;
}


/*MAIN SISÄLTÖ*/

main{
background-color:#F1C50E;
padding-bottom: 30px;
padding-top: 80px;
padding-right:20px;
padding-left:20px;
text-align:justify;


}

/*KUVAT*/

.london{
    float:left;
    clear:right;
    border: 10px solid rgba(122, 123, 115, 0.3);
    border-radius:50px 0px 0px 0px;
    margin-right:20px;
    margin-bottom:15px;
    margin-top:5px;
    max-width: 50%;
    height:auto;
 

}

.paris{
    max-width:50%;
    height:auto;
    float:right;
    clear:left;
    margin-left:20px;
    margin-bottom:10px;
    margin-top:5px;
    border: 10px solid rgba(122, 123, 115, 0.3);
    border-radius:0px 50px 0px 0px ;
}

.tokyo{
    float:left;
    clear:right;
    margin-right:20px;
    margin-bottom:20px;
    margin-top:5px;
    border: 10px solid rgba(122, 123, 115, 0.3);
    border-radius:50px 0px 0px 0px;
    max-width: 50%;
    height:auto;

}
.Shanghai{
    max-width:50%;
    height:auto;
    float:right;
    margin-left:20px;
    margin-bottom:20px;
    margin-top:5px;
    border: 10px solid rgba(122, 123, 115, 0.3);
    border-radius:0px 50px 0px 0px;

}


/*ASIDE JA FOOTER*/
aside{
    background-color:white;
    font-family: Arial, Helvetica, sans-serif;
    padding-top:50px;
    padding-bottom:50px;
  
}
  
aside li{
    display:inline;
    margin-left:320px;
    margin-right:-310px;
    margin-top: 80px;
    margin-bottom:80px;
   
}

aside h3{
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    margin-left:30px;
    margin-bottom:10px;
  
}



footer{
    background-color:#7A7B73;
    height:200px;
    display:grid;
    justify-items:center;
    align-content:center;

}

/*TÄSTÄ ALKAA MOBIILIVERSIOT!!*/


/* Mobiiliversiot alle 481px suuremmat ruudut */
@media screen and (max-width: 481px){
    .asettelu {grid-template-columns: 1fr;}
    header p{display: none;}
    aside li{
        margin-left:10px;
        margin-right:-5px;
        margin-top: 10px;
        margin-bottom:10px;
    }
   
    }
 
    
    
    /* Tablettiversiot yli 481px suuremmat ruudut */
    @media screen and (min-width: 481px){
    .asettelu {grid-template-columns: 1fr 1fr;}

 
    }
    
    /* Laptop-versiot yli 769px suuremmat ruudut */
    @media screen and (min-width: 769px){
    .asettelu {grid-template-columns: 1fr 1fr 1fr;}
    }
    /* Desktop-versiot yli 1025px suuremmat ruudut */
    @media screen and (min-width: 1025px){
    .asettelu {grid-template-columns: 1fr 1fr 1fr 1fr;}
    }
    aside{
        grid-column:span 3;
    }
    /*navigointi*/
    
@media screen and (max-width: 990px){
  aside{
      grid-column:span 4;
  }
}