@import url(https://fonts.googleapis.com/css?family=Cantarell:700,400);
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
html, body
{
  background-color: #282c34;
  color: #dc9164;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family: 'Cantarell', sans-serif;
  overflox-x: hidden;
}
a, a:active, a:visited
{
  color:#dc9164;
}
a:hover
{
  color: #f0ccb7;
}
header
{
  background-color: #3a3f4b;
  height: 64px;
  margin: 0;
  padding: 0;
}
section
{
  background-color: #3a3f4b;
  height: calc(100% - 142px);
  text-align: center;
}
h1
{
  font-family: 'Orbitron', sans-serif;
  font-size: 64px;
  font-weight: bold;
  margin-bottom: 0;
}
#subtitle
{

}
footer
{
  background-color: #282c34;
  color: #7d838f;
  height: 64px;
  padding-top: 14px;
  padding-bottom: 0;
  text-align: center;
  margin: 0;
}
.bg {
  position: fixed;
  pointer-events: none;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('assets/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  background-size: 540px;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}