#player-size {
  /* comment below line for responsive 16:9 full screen */
  /*   width: 640px; */
  /* only need to specify width since 16:9 ratio is  
     preserved / automatically applied */
}

body {
  margin: 0 auto;
  font-family: 'MuseoModerno', sans-serif;
  color: whitesmoke;
  background-color: black;
  cursor: crosshair;

}

#cropping-div {
  /*     pointer-events: none; */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* vertical */
  justify-content: center;
  /* horizontal */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#text-block * {
  margin: 0;

}

#text-block {
  padding-bottom: 5rem
}

#cropping-div video {
  /*   position:absolute; */
  height: max(100vh, calc(100vw * 3/4));
  width: max(100vw, calc(100vh * 4/3));
  filter: blur(16px);
}

#main {
  pointer-events: none;

  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  text-align: center;
  /* display: none; */
}

/* #main2{
  height: 100%;
  display: flex;
   flex-direction: vertical;
  align-items:  space-around; 
  text-align: center;
  justify-content: space-around; 
}
 */
.centerer {}

.blink_me {
  animation: blinker 4s linear;
}

/* @keyframes blinker 
  0% {
    text-shadow: none;
  }
  100% {
    text-shadow: 2px 0px var(--shadow-primary);
  }
} */

@keyframes blinker {
  0% {
    box-shadow: none;
  }

  100% {
    box-shadow: 0px 2px var(--shadow-primary);
  }
}


h1 {
  font-weight: 600;
  font-size: 5rem;
  --shadow-primary: #04459a;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --shadow-primary-hue: 180;
  /*   text-shadow: 2px 1px white; */
  /*   animation: 1s ease-out 2s 1 blinker forwards; */
  color: white;
}

h2 {
  font-weight: 300;

}

input {
  font-family: 'Orbitron', sans-serif;
  color: black;
  background-color: white;
  font-weight: medium;
  border-radius: 1rem;
  padding: .6rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.5rem;


}

@keyframes blinker2 {
  50% {
    color: var(--shadow-primary);
    border-color: var(--shadow-primary);
  }
}

@keyframes blinker3 {
  50% {
    border-color: var(--shadow-primary);
  }
}

#email {
  --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
  --shadow-primary-hue: 180;
  /*     animation: blinker3 2s linear infinite; */
  /*   animation: blinker2 2s linear infinite; */
  border: 0;
  /*   background-opacity: 60%;

/*     filter: blur(4px); */
  /*   opacity: .5; */
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);


}

#submit {
  --shadow-primary: #393737;
  --shadow-primary-hue: 180;
  /*   background-color: var(--shadow-primary); */
  background-color: rgba(255, 255, 255, 0.7);
  /*   background-color: black; */
  border: 0;
  animation: 1s ease-out 2s 1 blinker forwards;
  color: #000000;
  font-weight: bold;


}

form {
  pointer-events: auto;
}

form #submit {
  cursor: crosshair;
}

#submit:hover {
  cursor: crosshair;
  background-color: #126565;
}


@media screen and (max-width: 500px) {
  h1 {
    font-size: 3rem !important;
  }

  #email {
    margin-top: 2rem;
    width: 15rem;
  }

  #submit {
    margin-top: .5rem;
  }

  #cropping-div iframe {
    height: 100vh !important;
    width: calc(100vh * 4/3) !important;
  }

  #main {
    /*     margin: 1rem; */
  }
}


#footer {
  width: 100%;
  display: flex;
  grid-row: span 2;
  flex-direction: column-reverse;
  margin-bottom: 2rem;
}

#footer a {
  /*     text-decoration: none; */
  color: white;
}