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

 

body{
	background:white;
  display: flex;
  flex-direction:column;
/*background-color: #F1F1F2;*/
}


.container{
display: flex;
justify-content:center;
align-items: center;
flex-direction:column;
width:100%;
background-color:white;
padding:1em;
animation: bounceInUp 1s ease;

  }

  
.container img{
height:auto;
}


h1{
    font:800 35px 'Lato';
}

h2{
  font:500 20px 'Lato';
}

p{
font:300 20px 'Lato';
text-align: center;
}


a{ 
text-decoration: none;
color:black;
 }



#icon{
margin:1em;
height:120px;
width:130px;
}


.top,footer{
  width:100%;
  background-image: url("img/dot.png");
  background-repeat: repeat;
  height:2em;

}


.back{
  width:100%;
    height:3em;
}
.back img{
  width:70px;
  margin:0.5em;

}

.screen{
  width:100%;
  height: 80%
}


.link{
      margin:3em 1em;
      font:300 16px 'Lato';
      text-align: center;
      border: 1px solid black;
      width: 200px;
      padding:10px;
      color: black;

}

.link:hover{
  background-color: black;
}

.link:hover a{
  color:white;
}
  

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 400px) {
  html { background: green; }


}

@media (min-width: 600px) {
  html { background: blue; }


}

@media (min-width: 960px) {
  html { background: grey; }

  

}