/* =========================
   BASE BODY & FONTS
========================= */
body {
  background: #1b2838;
  margin: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf);
  font-family: "Terminal";
}

@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf) format("truetype");
  font-family: "Sys";
}

/* =========================
   SCREEN BACKGROUND
========================= */
.screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to bottom, #85908c 0%, #323431 100%);
}

/* =========================
   OVERLAY & SCANLINES
========================= */
.scanlines .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* mobile-friendly */
}

.scanlines .overlay::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png") no-repeat;
  background-size: 100% 100%;
}

.scanlines .overlay::before {
  content: " ";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
              linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
  background-size: 100% 2px, 3px 100%;
}

/* =========================
   CANVAS
========================= */
.picture {
  width: 100vw;
  height: 100vh;
  z-index: -1;
  transform: scale(0, 0);
  background: linear-gradient(to bottom, #85908c 0%, #323431 100%);
  overflow: hidden;
}

/* =========================
   TEXT / LOGO
========================= */
.text {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 200px;
  color: lime;
  font-family: "Sys";
  font-size: 6vmin;
  text-shadow: 0 0 3px lime;
  opacity: 0;
  filter: blur(0.5px);
}

.text img {
  max-width: 150px;
  height: auto;
}
.usertext {
    text-align:center;
    font-size:10px;
    margin-top:10px;
}
.vote-title, .subtitle {
    text-align:center;
    margin:10px 0;
}
.subtitle span {
    text-align:center;
    margin-top:10px;
    font-size:18px;

}
/* =========================
   MENU
========================= */
.menu {
  opacity: 0;
  font-family: "Sys";
  font-size: 32px;
  text-transform: uppercase;
  width: 34%;
  height: auto;
  color: #fff;
  /* background-color: #0069ff; */
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  filter: blur(1px);
  box-sizing: border-box;
  animation: jerkup 100ms infinite;
  z-index: 99;
}

.menu header {
  color: #e7e05c;
  margin-bottom: 10px;
  padding: 5px 15px;
  animation: glitch 5s ease 2000ms infinite;
}

.menu ul {
  margin: 0;
  padding: 0;
  animation: glitch 5s ease 2000ms infinite;
}

.menu ul li {
  list-style: none;
  padding: 5px 15px;
}

.menu ul li.active {
  background-color: #1af2ff;
}

.menu ul li a {
  color: #fff;
  text-decoration: none;
}

.menu footer {
  background-color: #2afd72;
  margin-top: 10px;
  padding: 5px 15px;
  animation: glitch 5s ease 2000ms infinite;
}

.menu footer .key {
  float: left;
  width: 50%;
}

.menu footer .key span {
    /* background-color: #0069ff; */
    /* border: 6px solid #e7e05c; */
    border-radius: 6px;
    display: inline-block;
    height: 34px;
    line-height: 36px;
    padding: 10px 6px 10px 0px;
}

.menu footer .key:last-child {
  text-align: right;
}

/* =========================
   MINIMIZED MENU (TOP-RIGHT)
========================= */
.menu.minimized {
  position: fixed !important;
  top: 10%;
  right: 5%;
  left: auto !important;
  transform: none !important;
  width: 160px;
  padding: 6px 10px;
  text-align: center;
  cursor: pointer;
  z-index: 50;
 /* background: #0a4cff;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);*/
}

.menu.minimized #menu-toggle {
  display: block !important;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 6px 0;
  z-index: 10000;
}

.menu.minimized header {
  display: block;
  font-size: 18px;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
}

.menu.minimized ul,
.menu.minimized footer {
  display: none;
}

/* =========================
   AJAX CONTENT
========================= */
#ajax-content {
  position: absolute;
  top: 55%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 720px;
  transition: all 0.35s ease;
  opacity: 0;
}

body.content-centered #ajax-content {
  top: 50%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 90;
}

/* =========================
   ANIMATIONS
========================= */
.on .picture { animation: on 3000ms linear forwards; }
.off .picture { animation: off 750ms cubic-bezier(0.23,1,0.32,1) forwards; }
.on .text, .on .menu { opacity: 1; transition: opacity 10ms ease 2000ms; }

@keyframes on {
  0% { transform: scale(1,0.8); opacity:1; filter: brightness(4); }
  3.5% { transform: scale(1,0.8) translateY(100%); }
  3.6% { transform: scale(1,0.8) translateY(-100%); opacity:1; }
  9% { transform: scale(1.3,0.6) translateY(100%); opacity:0; filter: brightness(4); }
  11% { transform: scale(1,1); opacity:0; filter: contrast(0) brightness(0); }
  100% { transform: scale(1,1); opacity:1; filter: contrast(1) brightness(1.2) saturate(1.3);}
}

@keyframes off {
  0% { transform: scale(1,1); filter: brightness(1);}
  40%,70% { transform: scale(1,0.005); filter: brightness(100);}
  90% { transform: scale(0.005,0.005);}
  100% { transform: scale(0,0);}
}

/* =========================
   TEXT GLITCH
========================= */
.text span {
  position: absolute;
  filter: blur(1px);
  animation: blur 30ms infinite, jerk 50ms infinite;
}
.text span:nth-child(1) { color: red; margin-left:-2px; filter: blur(2px); }
.text span:nth-child(2) { color: lime; margin-left:2px; filter: blur(2px); animation: glitch2 1s infinite; }
.text span:nth-child(3) { color: blue; filter: blur(1px); animation: glitch1 1s infinite; }
.text span:nth-child(4) { color: #fff; filter: blur(1px); text-shadow:0 0 50px rgba(255,255,255,0.4);}
.text span:nth-child(5) { color: rgba(255,255,255,0.1); filter: blur(15px); }

@keyframes blur { 0%,100%{opacity:.8} 50%{opacity:1} }
@keyframes jerk { 50%{transform:translateX(1px);} 51%{transform:translateX(0);} }
@keyframes jerkup { 0%{transform:translateY(1px);} 100%{transform:translateY(0);} }
@keyframes glitch1 {0%,30%,32%,98%{transform:translateX(0);}31%,100%{transform:translateX(10px);} }
@keyframes glitch2 {0%,30%,32%,98%{transform:translateX(0);}31%,100%{transform:translateX(-10px);} }
@keyframes glitch {40%{opacity:1;transform:scale(1) skew(0);}41%{opacity:.8;transform:scale(1,1.2) skew(80deg);}42%{opacity:.8;transform:scale(1,1.2) skew(-50deg);}43%{opacity:1;transform:scale(1) skew(0);}}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 480px) {
  .text { font-size: 5vmin; top:8%; left:5%; width:auto; }
  .text img { max-width:120px; }
  .menu { width: 80%; font-size:20px; top:50px; right:10px; }
  .menu ul li { padding: 8px 10px; }
  #ajax-content { width:95%; max-width:400px; top:55%; left:50%; transform:translate(-50%, -50%); font-size:16px; }
  .menu.minimized { width:120px; padding:4px 8px; top:10px; right:10px; }
  .menu.minimized #menu-toggle { font-size:18px; padding:4px 0; }
  .menu.minimized header { font-size:16px; }
}