html,
body {
    height:100%;
    overflow:hidden;
    background:var(--title);
    padding: 0;
    margin: 0;
    font-family: 'Ubuntu', monospace;
}

a {
    text-decoration: none;
}

.background {
  background:url(sterpatroon.svg);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto 60%;
  animation: animatedBackground 1100s linear infinite;
  height:100%;
}

.grid {
    animation: laad ease-in .6s;
    display:grid;
    height:100%;
    grid-template-rows:20% 80%;
    max-width:1400px;
    margin:auto;
}

.top-bar{
  margin:10px 30px;
}

.top-nav-link {
    font-weight: 600;
    padding: 20px;
    text-align: right;
}

.top-nav-link a {
    padding: 30px;
    font-size:18px;
    color: var(--link-nofocus);
    transition: ease .3s;
}

.top-nav-link a:hover {
    color: var(--white);
}



.title {
    text-align:center;
}

.top-logo {
    width:80%;
    max-width:650px;
    margin-top:15vh;
}

.highlight span {
    background-color: var(--button-green);
    padding:7px 15px;
    border-radius:5px;
    color:var(--white);
    transition: .3s ease-in;
    border:1px solid white;
}

.highlight span:hover {
    background-color: var(--button-green-hover) ;
}

.double {
    filter: invert(1) brightness(40%);
    width: 24vw;
    position:absolute;
    bottom: 50px;
    left:38vw;
    animation: touchFade 5s ease infinite;
    animation-delay: 1s;
    display:none;
}

.menu-mobile{
    position:fixed;
    bottom:0;
    left:0;
    transition:.8s;
    overflow-y:hidden;
    width:100%;
    height:0;
    background-color:#123140;
    text-align:center;  
}

.menu-mobile > div {
    margin-top: 10vh;
    color:var(--white);
    font-size:25px;
}

.menu-mobile a {
    color:var(--white);
    display: block;
    padding: 20px;
    font-size: 25px;
}

.menu-mobile a:focus,
.menu-mobile a:active,
.menu-mobile a:hover {
    background-color:#174C73;
}

:root {
    --white: #fafafa;
    --title: #111111;
    --menu-blue: #1c2538;
    --link-nofocus: #FFFFFF80;
    --link:#0689c3;
    --stats: #027710;
    --button-green: #027710;
    --button-green-hover: #40bf0f;
    --active: #f34e1c;
    --active-hover: #e87a59;
    
}

@keyframes laad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -10000px 0;
    }
}

@keyframes touchFade {
    0% {
        opacity: 1;
    }
    20% {
        opacity:0;
    }
    70% {
        opacity:0;
    }
    100% {
        opacity:1;
    }

}
@media screen and (max-width:800px) {
    .top-nav-link {
      display:none;
    }    
    .double {
      display:initial;
    }
}