@font-face {
    font-family: 'Bebas';
    src: url('fonts/bebaskai-regular-webfont.woff2') format('woff2'),
         url('fonts/bebaskai-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
    width:  100%;
    min-height: 100%;
    height:  100%;
}
body {
    background: #444;
    color:  #fff;
    font-family: sans-serif;
    margin:  0;
    padding: 0;
    width:  100%;
    min-height: 100%;
    height:  100%;
}

.logo-hero {
    font-size:  10vw;
    text-align: center;

}

.logo {
     perspective: 1000px;
     perspective-origin: 50% 0;
     font-size: 2em;
     display: inline-flex;
     font-family: Bebas, sans-serif;
    font-weight:  100;
    color:  #96d500;
    text-shadow: 0.02em 0.02em 0 rgba(0,0,0,0.2);

}
 .logo span {
     display: block;
}
 .logo span:nth-child(1) {
     transform-origin: 33.3333333333% 200%;
     font-size: 1.14em;
     transform: scale(65.9, 1) rotatey(89.5deg);
}
 .logo span:nth-child(2) {
     transform-origin: 25% 200%;
     font-size: 0.96em;
     transform: scale(75.9, 1) rotatey(89.5deg);
}
 .logo span:nth-child(3) {
     transform-origin: 0% 200%;
     font-size: 0.915em;
     transform: scale(85.9, 1) rotatey(89.5deg);
}
 .logo span:nth-child(4) {
     transform-origin: 50% 200%;
     font-size: 0.85em;
     transform: scale(1, 1) translatey(0%);
}
 .logo span:nth-child(5) {
     transform-origin: 100% 200%;
     font-size: 0.915em;
     transform: scale(85.9, 1) rotatey(-89.5deg);
}
 .logo span:nth-child(6) {
     transform-origin: 75% 200%;
     font-size: 0.96em;
     transform: scale(75.9, 1) rotatey(-89.5deg);
}
 .logo span:nth-child(7) {
     transform-origin: 66.6666666667% 200%;
     font-size: 1.14em;
     transform: scale(65.9, 1) rotatey(-89.5deg);
}

main {
    width: 60%;
    margin: 10em auto;
    text-align: center;
}

a {
    color:  white;
    text-decoration: none;

}
a:hover {
    text-decoration: underline;

}
main .buttons button {
    display: block;
    padding: 0.5em 1em;
    border:  1px solid #fff;
    border-radius: 0.8em;
    margin:  1em auto;
    width:  30em;
    text-align: center;
    background: rgba(0,0,0,0);
    cursor: pointer;
}
main .buttons button:hover {
    background: rgba(0,0,0,0.2);
}
main .buttons img {
    height:  5em;
    filter:  brightness(4);
    transition: filter 0.2s;
}
main .buttons img:hover {
    filter: brightness(1.0);
}
main .buttons button:last-child img {
    padding: 0.5em 0;
    height:  4em;
}

header {
    height: 3em;
    width:  100%;
    font-weight:  bold;
    line-height: 3em;
    font-size:  1.2em;
    padding: 0 3em;
}
header h1 {
    font-size: 1.2em;
    display: inline-block;
    line-height: 0.9em;
}
#map {
    width:  100%;
    height:  100%;
    border:  0;
}