@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* --reset-- */

* {
  box-sizing: border-box;
}

/* .source-code-pro {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

body{
  /* background-color: #37323C; */
  margin: 0 auto;
  font-family: "Source Code Pro", monospace;
  text-align: center;
}

/* h1 {
  color: #F5F5DC;
} */

/* h2 {
  color: #F5F5DC;
} */

.boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.box-1 {
  background-color: #7dc8fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-1 img {
  width: 64px;
  transform: rotate(-45deg);
}

.box-2 {
  background-color: #fa6464;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-2 svg {
  width: auto;
}

.box-1, .box-2 {
  width: 32vw;
  height: 32vh;
  border-radius: 32px;
  box-shadow: -3px 3px 14px white inset, 5px 5px 8px rgb(25, 25, 35);
  transition: all 250ms ease-out;
}

.box-1:active, .box-2:active {
  box-shadow: 3px -3px 6px black inset;
}