@import url(https://fonts.googleapis.com/css?family=Roboto:300);

:root {
  --base-grid: 8px;
  --colour-white: #fff;
  --colour-black: #1a1a1a;
}
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

*,
:after,
:before {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background-position: 100%;
}

.centered {
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  top: 50%;
}
body{
  font-size: 1.2em;
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;

}


#active {
  background-color: #4CAF50;
}

a {
    color: white;
    font-size: 30px;
    transition: 0.6s;
}

a:hover {
    color: black;
}

a.inverted {
    color: black;
    font-size: 30px;
    transition: 0.6s;
}

a.inverted:hover {
    color: green;
}
@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}
