/* Color Palette */
:root {
  --background: #c8e6c9;
  --yellow: #f9a734;
  --dark-yellow: #fb8b24;
  --green: #36964c;
  --dark-green: #286e38;
  --teal: #036564;
  --dark-teal: #033649;
}

/* Animation */
@keyframes slideUp {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 0 0;
  }
}

/* Background styles */
.pineapple {
  background: radial-gradient(circle closest-side at 50px 50px, var(--dark-yellow) 3px, transparent 0), radial-gradient(circle closest-side at 40px 60px, var(--dark-yellow) 3px, transparent 0), radial-gradient(circle closest-side at 60px 60px, var(--dark-yellow) 3px, transparent 0), radial-gradient(circle closest-side at 50px 70px, var(--dark-yellow) 3px, transparent 0), radial-gradient(circle closest-side at 150px 165px, var(--dark-yellow) 3px, transparent 0), radial-gradient(circle closest-side at 140px 175px, var(--dark-yellow) 3px, transparent 0), radial-gradient(circle closest-side at 160px 175px, var(--dark-yellow) 3px, transparent 0), radial-gradient(circle closest-side at 150px 185px, var(--dark-yellow) 3px, transparent 0), radial-gradient(ellipse closest-side at 50px 60px, var(--yellow) 18px, transparent 0), radial-gradient(ellipse closest-side at 150px 175px, var(--yellow) 18px, transparent 0), radial-gradient(circle closest-side at 30px 40px, var(--background) 15px, transparent 0), radial-gradient(circle closest-side at 40px 35px, var(--green) 15px, transparent 0), radial-gradient(circle closest-side at 70px 40px, var(--background) 15px, transparent 0), radial-gradient(circle closest-side at 60px 35px, var(--dark-green) 15px, transparent 0), radial-gradient(circle closest-side at 130px 155px, var(--background) 15px, transparent 0), radial-gradient(circle closest-side at 140px 150px, var(--green) 15px, transparent 0), radial-gradient(circle at 170px 155px, var(--background) 15px, transparent 0), radial-gradient(circle at 160px 150px, var(--dark-green) 15px, transparent 0);
  background-color: var(--background);
  background-size: 180px 210px;
  animation: slideUp 0.5s cubic-bezier(0.61, -0.64, 0.58, 1.46) forwards;
}

.diamonds {
  background:
    /*shape*/
     linear-gradient(115deg, transparent 89%, #e8ddcb 0) -128px -96px,
     linear-gradient(-115deg, transparent 89%, #cdb380 0) 22px -96px,
     linear-gradient(-115deg, #036564 11%, transparent 0) -128px 54px,
     linear-gradient(115deg, #033649 11%, transparent 0) 22px 54px,

       /*shape*/
     linear-gradient(-25deg, #e8ddcb 11%, transparent 0) -128px -22px,
     linear-gradient(25deg, transparent 89%, #cdb380 0) -128px 128px,
     linear-gradient(25deg, #036564 11%, transparent 0) 22px -22px,
     linear-gradient(-25deg, transparent 89%, #033649 0) 22px 128px,
       /*shape*/
     linear-gradient(-25deg, #e8ddcb 11%, transparent 0) -53px -96px,
     linear-gradient(25deg, transparent 89%, #cdb380 0) -53px 54px,
     linear-gradient(25deg, #036564 11%, transparent 0) 97px -96px,
     linear-gradient(-25deg, transparent 89%, #033649 0) 97px 54px,
       /*shape*/
     linear-gradient(115deg, transparent 89%, #e8ddcb  0) -53px -21px,
     linear-gradient(-115deg, #cdb380 11%, transparent 0) -53px 129px,
     linear-gradient(-115deg, transparent 89%, #036564 0) 97px -21px,
     linear-gradient(115deg, #033649 11%, transparent 0) 97px 129px;


  background-color: var(--background);
  background-size: 150px 150px;
  animation: slideUp 0.5s cubic-bezier(0.61, -0.64, 0.58, 1.46) forwards;
}

.noise {
  background: repeating-conic-gradient(
     at 50% 45%,
     var(--dark-teal) 10deg,
     var(--background) 15deg
  );
  background-size: 29px 29px;
  font-family: helvetica;
  text-shadow: 7px 0 0 coral,
  -7px 0 0 var(--background);
  animation: slideUp 0.5s cubic-bezier(0.61, -0.64, 0.58, 1.46) forwards;
}
.noise:after {
  content: '';
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  z-index: 3;
  background: repeating-conic-gradient(
     at 95% 5%,
     rgba(3, 54, 73, 0.2) 15deg,
     rgba(3, 54, 73, 0.2) 17deg,
     rgba(238, 212, 162, 0.27) 27.9deg,
     rgba(238, 212, 162, 0.27) 45deg,
     rgba(3, 54, 73, 0.2) 47deg,
     rgba(238, 212, 162, 0.27) 47.9deg
  );
  animation: slideUp 0.5s cubic-bezier(0.61, -0.64, 0.58, 1.46) forwards;
}