@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  display: grid;
  height: 100vh;
  background: -webkit-gradient(linear, left top, right bottom, from(#e9e5e2), to(#d5cecb));
  background: linear-gradient(to bottom right, #e9e5e2, #d5cecb);
}

.page {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  margin: auto;
  background: #fff;

  padding: 2vw;
  box-shadow: 0 1.5vw 3vw rgba(0, 0, 0, 0.25);

}

.content {
  grid-area: 1 / 1 / 4 / 3;
  padding: 2vw;
  display: grid;
  -webkit-box-align: end;
          align-items: flex-end;
  font: 1vw/1.5 Montserrat, sans-serif;
}

.box {
  width: 100%/;
  padding-bottom: 100%;
  background: yellow;
  -webkit-animation: shape-shifter 10s ease-in-out infinite;
          animation: shape-shifter 10s ease-in-out infinite;
}

@-webkit-keyframes shape-shifter {
  0%,
	100% {
    border-radius: 100% 0 0 0;
  }
  20% {
    border-radius: 0 100% 0 0;
  }
  40% {
    border-radius: 0 0 100% 0;
  }
  60% {
    border-radius: 0 0 0 100%;
  }
  80% {
    border-radius: 100% 100% 100% 100%;
  }
}

@keyframes shape-shifter {
  0%,
	100% {
    border-radius: 100% 0 0 0;
  }
  20% {
    border-radius: 0 100% 0 0;
  }
  40% {
    border-radius: 0 0 100% 0;
  }
  60% {
    border-radius: 0 0 0 100%;
  }
  80% {
    border-radius: 100% 100% 100% 100%;
  }
}
.box-1 {
  -webkit-animation-delay: -26.4s;
          animation-delay: -26.4s;
}

.box-2 {
  -webkit-animation-delay: -33s;
          animation-delay: -33s;
}

.box-3 {
  -webkit-animation-delay: -26.4s;
          animation-delay: -26.4s;
}

.box-4 {
  -webkit-animation-delay: -23.1s;
          animation-delay: -23.1s;
}

.box-5 {
  -webkit-animation-delay: -26.4s;
          animation-delay: -26.4s;
}

.box-6 {
  -webkit-animation-delay: -3.3s;
          animation-delay: -3.3s;
}

.box-7 {
  -webkit-animation-delay: -33s;
          animation-delay: -33s;
}

.box-8 {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}

.box-9 {
  -webkit-animation-delay: -23.1s;
          animation-delay: -23.1s;
}

.box-10 {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}

.box-11 {
  -webkit-animation-delay: -23.1s;
          animation-delay: -23.1s;
}

.box-12 {
  -webkit-animation-delay: -29.7s;
          animation-delay: -29.7s;
}

.box-1 {
  grid-area: 2 / 3 / 1 / 4;
}

.box-2 {
  grid-area: 1 / 4 / 2 / 5;
}

.box-3 {
  grid-area: 1 / 5 / 2 / 6;
}

.box-4 {
  grid-area: 1 / 6 / 2 / 7;
}

.box-5 {
  grid-area: 2 / 3 / 3 / 4;
}

.box-6 {
  grid-area: 2 / 4 / 3 / 5;
}

.box-7 {
  grid-area: 2 / 5 / 3 / 6;
}

.box-8 {
  grid-area: 2 / 6 / 3 / 7;
}

.box-9 {
  grid-area: 3 / 3 / 4 / 4;
}

.box-10 {
  grid-area: 3 / 4 / 4 / 5;
}

.box-11 {
  grid-area: 3 / 5 / 4 / 6;
}

.box-12 {
  grid-area: 3 / 6 / 4 / 7;
}

.navy {
  background: #1c5066;
}

.cyan {
  background: #8fd2db;
}

.tan {
  background: #e5d7bc;
}

.pink {
  background: #f4b8b9;
}

.orange {
  background: #fa7661;
}

.green {
  background: #2d5942;
}