@import url(https://fonts.googleapis.com/css?family=Raleway);
@import "./normalize.css";

body {
  font-family: 'Raleway', sans-serif;
  background-color: rgb(250, 157, 157);
  color: white;
  overflow: hidden;
  /* background image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
}

video {
  display: none;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.display-middle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transition: opacity 0.5s ease-in-out;
}

.display-middle h1{
  font-size: 3em;
  filter: drop-shadow(0px 0px 20px black);
}

.display-middle .m404{
  margin: 0 auto;
  text-align: center;
  font-size: 6em;
}

.display-middle p{
  margin-top: 0.1em;
  margin-bottom: 1.5em;
  text-align: center;
  font-size: 2em;
}

.hidden {
  opacity: 0;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

a.redirect:link {
  color: white;
  text-decoration: none;
  font-weight: 900;
  background-color: rgb(223, 83, 83);
}

a.redirect:visited {
  color: white;
  text-decoration: none;
  font-weight: 900;
  background-color: rgb(223, 83, 83);
}

a.redirect:hover {
  color: white;
  text-decoration: underline;
  font-weight: 900;
}

a.redirect:active {
  color: white;
  text-decoration: underline;
  font-weight: 900;
}

.gift-image img {
  height: 18vh;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gift-image img:hover {
  transform: scale(1.1);
}

.shaking {
  animation: shake-rotate 4.0s ease infinite;
}

@keyframes shake-rotate {
  0% {
      transform: rotate(0deg);
  }
  2% {
      transform: rotate(1.5deg);
  }
  4% {
      transform: rotate(-1.5deg);
  }
  6% {
      transform: rotate(1.5deg);
  }
  8% {
      transform: rotate(-1.5deg);
  }
  10% {
      transform: rotate(0deg);
  }
  20% {
      transform: rotate(0deg);
  }
  22% {
      transform: rotate(1.5deg);
  }
  24% {
      transform: rotate(-1.5deg);
  }
  26% {
      transform: rotate(1.5deg);
  }
  28% {
      transform: rotate(-1.5deg);
  }
  30% {
      transform: rotate(0deg);
  }
}