@charset "utf-8";


@font-face {
  font-family: 'Cyber Bold';
  src: url(fonts/blender-pro-bold.ttf);
  font-display: swap;
}

@font-face {
  font-family: 'Cyber';
  src: url(fonts/blender-pro-book.ttf);
  font-display: swap;
}

body {
    height:100vh;
    margin:auto;
    background-color:#000;
    overflow:hidden;
}

h1, h2, h3, p {
    text-align:center;
    margin:auto;
    color:#ffffff;
    font-family: 'Cyber', sans-serif;
    font-weight:100;
    text-transform:uppercase;
}

h1 {
    font-size:30px;
    letter-spacing: 20px;
    margin-bottom:10px;
}

h2 {
    font-size:18px;
    margin-bottom:40px;
    letter-spacing: 6px;
}

h3 {
    font-size:50px;
        letter-spacing: 51px;
}

.container {
 margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
    width:100%;
    z-index:98;
    
}

div.buttons {
    width:100%;
    max-width:900px;
    text-align:center;
    margin:auto;
    padding:40px;
    display:flex;
    height:60px;
      align-items : center;
      flex-direction: row;
    justify-content:space-evenly;

}

a {
    text-decoration:none;
    width:100%;
    height:100%;
    margin-right:20px;
}

a.future {
    padding-right:40px;
}


/* BUTTON GLITCH */

button {
    font-size:26px;
}


:root {
  --shimmy-distance: 5;
  --primary-hue: 0;
  --primary-lightness: 50;
  --color: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 5%);
  --font-size: 26px;
  --label-size: 9px;
  --shadow-primary-hue: 180;
  --shadow-secondary-hue: 60;
}

.cybr-btn {
  font-family: 'Cyber Bold', sans-serif;
  position: relative;
  text-transform: uppercase;
  background: black;
  font-size: 26px;
  outline: transparent;
  border: 0;
  width:100%;
  height:100%;
  box-shadow: -2px 0 1px 0px inset var(--shadow-primary);
  transition: background 0.1s ease;
    cursor: pointer;
    border:solid 2px #ffffff;
}

.cybr-btn *:after {
  outline: transparent;
}

.cybr-btn .cybr-btn__text:after,
.cybr-btn:hover .cybr-btn__glitch:after {
  display: block;
}

.cybr-btn:hover {
  --primary-lightness: 40;
}

.cybr-btn:active {
  --primary-lightness: 30;
}

.cybr-btn__glitch {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
    height:100%;
  filter: drop-shadow(-2px 2px cyan)
          drop-shadow(-1px -1px cyan)
          drop-shadow(2px 2px cyan);
}

.cybr-btn__glitch:after {
  display: none;
  background: purple;
  animation: shimmy-text 2s infinite alternate ease-in-out;
  content: '';
  height: 98%;
  width: 98%;
  position: absolute;
  top: 1%;
  left: 1%;
    
}

.cybr-btn__text {
  color: #ffffff;
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
  white-space: nowrap;
    top:20%;
}

.cybr-btn__text:after {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    min-height:50px;
  position: absolute;
  content: attr(data-text);
  filter: brightness(1);
  animation: shimmy-text 2s infinite alternate ease-in-out;
  text-shadow: 2px 2px cyan, -2px -2px green;
}

.cybr-btn:after {
  position: absolute;
  padding: 10px 4px;
  letter-spacing: 1px;
  line-height: 1;
  bottom: -5%;
  right: 5%;
  --font-size: 26px;
  box-shadow: 2px 0 1px 0 inset var(--shadow-primary);
}

    a.past .cybr-btn__text:after {
  animation: shimmy-text 2s infinite alternate ease-in-out;
}
    
    a.present .cybr-btn__text:after {
  animation: shimmy-text 4s infinite alternate ease-in-out;
}

a.future .cybr-btn__text:after {
  animation: shimmy-text 1s infinite alternate ease-in-out;
}
   
.past .cybr-btn:hover {
    border:solid 2px cyan;
}
    
 .present .cybr-btn:hover {
    border:solid 2px purple;
}
    
.future .cybr-btn:hover {
    border:solid 2px #25EA13;
}

@keyframes shimmy-text {
  0% {
    clip-path: inset(2% 0 95% 0);
  }
  2%, 8% {
    clip-path: inset(78% 0 0 0);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  6% {
    clip-path: inset(78% 0 0 0);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  9% {
    clip-path: inset(78% 0 0 0);
    transform: translate(0, 0);
  }
  10% {
    clip-path: inset(44% 0 46% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  13% {
    clip-path: inset(44% 0 46% 0);
    transform: translate(0, 0);
  }
  14%, 21% {
    clip-path: inset(0 0 100% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  15%, 20% {
    clip-path: inset(40% 0 60% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  25% {
    clip-path: inset(40% 0 15% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  30% {
    clip-path: inset(40% 0 15% 0);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  35%, 45% {
    clip-path: inset(63% 0 20% 0);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }
  40% {
    clip-path: inset(63% 0 20% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }
  50% {
    clip-path: inset(63% 0 20% 0);
    transform: translate(0, 0);
  }
  55% {
    clip-path: inset(0 0 90% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  60% {
    clip-path: inset(0 0 90% 0);
    transform: translate(0, 0);
  }
  31%, 61%, 100% {
    clip-path: inset(0 0 100% 0);
  }
}

p.copyright {
    font-size:12px;
    bottom:0;
    position:absolute;
    text-align:center;
    margin:auto;
    width:100%;
    padding:20px 0;
    letter-spacing: 2px;
}


/* Glitch background - doesn't work with canvas. Saving for mobile 
.glitch {
	position: relative;
	overflow: hidden;
    z-index:97;
}
.glitch img {
	position: relative;
	z-index: 1;
	display: block;
}
.glitch__layers {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.glitch__layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url(images/bg5.jpg);
    opacity: 0.2;
	background-repeat: no-repeat;
	background-position: 0 0;
    z-index:99;
}
.glitch__layer:nth-child(1) {
	transform: translateX(-5%);
	animation: glitch-anim-1 2s infinite linear alternate;
}
.glitch__layer:nth-child(2) {
	transform: translateX(3%) translateY(3%);
	animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}
.glitch__layer:nth-child(3) {
	transform: translateX(5%);
	animation: glitch-anim-flash 1s infinite linear;
}
@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
	}
	10% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	20% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	40% {
		clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
	}
	50% {
		clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
	}
	60% {
		clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
	}
	70% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	80% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	90% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	100% {
		clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
	}
}
@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
	}
	15% {
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	25% {
		clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	45% {
		clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
	}
	50% {
		clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
	}
	65% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	75% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
	}
	95% {
		clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
	}
	100% {
		clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
	}
}
@keyframes glitch-anim-flash {
	0% {
		opacity: .2;
	}
	30%, 100% {
		opacity: 0;
	}
}

*/

canvas {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
    z-index:2;
    opacity: 0.8;
}

@media only screen and (max-width: 1300px) {
    h3 {
        letter-spacing: 30px;
    }
}

@media only screen and (max-width: 900px) {
  
a.future {
    padding-right:60px;
}
}

@media only screen and (max-width: 500px) {
    
    html, body {
        height:100%;
        width:100%;
        overflow:hidden;
    }
    
 
    .container {
        top:40%;
        -ms-transform: none;
  transform:none
        position:relative;
    }
    div.buttons {
        display:block;
        padding:0;
        margin-top:50px;
        width:90%;
    }
    a, a.future {
        padding:10px 0;
        margin:auto;
        margin-right:auto;
}
    
h1 {
    font-size:28px;
    letter-spacing: 10px;
    padding:0 10px;
}

h2 {
    font-size:16px;
    letter-spacing: 3px;
    padding:0 10px;
}
    
    h3 {
        letter-spacing: 10px;
        font-size:36px;
        margin:10px 20px;
    }
      
    .cybr-btn .cybr-btn__text:after,
    .cybr-btn:active .cybr-btn__glitch:after {
        display: block;
    }
     
.cybr-btn {
    margin:10px 0;
}

.past .cybr-btn {
    border:solid 2px cyan;
}
    
 .present .cybr-btn {
    border:solid 2px purple;
}
    
.future .cybr-btn {
    border:solid 2px #25EA13;
}

}