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

 }

 @font-face {
  font-family: Ailerons;
  src: url(fonts/Ailerons.otf);
}

.icons i:hover {
  text-shadow: darkgrey 0px 2px 5px;
  -webkit-transform: scale(1.2);
  
  
    }

    @-webkit-keyframes breathing {
      0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      25% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    
      60% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    }
    
    @keyframes breathing {
      0% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      25% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }
    
      60% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      100% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
      }
    }
      

footer {
  margin-top: 20px;
}

footer a {
  margin-bottom: 10px;
}
.projects {
  margin-left: 15px;
  margin-right: 15px;
}

.project a {
    text-decoration: none;
    color: white

}


 

  .project {
      width: 100%;
      margin-bottom: 5px;
  }

  @keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}
 
 



.projects img {
  width: 100%;
  -webkit-animation: fade-in 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fade-in 2s; /* Firefox < 16 */
   -ms-animation: fade-in 2s; /* Internet Explorer */
    -o-animation: fade-in 2s; /* Opera < 12.1 */
       animation: fade-in 2s;-web
}


#japan.project a{
    color: #fafafa

}

#japan.project {
    background-color: #6e6e6e;
    box-shadow: rgb(165, 164, 164) 0px 4px 10px;
}

#japan.project h2{
color: #fafafa;
}
#jap {
    color: white
}




.intro {

      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #303030;
      font-family: 'Montserrat', sans-serif;; 
      margin-top: 100px;
  }

  .text {
    width: 90%;
  }

  .icons {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-around;
    margin: 15px;

  }

  #icons {
    margin: 60px;
    font-size: 30px;
  }

  #icon-medium{

    font-size: 25px;

  } 

 

  


  h2 {
      font-size: 15px;
      font-weight: normal;
      line-height: 40px;
  }

  body {	
    background-color: #fafafa;}

.main {
  display: flex;
  flex-direction: column;
} 

.topnavdesktop {
    
  position: fixed;
  width: 100%;
  
}

.topnavdesktop ul {
  padding-right: 5px;
}

.topnavdesktop li {
  margin-left: 35px;
}

.scroll {

    display: none;
    -webkit-animation: breathing 5s ease-out infinite normal;
    animation: breathing 5s ease-out infinite normal;
  
}



@media screen and (min-width: 500px) {

  .text {
    width: auto;
  }

  .scroll {
    margin-top: 20px;
    margin-bottom: 50px;

      display: unset;
      -webkit-animation: breathing 5s ease-out infinite normal;
      animation: breathing 5s ease-out infinite normal;
    
  }
  .linksdesktop {
  display: flex;
  justify-content: space-between;
  }

  h2 {
    font-size: 15px;
    font-weight: normal;
    line-height: 80px;
  }
  

  



#icons {
  margin: 40px;
  font-size: 50px;
}

#icon-medium{

  font-size: 45px;


}

@media screen and (min-width: 700px) {

  h2 {
    font-size: 20px;

  }

  .scroll {
    margin-top: 50px;

      display: unset;
      -webkit-animation: breathing 5s ease-out infinite normal;
      animation: breathing 5s ease-out infinite normal;
    
  }


  @media screen and (min-width: 1000px) {

    h2 {
      font-size: 30px;
  
    }

    .intro {
      min-height: 90vh;
    }
    .scroll {
      margin-top: 50px;
  
        display: unset;
        -webkit-animation: breathing 5s ease-out infinite normal;
        animation: breathing 5s ease-out infinite normal;
      
    }