*{
  scroll-behavior: smooth;
}
body{  background: #1f2833;  }
section{
  position: relative; 
  padding: 10% 15%;
  /* padding-top: 10%; */
  /* border-bottom: 2px solid coral; */
}
section .section-title{
  font-size: 40px;
  text-transform: uppercase;
  color: coral;
  padding-bottom: 0.5em;
}
section .section-subtitle{
  font-size: 18px;
  text-transform: uppercase;
  color: peru;
  padding-bottom: 0.5em;
}

section .section-subtitle+p{  color: #fff;  }
section#about{  text-align: center;  padding-top: 15%;  }

section#about h1{
  font-weight: 800;
  font-family: 'Anton', Arial, sans-serif;
  /* text-shadow: -15px 5px 20px #ced0d3; */
  color: white;
  font-size: 108px;
  text-transform: uppercase;
}
section#about .flex{
  display: flex;
  font-size: 34px;
  text-align: center;
  margin: 0 25%;
  justify-content: space-between;
}
section#about .flex a{
  text-decoration: none;
  color: #fff;
  position: relative;
}
section#about .flex a:nth-child(3){  animation: arrow 1s linear infinite alternate; }

@keyframes arrow {
  100%{  transform: translateY(50px);  }
}
section#about .flex a:nth-child(3):before{  border: none; }
section#about .flex a::before{
  content: "";
  padding: 28px;
  border: 1px solid #fff;
  position: absolute;
  z-index: -1;
  transform: rotate(45deg);
  top: -2px;
  left: -12px;
  animation: example 10s linear 2s infinite;
}
@keyframes example {
  0%{  transform: rotate(0deg);  }
  100%{  transform: rotate(360deg);  }
}

section#service .card{  text-align: center; }

section#service .card .icons{
  font-size: 2em;
  padding: 10px;
  border-radius: 50%;
  background: #ec1839;
  color: #fff;
}
.menubar{
  position: fixed;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  background: #4dd0e1;
  z-index: 1;
}

.menubar .bar div#menu a{  color: #222;  text-decoration: none;  font-size: 40px;  padding: 10px 20px;}
.menubar .bar .progress{  position: absolute;  height: 100%;  border-radius: 0px;  z-index: -1;}

#project .card{  font-size: 14px; }
#project .card-title{  font-size: 18px;  }
section#skill .card{  text-align: center; }
section#skill .icons{ font-size: 60px;  margin:0 10px;  }
section#skill .icons span.subtitle{  font-size: 16px; }
section#skill .section-subtitle{  font-size: 16px;  }
section#contact{  width: 100%;  }

@media screen and (max-width:768px) {
  .menubar{  padding: 5px 0;  }
  .menubar .bar div#menu{  display: flex;  justify-content: space-between;  margin: 0 10px;}
  .menubar .bar div#menu a{  color: #222;  text-decoration: none;  font-size: 28px;  padding:0 10px;}

  section{  height: 100%;  width: 100%; position: relative; clear: both;}
  section#about h1{  font-size: 62px;  padding-bottom: 10%;   }  
  section#about .flex a::before{  border: none;  }
  section#about .flex  {  margin: 0px 10%; }
  section#about .flex .icons{ font-size: 30px;}
  .icons{ font-size: 50px;  }
  .card{ margin-bottom: 10px;}
  section .section-title {  font-size: 30px;  }
}