/* ANIMATION (DECLARATION) */
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}

@keyframes idleMovementHead {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

@keyframes idleMovementNotebook {
  0% {
      transform: rotate(4deg);}
  100% {
      transform: rotate(-2.5deg);}
}

@keyframes idleMovementPhone {
  0% {
      transform: rotate(-5deg);}
  100% {
      transform: rotate(8deg);}
}

@keyframes idleTitleMovement {
  0% {
      transform: rotate(-7deg);}
  100% {
      transform: rotate(7deg);}
}

@keyframes letterSizeAnimation {
  0% {
    font-size: 80%}
  100% {
    font-size: 100%;}  
}

@keyframes textShadowAnimation {
    0%  {
      text-shadow: yellowgreen 0px 0px;
      filter: hue-rotate(0deg);
    }

    100% {
      text-shadow: red 4px 4px;
      filter: hue-rotate(360deg);
    }
}

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
      -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
      -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
      -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
      -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
      -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
      -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
      -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
      -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
      -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
      -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
      -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
      -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
      -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
      -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
      -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
      -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
      -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
      -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
  }
}

/* ANIMATION (DEFINITION) */
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 2s infinite;
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  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)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt {
  animation: textShadow 1.6s infinite;
}

.iddleAnimatedHead {
  /* Animation controls */
  animation-name: idleMovementHead;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.iddleAnimatedNotebook {
  /* Animation controls */
  animation-name: idleMovementNotebook;
  animation-duration: 8s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.iddleAnimatedPhone {
  /* Animation controls */
  animation-name: idleMovementPhone;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.letterSizeAnimation {
  animation-name: letterSizeAnimation;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.animatedTitleLetters {
  /* Animation controls */
  animation-name: idleTitleMovement;
  animation-duration: 8s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.animatedTitleLetters-slow {
  /* Animation controls */
  animation-name: idleTitleMovement;
  animation-duration: 8s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}


.letterShadowAnimated {
  /* Animation controls */
  animation-name: textShadowAnimation;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

/* IDs */
#caller {
    background-image: url("media/images/GIFs/caller-bg.gif");
    background-repeat:repeat;
    height: 100%;
    width: 100%;
    position:absolute;
    z-index: -1;
}

#credits {
  background-image: url("media/images/Static/credits-background.jpg");
  background-size: cover;
  height: 100%;
  width: 100%;
}

#dialogue-element {
  font-family: "Press Start 2P", cursive;
  text-align: left;
  color: white;
  font-size: 135%;
  transform: skewX(-10deg);
}

#keypad {
  padding-left: 20%;
  padding-top: 20%;
  width: auto;
}

#mainMenu {
  background-image: url("media/images/Static/main-menu.jpg");
  background-size: cover;
  height: 100%;
  width: 100%;
}

#mainMenuSubtitle {
  font-family: 'Pacifico', cursive;
  color: #FFEE2E;
  font-size: 1000%;
  
}

#mainMenuTitle {
  font-family: 'Bungee Inline', cursive;
  color: #48FF5F;
  font-size: 1000%;

}

#mainMenu .container-fluid {
  position: relative;
margin-top: 5%;}

#marker {
  color: rgb(88, 255, 211);
  overflow-y: scroll;
  height: 8%;
  width: 100%;
  margin-top: 15%;
  margin-bottom: 0;
  font-family: 'Pacifico', cursive;
}

#mobile-image {
  padding-top: 40%;
  margin-left: 20%;
  width: 100%;
  height: 100%;
}

#notebook-container {
  padding-top: 7%;
  padding-right: 10%;
}

#notebook-text {
  position: absolute;
  width: 54%;
  height: 75%;
  left: 23%;
  top: 12%;
  font-size: 140%;
  line-break: anywhere;
  text-align: left;
  line-height: 1.3;
  font-family: 'Rock Salt', cursive;
  overflow-y: scroll;

}

#number-note {
  z-index: 1;
  bottom: 10rem;
}


#pickUp-icon {
  width: 75%;
  margin-left: 40%;
  margin-top: 220%;
  border-radius: 100%;
  border-style: solid;
  border-width: 0.4rem;
  border-color: black;
}

#piece-paper {
  width: 80%;
  z-index: 0;
}

#receiver {
  background-color: transparent;
  height: 100%;
  position: absolute;
}

/* CLASSES */
.background-green {
  background-color: #008040;
}

.background-white {
  background-color: white;
}

.bottom-border {
  border-bottom-width: 1rem;
}

.character-img {
  margin-top: 2rem;
  width: 45%;
}

.character-img-box {
  width: 101.99%;
  position: relative;
  z-index: 1;
}

.creditElement {
  font-size: 180%;
  color: greenyellow;
  font-family: 'Quattrocento', serif;
}

.creditTitle{
  margin-top: 10%;
  font-family: "Press Start 2P", cursive;
  color: white;
  font-size: 140%;
}

.dialogue-box::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;

  z-index: -1;
  background: black;
  width: 104%;
  height: 100%;
  transform-origin: bottom;

  -ms-transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  transform: skewX(-10deg);

}

.dialogue-box {
  
  background-color: black;
  z-index: 5;
  position: relative;

  padding-left: 3rem;
  padding-top: 3rem;
  right: 0.5rem;
  -ms-transform: skewX(10deg);
  -webkit-transform: skewX(10deg);
  transform: skewX(10deg);
}

.hide {
  display: none;
}

.keypad-btn {
  border-style: solid;
  border-color: black;
  padding: 0;
}

.keypad-btn-number {
  background-color: rgb(48, 48, 48);
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-family: 'Quattrocento', serif;
}

.left-border {
  border-left-width: 1rem;
}

.menuButton {
  color: fuchsia;
  margin-top: 5%;
  font-size: 500%;
}

.pressed {
  box-shadow: 0 0 8px 8px white;
}

.receiver-container::after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background: inherit;
  transform-origin: bottom right;
  -ms-transform: skewX(10deg);
  -webkit-transform: skewX(10deg);
  transform: skewX(10deg);
  
  border-width: 0 0 0 2em;
  border-style: double;
  border-color: black;
}

.receiver-container {
  background-color: white;
  position: relative;
  padding: -1;
}

.right-border {
  border-right-width: 1rem;
}

.top-border {
  border-top-width: 1rem;
}

/* GENERAL */
h1 {
  color: white;
}