:root {
  --text-default: #e5f7e0;
  --text-highlight: #eb2958;
  --text-btn: #e75a7c;
  --text-link: #e75a7c;
  --border-pink: #ff9dd0;
  --sub-header: #fce089;
  --preview-size: 416px;
  --preview-size-mobile: 300px;
}

@font-face {
  font-family: 'vcr';
  src: url('/res/font/vcr.ttf');
}

@font-face {
  font-family: 'killer';
  src: url('/res/font/killer.ttf');
}

*,
*:before,
*:after {
  box-sizing: border-box;
  xoutline: 1px solid red;
}

body {
  font-family: sans-serif;
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

html {
  height: 100vh;
}

#main {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'vcr';
  letter-spacing: 0.1em;
  user-select: none;
}

#webgl {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
}

#calibration {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  font-size: 18px;
}

#calib-feedback{
  text-align: center;
}

#webcam-canvas {
  background-color: #222;
  width: 400px;
  height: 400px;
  margin: 30px;
  /* filter: grayscale(100%) contrast(1.5); */
  filter: grayscale(100%) contrast(1.1);
}

#info {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  padding: 20px;
}

#info a {
  color: var(--text-default);
  opacity: 0.5;
  text-decoration: none;
  margin-bottom: 10px;
  display: inline-block;
}

#info a:hover {
  opacity: 1;
}

#info-inner {
  max-width: 490px;
  line-height: 160%;
  font-size: 18px;
  margin-bottom: 30px;
}

#intro {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

#intro-btn-holder {
  position: absolute;
  top: 65%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intro-btn {
  font-family: 'vcr';
  font-size: 18px;
  margin-bottom: 10px;
  cursor: pointer;
  pointer-events: all;
}

#switch-btn {
  margin-top: 30px;
  visibility: hidden;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#preloader {
  width: 150px;
  height: 37px;
  background-image: url(../res/img/loading.gif);
  animation: fadein 0.5s linear;
}

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

#ai {
  width: 100%;
  height: 100%;
  xtext-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#ai-prompt {
  z-index: 2;
  padding: 10px;
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  pointer-events: all;
}

#skip-btn {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  opacity: 0;
  color: #ccc;
}
#skip-btn:hover {
  color: #eee;
}

#msg-input {
  position: absolute;
  bottom: 5%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  font-family: 'vcr';
  font-size: 18px;
  line-height: 18px;
  width: 50%;
  padding: 12px;
  transform: translate(-50%, 0);
  z-index: 2;
  outline: none;
  opacity: 0;
  text-transform: uppercase;
}

#msg-input::placeholder {
  color: #aaa;
}

.dg.ac {
  z-index: 999 !important;
}

.split-rgb {
  position: relative;
  padding: 10px;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.rgb-desc {
  mix-blend-mode: screen;
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'vcr';
  font-size: 18px;
  padding: 10px;
}

.intro-btn:hover .blue {
  color: #00ff00;
}

.red {
  transform: translate(-2px, -2px);
  color: #ff0000;
  mix-blend-mode: screen;
  z-index: 2;
}
.blue {
  transform: translate(2px, 2px);
  z-index: 3;
  color: #0000ff;
  mix-blend-mode: screen;
}
.green {
  color: #00ff00;
  z-index: 1;
  mix-blend-mode: screen;
}

/* MINTING */

.minting-page {
  overflow: hidden;
  font-family: 'vcr';
  text-transform: uppercase;
  color: var(--text-default);
}

.minting-page a {
  text-decoration: none;
  color: var(--text-link);
}

.minting-page #content {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minting-page #bg {
  object-fit: cover;
}

/* Transition Animation */
.minting-page.show #logo,
.minting-page.show #minted,
.minting-page.show .price,
.minting-page.show .price-subtext,
#nft-demo.show,
.minting-page.show .purchase-ui,
.minting-page.show .cta {
  opacity: 1;
  transform: translateY(0px) translateX(0px);
}

.minting-page #logo {
  /* animation */
  opacity: 0;
  transition: opacity 700ms ease-out 1000ms;
  /* /animation */

  max-width: 840px;
  width: 95%;
  mix-blend-mode: screen;
  margin-bottom: 50px;
  margin-top: 40px;
}

.minting-page #minted {
  /* animation */
  opacity: 0;
  transition: opacity 700ms ease-out 1400ms;
  /* /animation */

  width: 100%;
  max-width: 425px;
  margin-top: 16px;
  mix-blend-mode: screen;
}

.minting-page .price-subtext{

  /* animation */
  opacity: 0;
  transition: opacity 700ms ease-out 1600ms;
  /* /animation */

  font-size:12px;
  margin-top:-5px;
  color:rgba(206, 255, 199, 0.5);
}

.minting-page .price {
  /* animation */
  opacity: 0;
  transition: opacity 700ms ease-out 1600ms;
  /* /animation */

  display: flex;
  align-items: center;
}

.minting-page .price #price {
  width: 240px;
  height: 80px;
  mix-blend-mode: screen;
}

.minting-page .price .price-usd {
  color: #ceffc7;
  opacity: 0.5;
  font-size: 25px;
}

.minting-page p {
  opacity: 0.72;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  max-width: 560px;
}

.minting-page h2 {
  font-weight: normal;
  font-size: 19px;
  margin-top: 38px;
}

.minting-page #demo {
  width: 275px;
  height: 275px;
  border: 1px solid var(--border-pink);
  margin-top: 20px;
  margin-bottom: 30px;
}

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.minting-page .error {
  padding: 4px;
  background-color: white;
  color: #b10606;
  opacity: 0.72;
  margin-top: 22px;
  max-width: 520px;
  line-height: 20px;
}

.minting-page .error a {
  color: #b10606;
  text-decoration: underline;
}

.minting-page .btn-default {
  display: inline-block;
  padding: 5px;
  cursor: pointer;
  color: var(--text-highlight);
  font-size: 18px;
  margin-top: 3px;
  letter-spacing: 1px;
}

.minting-page .btn-default.disabled{
  pointer-events: none;
  opacity: 0.4;
  color:white;
}

.minting-page .cta {
  /* animation */
  opacity: 0;
  transition: opacity 700ms ease-out 2000ms, transform 1000ms ease-out 2000ms;
  transform: translateY(10px);
  /* /animation */

  margin-top: 20px;
  font-size: 18px;
}

.minting-page .btn-default:hover {
  color: white;
}

.minting-page .btn-inline {
  display: inline;
  color: white;
  text-decoration: underline;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.8;
}

.minting-page .btn-inline:hover {
  opacity: 1;
}

.minting-page #secret-level {
  opacity: 0.57;
  margin-top: 75px;
  margin-bottom: 20px;
}

.minting-page h1 {
  color: #fce089;
}

.minting-page ul {
  color: #f1fff3;
  line-height: 23px;
  list-style-type: none;
  padding-left: 0px;
}

.minting-page li .bulletin {
  display: inline-block;
  width: 18px;
  height: 15px;
  margin-right: 5px;
}

.minting-page .links {
  color: var(--text-btn);
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-top: 51px;
  margin-bottom: 72px;
}

.minting-page .links .btn-inline {
  color: var(--text-btn);
  font-size: 12px;
}

.collection-info {
  /* animation */
  opacity: 0;
  transition: opacity 1000ms ease-out 500ms, transform 1000ms ease-out 500ms;
  /* / animation  */
}

.collection-info,
.soldout {
  width: 100%;
  max-width: 700px;
}

.collection-info.show {
  opacity: 1;
}

.collection-info p {
  text-align: left;
}

.collection-info h2 {
  color: #fce089;
}

.collection-info #collection-logo {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  margin-bottom: 19px;
  margin-top: 42px;
}

.team {
  margin-top: 30px;
}

.team-member {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
}

.team-member p {
  text-align: left;
}

.team-member .team-member-name, 
.members .charisma, 
.members .btn-inline {
  color: var(--text-btn);
}

.team-member .team-member-image {
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
  border: 1px solid var(--border-pink);
  margin-right: 50px;
  align-self: center;
}

.team-member .team-member-info {
  padding-top: 8px;
}

.team-member .team-member-info p {
  font-size: 13px;
  line-height: 23px;
}

.team-member .team-member-social a {
  color: var(--text-btn);
  font-size: 20px;
  margin-right: 10px;
}

.team-member .team-member-social a:hover {
  color: white;
}

#nft-demo {
  /* animation */
  opacity: 0;
  transition: opacity 1000ms ease-out 1200ms;
  /* / animation  */

  pointer-events: none;
  position: relative;
  width: var(--preview-size-mobile);
  height: var(--preview-size-mobile);
}

#preview-webgl {
  width: var(--preview-size-mobile);
  height: var(--preview-size-mobile);
  box-sizing: border-box;
  border: 1px solid var(--border-pink);
}

#retake-btn {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  color: var(--text-default);
  opacity: 0.7;
  width: 100%;
  text-align: center;
}

#retake-btn.hide{
  display: none;
}

#retake-btn:hover {
  opacity: 1;
}

#cam-flash {
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: white;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#wm {
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--preview-size-mobile);
  height: var(--preview-size-mobile);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0.6;
  font-size: 60px;
  color: white;
}

.minting-page p.wallet {
  font-size: 10px;
  opacity: 0.5;
}

.minting-page input {
  width: 100%;
  max-width: 415px;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
  appearance: none;
  background: none;
  border: none;
  font-family: 'VCR';
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  box-sizing: border-box;
  color: var(--text-default);
}

.purchase-loader{
  margin-top: 60px;
  opacity: 0.4;
}

.purchase-ui {
  /* animation */
  opacity: 0;
  transition: opacity 700ms ease-out 1800ms, transform 1000ms ease-out 1800ms;
  transform: translateY(10px);
  /* /animation */

  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  min-height: 250px;
  margin-top: 10px;
}

#sold-out-page .layer#content {
  justify-content: center;
}

.soldout {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 70px;
  padding-right: 70px;
  box-sizing: border-box;
}

.soldout img {
  max-width: 427px;
  width: 50%;
  margin-bottom: 25px;
}

.soldout .btn-default {
  margin-bottom: 50px;
}

.soldout .links {
  margin-top: 25px;
}

.soldout .links .btn-inline {
  font-size: 15px;
}

#gate #content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.members .charisma{
  margin: 0 auto;
  text-align: center;
}

#demo-video{
  border:1px solid var(--border-pink);
}

#home-page .btn-proceed{
  margin-top:40px;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 262px) {
  .soldout .btn-default {
    white-space: nowrap;
  }
}

@media only screen and (max-width: 400px) {
  .soldout .links {
    flex-direction: column;
    align-items: center;
  }

  .soldout img {
    width: 70%;
  }

  .soldout .links .btn-inline {
    margin: 10px 0;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  .soldout {
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 1024px) {

  #home-page .btn-proceed .btn-default{
    font-size: 40px;
  }
  
  .minting-page .price #price {
    width: 310px;
  }

  .team-member {
    flex-direction: row;
  }

  .minting-page ul li {
    white-space: nowrap;
  }

  .minting-page .btn-default {
    font-size:21px;
  }

  .minting-page p.wallet {
    font-size: 13px;
  }

  .team-member .team-member-image {
    width: 158px;
    height: 172px;
  }

  .minting-page #nft-demo,
  #preview-webgl,
  #wm {
    width: var(--preview-size);
    height: var(--preview-size);
  }

  .minting-page .links .btn-inline {
    font-size: 15px;
  }

  .collection-info .collection-info-inner {
    padding-left: 70px;
    padding-right: 70px;
    box-sizing: border-box;
  }

  .minting-page #content {
    padding-left: 0px;
    padding-right: 0px;
  }

  .minting-page #demo {
    margin-top: 37px;
    margin-bottom: 51px;
  }

  .minting-page #secret-level {
    margin-top: 150px;
    margin-bottom: 40px;
  }
}