* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

:root {
  font-size: 62.5%;
  --color-primary: #34355B;
}

body {
  background: linear-gradient(45deg, #190361 0%, #BB00FF 100%) no-repeat;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

.hide {
  display: none;
}

main {
  background-color: #FFFFFF;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.8);
  border-radius: 0.5rem;

  padding: 4.8rem 6.4rem 6.4rem;
  width: min(42.8rem, 90%);

  margin-top: -12rem;

  text-align: center;
}

main h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--color-primary);

  max-width: 25rem;
  margin: 0 auto 1.4rem;
}

main p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}

.screen1 img {
  cursor: pointer;
}

.screen1 img:hover {
  animation: shakeCookie .3s infinite;
}

.screen2 p {
  font-family: 'Dancing Script', cursive;
  font-size: 2.4rem;
  line-height: 2.9rem;

  padding: 1rem;
  background: #E4EDF1;
  box-shadow: 2px 2px 2px rgba(85, 85, 85, 0.5);

  animation: showLuke 1.8s;
}

.screen2 img {
  margin-bottom: 2rem;
}

.screen2 button {
  background: #FF9500;
  border-radius: 0.4rem;
  border: none;

  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #FFFFFF;

  padding: 1.6rem;
  cursor: pointer;
}

@keyframes shakeCookie {
  0% {
    transform: translate(0px, 2px);
  }

  25% {
    transform: translate(0px, -2px);
  }

  50% {
    transform: translate(2px, 0px);
  }

  75% {
    transform: translate(-2px, 0px);
  }

  100% {
    transform: translate(0px, 2px);
  }
}

@keyframes showLuke {
  0% {
    transform: translateY(200px) scale(1%, 1%);
  }

  100% {
    transform: translateY(0px) scale(100%, 100%);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}