body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
@font-face {
  font-family: Alata;
  src: url(../fonts/Alata-Regular.ttf);
}

@keyframes fadeInAnim {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes GreyToBlueAnim {
  from {background-color: white;}
  to {background-color: rgb(60,180,250);}
}

#navbar {
  animation-name: GreyToBlueAnim;
  animation-duration: 0.5s;
}
#navbar * {
  animation-name: fadeInAnim;
  animation-duration: 0.5s;
}

#maindiv {
  opacity: 1;
  position: absolute;
  width: 100%;
  height: calc(100%-50px);
  left: 0;
  top: 60px;
  animation-name: fadeInAnim;
  animation-duration: 1s;
}

.content {
  top: 50px;
  position: relative;
  width: auto;
  background-color: rgb(240,240,240);
}

section {
  background-color: rgb(240,240,240);
}

article {
  background-color: rgb(240,240,240);
  padding: 30px;
  width: auto;
}