@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(icons.woff2) format('woff2');
}

@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: url(audiowide.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 5vmax;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
	overflow-x: hidden;
    height: 100%;
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#222;
    position: relative;
    height:100%;
    margin: 0;
    font-family: 'Audiowide'; /*agency fb?*/
    padding:0;
    text-transform:uppercase;
    width:100vw;
    color: #eee;
    background-image: linear-gradient(white 1px, transparent 1px),
    linear-gradient(90deg, white 1px, transparent 1px),
    linear-gradient(rgba(15,15,15,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,15,15,.3) 1px, transparent 1px);
    background-size:0 0, 0 0, 20vw 20vw, 20vw 20vw;
}

h1 {
    margin: 0;
}

#title {
    transform: translateY(3vh);
    font-size: 14vmin;
    text-align: center;
    text-shadow: 1pt -1pt #000,
                 2pt -2pt #000,
                 3pt -3pt #000,
                 4pt -4pt #000,
                 5pt -5pt #000,
                 6pt -6pt #000,
                 7pt -7pt #000,
                 8pt -8pt #000,
                 9pt -9pt #000,
                 10pt -10pt #000,
                 11pt -11pt #000,
                 12pt -12pt #000,
                 13pt -13pt #000,
                 14pt -14pt #000,
                 15pt -15pt #000,
                 16pt -16pt #000,
                 17pt -17pt #000,
                 18pt -18pt #000,
                 19pt -19pt #000,
                 20pt -20pt #000,
                 21pt -21pt #000,
                 22pt -22pt #000,
                 23pt -23pt #000,
                 24pt -24pt #000,
                 25pt -25pt #000,
                 26pt -26pt #000,
                 27pt -27pt #000,
                 28pt -28pt #000,
                 29pt -29pt #000,
                 30pt -30pt #000,
                 31pt -31pt #000,
                 32pt -32pt #000,
                 33pt -33pt #000,
                 34pt -34pt #000,
                 35pt -35pt #000,
                 36pt -36pt #000,
                 37pt -37pt #000,
                 38pt -38pt #000,
                 39pt -39pt #000,
                 40pt -40pt #000,
                 41pt -41pt #000,
                 42pt -42pt #000,
                 43pt -43pt #000,
                 44pt -44pt #000,
                 45pt -45pt #000,
                 46pt -46pt #000,
                 47pt -47pt #000,
                 48pt -48pt #000,
                 49pt -49pt #000,
                 50pt -50pt #000,
                 51pt -51pt #000,
                 52pt -52pt #000,
                 53pt -53pt #000,
                 54pt -54pt #000,
                 55pt -55pt #000,
                 56pt -56pt #000,
                 57pt -57pt #000,
                 58pt -58pt #000,
                 59pt -59pt #000,
                 60pt -60pt #000,
                 61pt -61pt #000,
                 62pt -62pt #000,
                 63pt -63pt #000,
                 64pt -64pt #000,
                 65pt -65pt #000,
                 66pt -66pt #000,
                 67pt -67pt #000,
                 68pt -68pt #000,
                 69pt -69pt #000,
                 70pt -70pt #000,
                 71pt -71pt #000,
                 72pt -72pt #000,
                 73pt -73pt #000,
                 74pt -74pt #000,
                 75pt -75pt #000,
                 76pt -76pt #000,
                 77pt -77pt #000,
                 78pt -78pt #000,
                 79pt -79pt #000,
                 80pt -80pt #000,
                 81pt -81pt #000,
                 82pt -82pt #000,
                 83pt -83pt #000,
                 84pt -84pt #000,
                 85pt -85pt #000,
                 86pt -86pt #000,
                 87pt -87pt #000,
                 88pt -88pt #000,
                 89pt -89pt #000,
                 90pt -90pt #000,
                 91pt -91pt #000,
                 92pt -92pt #000,
                 93pt -93pt #000,
                 94pt -94pt #000,
                 95pt -95pt #000,
                 96pt -96pt #000,
                 97pt -97pt #000,
                 98pt -98pt #000,
                 99pt -99pt #000,
                 100pt -100pt #000,
                 101pt -101pt #000,
                 102pt -102pt #000,
                 103pt -103pt #000,
                 104pt -104pt #000,
                 105pt -105pt #000,
                 106pt -106pt #000,
                 107pt -107pt #000,
                 108pt -108pt #000,
                 109pt -109pt #000;
    letter-spacing: -0.7vw;
    animation: eeee 1.5s;
}

@keyframes eeee {
    0% { transform: translateY(-10vh) translateX(40vw); }
    100% { transform: translateY(3vh); }
}

#play-btn {
	cursor: pointer;
    position: absolute;
    bottom: 2vw;
    width: 92vw;
    text-align: center;
    display: block;
    box-sizing: border-box;
    font-size: 22vmin;
}

#head-view {
    width: 100vw;
    height: 100%;
    padding: 4vw;
    overflow: hidden;
    position: relative;
    background-color: transparent;
    top: 0;
    box-sizing: border-box;
    transition: 0.4s opacity, 0.4s transform;
    will-change: transform, opacity, visibility;
}

#background-layer {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #222;
    width: 100vw;
    height: 100%;
    z-index: -4;
    animation: backgroundC 10s infinite linear;
}

#link-btn {
    margin-top: 20vh;
}

@keyframes backgroundC {
    0% {  }
    20% { transform:  translateY(-33vh); background-color: rgba(90, 137, 246, 0.4); }
    60% { transform:  translateY(-100vh); background-color: rgba(136,136,136,0.4); }
    100% { transform:  translateY(-200vh); background-color: rgba(34, 34, 34, 0.4); }
}

a {
	font-size: 5vmin;
	display: block;
	text-decoration: none;
	color: #ad0;
	text-align: center;
}


blue {
    color: #5a89f6;
}

main, footer {
	padding: 4vmax;
    text-align: center;
}

footer a, main a {
    font-size: inherit;
    margin-top: 0;
    color: #5a89f6;
}