body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	margin: 10px;
	font-family: Helvetica, sans-serif;
	font-size: 3.5vmin;
	text-align: center;
	color: black;
	background: ivory;
	overflow: hidden;
}
.wrap {
	display: grid;
	grid: auto / repeat(8, 1fr);
	gap: 0.5vmin;
	margin: auto;
	perspective: 800px;
}
.box {
	position: relative;
	width: 8vmin;
	height: 8vmin;
	border-radius: 6px;
	box-shadow: 5px 5px 15px -5px rgba(67 67 67 / 0.3);
	display: inline-block;
	text-align: center;
	color: #333;
	cursor: pointer;
	transform-style: preserve-3d;
}

p {
	margin-top: 2em;
}

button {
	padding: 0.45rem 1rem;
	background: gainsboro;
	outline: 0;
	border: 1px solid #434343;
	border-radius: 10px;
	font-size: 2vmin;
	color: #434343;
	cursor: pointer;
}

img {
	position: absolute;
	top: 40%;
	left: 57%;
	width: 30vmin;
	z-index: 1;
}

/* style the boxes */
.one {
	background: linear-gradient(
		180deg,
		rgb(50.588% 99.608% 91.373%) 0%,
		rgb(51.029% 99.065% 91.455%) 6.25%,
		rgb(52.335% 97.459% 91.701%) 12.5%,
		rgb(54.455% 94.849% 92.1%) 18.75%,
		rgb(57.308% 91.338% 92.636%) 25%,
		rgb(60.784% 87.059% 93.29%) 31.25%,
		rgb(64.75% 82.178% 94.035%) 37.5%,
		rgb(69.054% 76.881% 94.845%) 43.75%,
		rgb(73.529% 71.373% 95.686%) 50%,
		rgb(78.005% 65.864% 96.528%) 56.25%,
		rgb(82.309% 60.567% 97.337%) 62.5%,
		rgb(86.275% 55.686% 98.083%) 68.75%,
		rgb(89.751% 51.407% 98.737%) 75%,
		rgb(92.604% 47.896% 99.273%) 81.25%,
		rgb(94.724% 45.287% 99.672%) 87.5%,
		rgb(96.03% 43.68% 99.917%) 93.75%,
		rgb(96.471% 43.137% 100%) 100%
	);
}
.one:nth-child(odd) {
	background: linear-gradient(
		0deg,
		rgb(50.588% 99.608% 91.373%) 0%,
		rgb(51.029% 99.065% 91.455%) 6.25%,
		rgb(52.335% 97.459% 91.701%) 12.5%,
		rgb(54.455% 94.849% 92.1%) 18.75%,
		rgb(57.308% 91.338% 92.636%) 25%,
		rgb(60.784% 87.059% 93.29%) 31.25%,
		rgb(64.75% 82.178% 94.035%) 37.5%,
		rgb(69.054% 76.881% 94.845%) 43.75%,
		rgb(73.529% 71.373% 95.686%) 50%,
		rgb(78.005% 65.864% 96.528%) 56.25%,
		rgb(82.309% 60.567% 97.337%) 62.5%,
		rgb(86.275% 55.686% 98.083%) 68.75%,
		rgb(89.751% 51.407% 98.737%) 75%,
		rgb(92.604% 47.896% 99.273%) 81.25%,
		rgb(94.724% 45.287% 99.672%) 87.5%,
		rgb(96.03% 43.68% 99.917%) 93.75%,
		rgb(96.471% 43.137% 100%) 100%
	);
}
.two {
	background: linear-gradient(
		0deg,
		rgb(12.549% 99.608% 0.784%) 0%,
		rgb(12.474% 98.707% 1.738%) 6.25%,
		rgb(12.251% 96.041% 4.56%) 12.5%,
		rgb(11.888% 91.71% 9.145%) 18.75%,
		rgb(11.4% 85.882% 15.314%) 25%,
		rgb(10.806% 78.781% 22.832%) 31.25%,
		rgb(10.128% 70.679% 31.408%) 37.5%,
		rgb(9.393% 61.888% 40.714%) 43.75%,
		rgb(8.627% 52.745% 50.392%) 50%,
		rgb(7.862% 43.603% 60.07%) 56.25%,
		rgb(7.127% 34.812% 69.376%) 62.5%,
		rgb(6.449% 26.71% 77.953%) 68.75%,
		rgb(5.854% 19.608% 85.47%) 75%,
		rgb(5.367% 13.78% 91.64%) 81.25%,
		rgb(5.004% 9.45% 96.224%) 87.5%,
		rgb(4.781% 6.783% 99.047%) 93.75%,
		rgb(4.706% 5.882% 100%) 100%
	);
}
.two:nth-child(even) {
	background: linear-gradient(
		40deg,
		rgb(12.549% 99.608% 0.784%) 0%,
		rgb(12.474% 98.707% 1.738%) 6.25%,
		rgb(12.251% 96.041% 4.56%) 12.5%,
		rgb(11.888% 91.71% 9.145%) 18.75%,
		rgb(11.4% 85.882% 15.314%) 25%,
		rgb(10.806% 78.781% 22.832%) 31.25%,
		rgb(10.128% 70.679% 31.408%) 37.5%,
		rgb(9.393% 61.888% 40.714%) 43.75%,
		rgb(8.627% 52.745% 50.392%) 50%,
		rgb(7.862% 43.603% 60.07%) 56.25%,
		rgb(7.127% 34.812% 69.376%) 62.5%,
		rgb(6.449% 26.71% 77.953%) 68.75%,
		rgb(5.854% 19.608% 85.47%) 75%,
		rgb(5.367% 13.78% 91.64%) 81.25%,
		rgb(5.004% 9.45% 96.224%) 87.5%,
		rgb(4.781% 6.783% 99.047%) 93.75%,
		rgb(4.706% 5.882% 100%) 100%
	);
}
.three {
	background: linear-gradient(
		-45deg,
		rgb(99.608% 72.941% 64.314%) 0%,
		rgb(99.612% 72.429% 63.884%) 6.25%,
		rgb(99.623% 70.911% 62.612%) 12.5%,
		rgb(99.641% 68.447% 60.547%) 18.75%,
		rgb(99.665% 65.131% 57.767%) 25%,
		rgb(99.695% 61.09% 54.379%) 31.25%,
		rgb(99.729% 56.479% 50.515%) 37.5%,
		rgb(99.766% 51.477% 46.322%) 43.75%,
		rgb(99.804% 46.275% 41.961%) 50%,
		rgb(99.842% 41.072% 37.6%) 56.25%,
		rgb(99.879% 36.07% 33.407%) 62.5%,
		rgb(99.913% 31.459% 29.542%) 68.75%,
		rgb(99.943% 27.418% 26.155%) 75%,
		rgb(99.967% 24.102% 23.375%) 81.25%,
		rgb(99.985% 21.638% 21.309%) 87.5%,
		rgb(99.996% 20.12% 20.037%) 93.75%,
		rgb(100% 19.608% 19.608%) 100%
	);
}
.three:nth-child(even) {
	background: linear-gradient(
		-45deg,
		rgb(99.608% 72.941% 64.314%) 0%,
		rgb(99.612% 72.429% 63.884%) 6.25%,
		rgb(99.623% 70.911% 62.612%) 12.5%,
		rgb(99.641% 68.447% 60.547%) 18.75%,
		rgb(99.665% 65.131% 57.767%) 25%,
		rgb(99.695% 61.09% 54.379%) 31.25%,
		rgb(99.729% 56.479% 50.515%) 37.5%,
		rgb(99.766% 51.477% 46.322%) 43.75%,
		rgb(99.804% 46.275% 41.961%) 50%,
		rgb(99.842% 41.072% 37.6%) 56.25%,
		rgb(99.879% 36.07% 33.407%) 62.5%,
		rgb(99.913% 31.459% 29.542%) 68.75%,
		rgb(99.943% 27.418% 26.155%) 75%,
		rgb(99.967% 24.102% 23.375%) 81.25%,
		rgb(99.985% 21.638% 21.309%) 87.5%,
		rgb(99.996% 20.12% 20.037%) 93.75%,
		rgb(100% 19.608% 19.608%) 100%
	);
}
.four {
	background: linear-gradient(
		-45deg,
		rgb(13.333% 54.51% 13.333%) 0%,
		rgb(13.672% 54.626% 13.281%) 6.25%,
		rgb(14.688% 54.975% 13.125%) 12.5%,
		rgb(16.38% 55.558% 12.865%) 18.75%,
		rgb(18.75% 56.373% 12.5%) 25%,
		rgb(21.797% 57.42% 12.031%) 31.25%,
		rgb(25.521% 58.701% 11.458%) 37.5%,
		rgb(29.922% 60.214% 10.781%) 43.75%,
		rgb(35% 61.961% 10%) 50%,
		rgb(40.755% 63.94% 9.115%) 56.25%,
		rgb(47.188% 66.152% 8.125%) 62.5%,
		rgb(54.297% 68.597% 7.031%) 68.75%,
		rgb(62.083% 71.275% 5.833%) 75%,
		rgb(70.547% 74.185% 4.531%) 81.25%,
		rgb(79.688% 77.328% 3.125%) 87.5%,
		rgb(89.505% 80.705% 1.615%) 93.75%,
		rgb(100% 84.314% 0%) 100%
	);
}
.four:nth-child(odd) {
	background: linear-gradient(
		45deg,
		rgb(13.333% 54.51% 13.333%) 0%,
		rgb(13.672% 54.626% 13.281%) 6.25%,
		rgb(14.688% 54.975% 13.125%) 12.5%,
		rgb(16.38% 55.558% 12.865%) 18.75%,
		rgb(18.75% 56.373% 12.5%) 25%,
		rgb(21.797% 57.42% 12.031%) 31.25%,
		rgb(25.521% 58.701% 11.458%) 37.5%,
		rgb(29.922% 60.214% 10.781%) 43.75%,
		rgb(35% 61.961% 10%) 50%,
		rgb(40.755% 63.94% 9.115%) 56.25%,
		rgb(47.188% 66.152% 8.125%) 62.5%,
		rgb(54.297% 68.597% 7.031%) 68.75%,
		rgb(62.083% 71.275% 5.833%) 75%,
		rgb(70.547% 74.185% 4.531%) 81.25%,
		rgb(79.688% 77.328% 3.125%) 87.5%,
		rgb(89.505% 80.705% 1.615%) 93.75%,
		rgb(100% 84.314% 0%) 100%
	);
}
.five {
	background: linear-gradient(
		-45deg,
		rgb(11.765% 56.471% 100%) 0%,
		rgb(11.719% 56.25% 100%) 6.25%,
		rgb(11.581% 55.588% 100%) 12.5%,
		rgb(11.351% 54.485% 100%) 18.75%,
		rgb(11.029% 52.941% 100%) 25%,
		rgb(10.616% 50.956% 100%) 31.25%,
		rgb(10.11% 48.529% 100%) 37.5%,
		rgb(9.513% 45.662% 100%) 43.75%,
		rgb(8.824% 42.353% 100%) 50%,
		rgb(8.042% 38.603% 100%) 56.25%,
		rgb(7.169% 34.412% 100%) 62.5%,
		rgb(6.204% 29.779% 100%) 68.75%,
		rgb(5.147% 24.706% 100%) 75%,
		rgb(3.998% 19.191% 100%) 81.25%,
		rgb(2.757% 13.235% 100%) 87.5%,
		rgb(1.425% 6.838% 100%) 93.75%,
		rgb(0% 0% 100%) 100%
	);
}
.five:nth-child(odd) {
	background: linear-gradient(
		45deg,
		rgb(11.765% 56.471% 100%) 0%,
		rgb(11.719% 56.25% 100%) 6.25%,
		rgb(11.581% 55.588% 100%) 12.5%,
		rgb(11.351% 54.485% 100%) 18.75%,
		rgb(11.029% 52.941% 100%) 25%,
		rgb(10.616% 50.956% 100%) 31.25%,
		rgb(10.11% 48.529% 100%) 37.5%,
		rgb(9.513% 45.662% 100%) 43.75%,
		rgb(8.824% 42.353% 100%) 50%,
		rgb(8.042% 38.603% 100%) 56.25%,
		rgb(7.169% 34.412% 100%) 62.5%,
		rgb(6.204% 29.779% 100%) 68.75%,
		rgb(5.147% 24.706% 100%) 75%,
		rgb(3.998% 19.191% 100%) 81.25%,
		rgb(2.757% 13.235% 100%) 87.5%,
		rgb(1.425% 6.838% 100%) 93.75%,
		rgb(0% 0% 100%) 100%
	);
}
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  font-family: acumin-pro, system-ui, sans-serif;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: 14px;
  background-color: #f4f4f4;
  align-items: start;
  min-height: 100vh;
}

.footer {
  display: flex;
  flex-flow: row wrap;
  padding: 30px 30px 20px 30px;
  color: #2f2f2f;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}

.footer > * {
  flex:  1 100%;
}

.footer__addr {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer__logo {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1.5rem;
}

.footer__addr h2 {
  margin-top: 1.3em;
  font-size: 15px;
  font-weight: 400;
}

.nav__title {
  font-weight: 400;
  font-size: 15px;
}

.footer address {
  font-style: normal;
  color: #999;
}

.footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  max-width: max-content;
  background-color: rgb(33, 33, 33, 0.07);
  border-radius: 100px;
  color: #2f2f2f;
  line-height: 0;
  margin: 0.6em 0;
  font-size: 1rem;
  padding: 0 1.3em;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
}

.footer__nav {
  display: flex;
	flex-flow: row wrap;
}

.footer__nav > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.nav__ul a {
  color: #999;
}

.nav__ul--extra {
  column-count: 2;
  column-gap: 1.25em;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  color: #999;
}
  
.legal__links {
  display: flex;
  align-items: center;
}

.heart {
  color: #2f2f2f;
}

@media screen and (min-width: 24.375em) {
  .legal .legal__links {
    margin-left: auto;
  }
}

@media screen and (min-width: 40.375em) {
  .footer__nav > * {
    flex: 1;
  }
  
  .nav__item--extra {
    flex-grow: 2;
  }
  
  .footer__addr {
    flex: 1 0px;
  }
  
  .footer__nav {
    flex: 2 0px;
  }
}