body{
    margin:0;
    font-family: 'Syne', sans-serif;
  font-size: 18px;
}
header{
  width: 100vw;
  
    
     background-color: #ffe146; 
      margin: -1.2em auto 0 auto;
      padding: 1em 2em 3em 2em;
    font-family: 'Kiwi Maru';
}
header h1{
  margin: auto
}
header p{
  color: black;
  margin-top: -0.5em;
  margin-right: 2em;
  width: 80%;
}
main{
  margin-top: -3em;
  width: 100vw;
  
}


.skills{

    background-color: #ffeeae; 
    margin: 0 3em 0 0; 
    padding: 1em 3em;   
    width: 100%;
}
.skills ul{
    max-width: 80%;
    margin-right: 1em;
    margin-left: 0;
    padding-left: 0;
}
.examples{
    margin-top: 0; 
    padding: 1em 3em;
     width: 100vw; 
    background:linear-gradient(180deg, rgba(255, 227, 118, 0.6) 30.48%, rgba(255, 130, 98, 0.6) 114.39%);
  
}
.ss{
    display: flex;
    flex-direction: column;
   
    @media all and (min-width: 700px){
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.5em;
        max-width: 90vw;
        padding-bottom: 5em;
    }
    @media all and (min-width: 1200px){
         grid-template-columns: repeat(4, 1fr);
         column-gap: 2em;
      
    }
    
}

.ss img{
    max-width: 80vw;
    overflow: hidden;
    
   @media all and (min-width: 700px){

    height: 20vh;
    overflow: hidden;
   }  
}
.sample{
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
}
a, a:visited, a:hover{
  color: black;
}
footer{
  height: 2em;
  padding: 0.5em 1em 1em 2em;
}