@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap');

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
  scroll-behavior: smooth;
}


body{
 font-family: 'Roboto Mono', monospace;
  font-size:30px;
}
.screen{
  width:100%;
  height:100vh;  
  position: relative;
}

.content{
  color:#fff;
  width:80%;
  margin:auto;
  padding-top:10%;
}

.ar_down{
  position: absolute;
  bottom: 45px;
  width:80px;
  height:80px;
  left:50%;
  margin-left: -40px;
  transform: rotate(45deg);
  
}

.ar_down a{
  width:100%;
  height:100%;
  border-radius:5px;
  display:block;
  border: transparent;
  border-right:solid 10px white;
  border-bottom:solid 10px white;
  animation: ar_down_anim 2s linear 0s infinite normal none;
  
}


#first{
  background:url(img/bg.jpg);
  background-size:cover;
}

#second{
  background:#2C3E50;
}

#third{
 background:  #7F8C8D;
}

#last{
  background:#fff;;
}

#first .content p{
  text-shadow: 0 0 2px black ,  0 0 3px black , 0 0 4px black ;
  font-size: 1.2em;
  font-weight:bolder;
}

#first .content h1{
  font-size: 3em;
  margin-bottom: 20px;
  font-weight:bolder;
  text-shadow: 0 0 5px black ,  0 0 5px black , 0 0 10px black ;
}

#first .content span{
  display: block;
  text-align: right;
  font-size: 0.9em;
  font-style: italic;
  font-weight: normal;
}


#second .content p {
  font-size: 2em;
}

#third .content h2 {
  font-size: 2.5em;
    margin-bottom: 20px;
  font-weight:bolder;
}



#third .content p {
  font-size: 2em;
  text-transform: capitalize;
}


#last .content h2 {
  font-size: 2.5em;
    margin-bottom: 20px;
  font-weight:bolder;
  color:#7F8C8D;
}


#last .content p{
  font-size: 1em;
  font-style: italic;
  color:#000;
}



#last .content span{
  display: block;
  text-align: right;
  font-size: 0.9em;
  font-style: italic;
  font-weight: normal;
  color:#000;
}

#contact{
  background: #2C3E50;
  height:100px;
  width:100%;
  position: absolute;
  bottom:0;
  left:0;
  padding-top:30px;
  text-align: center;
}

#contact ul {
  display: block;
  text-indent: 0;
  margin:auto;
}

#contact ul li{
  display:inline-block;
  padding: 5px 25px;
  color:#fff;
 
}




#contact ul li span{
   color : #7F8C8D;
  font-size: 0.9em;
  font-style: italic;
}



@media screen and (max-width: 1200px) {
  body{
  font-size:1px;
}
  .screen{
    height:auto;
    padding-bottom: 200px;
  }
  .ar_down{display: none;} 
 
}




@media screen and (max-width: 1600px) {
  body{
  font-size:20px;
}
}

@keyframes ar_down_anim {
  0% {
    transform: translateY(0);
  }

  50%{
    transform: translateY(-20px) translatex(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}