@font-face {
    font-family: 'arca_majora_3bold';
    src: url('../fonts/arcamajora3-bold.woff2') format('woff2'),
         url('../fonts/arcamajora3-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arca_majora_3heavy';
    src: url('../fonts/arcamajora3-heavy.woff2') format('woff2'),
         url('../fonts/arcamajora3-heavy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  background-color: #FDFDFD;
  font-family: 'Didact Gothic', sans-serif;
  color: #353535;
}


div .navbar {
  width: 100%;
  height: 50px;
  top: 0px;
  position: absolute;
  z-index: 999;
  background-color: #FDFDFD;
  opacity: 0.8;
  font-size: 20px;
  padding-left: 100px;
  color:  #30343F;
}
div ul li.active {
  background-color: #D4D4D4;
  height: 100%;
  padding: 50px 15px 2px;
}


/* ul {
    width: 100%;
} */

ul li {
  list-style-type: none;
  display: inline;
  margin: 10px;
}


h1 {
  font-size: 150px;
  font-family: 'arca_majora_3heavy', sans-serif;
  color: #30343F;
}

h2, h3 {
  font-size: 100px;
  font-family: 'arca_majora_3heavy', sans-serif;
  color: #4A5259;
}
h4 {
  font-size: 65px;
  font-family: 'arca_majora_3heavy', sans-serif;
  color: #4A5259;
}
div .border {
  border-left:1px solid #30343F;
  height:200px;
  padding-left: 20px;
}
div .section{
  position: relative;
}

.container {
  padding-top: 70px;
  padding-bottom: 70px;
}

div .home {
  padding: 25px 100px 25px;
}


div .about {
    padding: 25px 100px 25px;
}
div .work{
  padding: 2px 0 25px;
}

div .description {
  padding: 25px 100px 10px;
}

div .skills{
  padding: 30px 100px 25px;
}
div .contact{
  padding: 25px 100px 25px;
}


div .projecticon {
  max-height: auto;
  max-width: 500px;
}

div .devicon {
  display: inline-flex;
  padding: 25px 50px 25px;
  font-size: 75px;
}

i .devicon {
  padding-right: 25px;
  padding-bottom: 15px;
  padding-top:15px;
}
div .color1{

   background-color: #EAEAEA;
 }

div .color2{
    background-color: #D4D4D4;
  }

div .contactme {
  max-height: auto;
  max-width: 600px;
  padding: 5px 30px 0px 30px;
}

div .contacticon {
  text-align: center;
  padding: 5px 30px 0px 5px;
  max-height: 100px;
  max-width: 600px;
  font-size: 50px;
  margin: 0 auto;

}
.contacticon a {
text-decoration: none;
}

div .contacticon a:hover {
  color: #30343F;
  text-decoration: none;
}

p {
   font-size: 20px;
 }

 h5 {
   font-size: 45px !important;
 }

a {
  color: #4A5259;
  text-decoration: underline;
}
 .navbar a {
   text-decoration: none;
 }
a:hover {
  color: #4A5259;

 }

p a:hover {
  color: #4A5259;
  text-decoration: underline;
}


div .footer {
  margin: 30px;
  line-height: 0.5;
}