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

:root {
  font-size: 62.5%;

  --font: #34355B;
}

body {
  font-size: 1.6rem;
  font-family: 'Montserrat', sans-serif;

  background: linear-gradient(45deg, #190361 0%, #bb00ff6f 100%);
  animation: gradient 10s ease infinite;
  background-size: 200% 200%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

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


main {
  background-color: #fff;

  width: min(42.8rem);
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.8);
  border-radius: .5rem;

  padding: 4.8rem 6.4rem;

  text-align: center;
}

.hide {
  display: none;
}

/* SCREEN 1 */
.btnShowMessage {
  cursor: pointer;
}

.btnShowMessage:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  
  25% { transform: translate(-3px, 0px) rotate(1deg); }
  
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  
  75% { transform: translate(3px, 1px) rotate(-1deg); }
  
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


main h1 {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--font);

  margin-bottom: 1.4rem;

}

main p {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--font);

  margin-bottom: 2rem;
}

main img {
  height: 200px;
}

/* SCREEN 2 */
.messageContainer {
  background: #E4EDF1;
  box-shadow: 2px 2px 2px rgba(85, 85, 85, 0.5);

  animation: messageAnimation 1s ease-in 0s 1 normal forwards;

}

@keyframes messageAnimation {
	0% {
		transform: scale(0.1);
		transform-origin: 50% 100%;
	}

	100% { 
		transform: scale(1);
		transform-origin: 50% 100%;
	}
}

.messageContainer p {
  font-family: 'Dancing Script', cursive;
  font-size: 2.4rem;
  line-height: 2.9rem;
  text-align: center;
  color: #000;

  padding: 1rem;
}

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

  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;

  padding: 1.6rem;

  cursor: pointer;
}