@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #333;
  color: #fff;
  line-height: 1.6;
}


.main .center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.main .center p {
  margin: auto 20% 64px;
}

.main button {
  border: 0px;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  padding: 13px 15px;
  border-radius: 50%;
  outline: none;
}

.main button#start:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: intensify 0.75s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.main button#start {
  position: absolute;
  left: 50%;
}


.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  visibility: hidden;
  background: url('./assets/placeholder.svg') no-repeat center center/cover;
}

.slide.current {
  opacity: 1;
  visibility: visible;
}

.slide .content {
  position: absolute;
  bottom: 70px;
  left: -600px;
  opacity: 0;
  width: auto;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  padding: 35px;
}

.slide .content h1 {
  margin-bottom: -12px;
}

.slide .content p.subtitle {
  margin-bottom: 10px;
}

.slide.current .content {
  opacity: 1;
  transform: translateX(600px);
}

.buttons button#next {
  position: absolute;
  top: 50%;
  right: 15px;
  visibility: hidden;
}

.buttons button#prev {
  position: absolute;
  top: 50%;
  left: 15px;
  visibility: hidden;
}

.buttons button {
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  padding: 13px 15px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #fff;
  color: #333;
}

@media(max-width: 500px) {
  .slide .content {
    bottom: -300px;
    left: 0;
    width: 100%;
  }

  .slide.current .content {
    transform: translateY(-300px);
  }

  .buttons button {
    opacity: 0;
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes intensify {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  4% { transform: translate(-1px, -2px) rotate(-1deg); }
  8% { transform: translate(-3px, 0px) rotate(1deg); }
  12% { transform: translate(3px, 2px) rotate(0deg); }
  16% { transform: translate(1px, -1px) rotate(1deg); }
  20% { transform: translate(-1px, 2px) rotate(-1deg); }
  24% { transform: translate(-3px, 1px) rotate(0deg); }
  28% { transform: translate(3px, 1px) rotate(-1deg); }
  32% { transform: translate(-1px, -1px) rotate(1deg); }
  36% { transform: translate(1px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -2px) rotate(-1deg); }
  
  44% { transform: translate(-2px, -3px) rotate(-1deg); }
  48% { transform: translate(-4px, 1px) rotate(1deg); }
  52% { transform: translate(4px, 3px) rotate(0deg); }
  56% { transform: translate(2px, -2px) rotate(1deg); }
  60% { transform: translate(-2px, 3px) rotate(-1deg); }
  64% { transform: translate(-4px, 2px) rotate(0deg); }
  68% { transform: translate(4px, 2px) rotate(-1deg); }
  72% { transform: translate(-2px, -2px) rotate(1deg); }
  76% { transform: translate(2px, 3px) rotate(0deg); }
  80% { transform: translate(2px, -3px) rotate(-1deg); }

  84% { transform: translate(-3px, -4px) rotate(-1deg); }
  88% { transform: translate(-5px, 2px) rotate(1deg); }
  92% { transform: translate(5px, 4px) rotate(0deg); }
  96% { transform: translate(3px, -3px) rotate(1deg); }
  100% { transform: translate(-3px, 4px) rotate(-1deg); }
}