@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Bangers&family=Graduate&family=Major+Mono+Display&family=Share+Tech+Mono&family=VT323&display=swap');

body {
  margin: 0;
  overflow: hidden;
}

.am-container {
   width: 100vw;
   height: 100vh;
   margin: 0 auto;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
   transition: 0.6s ease-in-out;
   background: url("images/bg.jpg");
   background-size: cover;
   background-position: top;
   background-repeat: no-repeat;
   background-color:white;
 }

 .white {
/*   background-image: none !important; */
  transition: 5.5s ease;
 }
text {
  font-family: 'Bangers', sans-serif;
  transition: 0.6s ease-in-out;
  z-index: 9;
  font-size: 2em;
 /*  display: block;
  position: relative;
  top: 12vh;
  left: 23vw;
  margin: 0; */
  display: none; 
  fill: #9d00f8;
  animation: filter-animation 2s infinite;
}

 .flash{
  transition: 0.8s ease-in;
  opacity: .7;
  background: white;
 }

 .cloud1 {
  position: absolute;
  /* min-height: 20vh; */
   position: fixed; 
  /* height: 50vh; */
  /* width: 100vw; */
  top: 10%;
  left: 0;
  right: 0;
  /* transform: scale(4); */
  margin: 0 auto;
 }
 
 .cloud1 svg path {
  fill: white;
}

.wrap {
  width: 100%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: grayscale(1);
  -webkit-backdrop-filter: grayscale(1);
  font-size: 2em;
  white-space: nowrap;
}

input {
  border: 1px solid yellow;
  vertical-align: middle;
  border: none;
  font-size: 3rem;
  filter: hue-rotate(90deg);
}

input:focus {
  outline: none;
}

label {
  padding-left: 30%; 
  font-size: 2em;
}

input, label {
  color: #e8ffd8;
  background: transparent;
  cursor: pointer;
  outline: none;
  font-family: 'Share Tech Mono', monospace;
  animation: filter-animation 4s infinite;
  white-space: nowrap; 
  width: 50%;
}

.jughead {
  width: 100%;
  top: 5%;
  right: 0;
  position: absolute;
  transition: 0.5s ease;
}

.sway {
  transform-origin: 50% 100% 0;
  animation: sway 8s linear infinite alternate-reverse;
}

@media (max-width: 600px) {
  label {
    padding-left: 1%; 
    font-size: 1.5em;
  }
}


@keyframes sway {
  0%, 100%{ 
    transform: rotate(-1deg);
  }
  50% { 
    transform: rotate(1deg); 
  }
}


@keyframes filter-animation {
  0% {
    filter: hue-rotate(0deg);
  }
  
  50% {
    filter: hue-rotate(100deg);
  }
  
  100% {
    filter: hue-rotate(0deg);
  }
}

 @media screen and (min-width: 900px) { 
.jughead {
  height: 42vh;
 }
 }
@media screen and (max-width: 900px) {
  .jughead {
     height: 60vw; 
    min-height: 20vh; 
  }
  .cloud1 svg {
    height: 60vh;
    width: 100vw;
    transform: scale(1.5);
    position: fixed;
}

}

@keyframes cloud-animation {
  0% {
    transform: scale(0.5) translateX(-50px) translateY(20px) !important;
  }
  
  50% {
    filter: hue-rotate(100deg);
  }
  
  100% {
    transform: scale(1.5) translateX(-50px) translateY(20px) !important;
  }
}