* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
a {
  text-decoration: none;
}

.menu-item,
.menu-open-button {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  position: absolute;
  color: #ffffff;
  transition: transform ease-out 200ms;
}
.menu-open {
  display: none;
}

.lines {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -17px;
  margin-top: -1px;
  width: 35px;
  height: 4px;
  background: #0000cc;
  border-radius: 1em;
  transition: transform 200ms;
}
.line-1 {
  transform: translate3d(0, -9px, 0);
}
.line-2 {
  transform: translate3d(0, 0, 0);
}
.line-3 {
  transform: translate3d(0, 9px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .line-2 {
  transform: translate3d(0, 0, 0) scale(0, 1);
}
.menu-open:checked + .menu-open-button .line-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  width: 70px;
  height: 70px;
  font-size: 26px;
}
.menu-item:hover {
  background: cyan;
}
.menu-item {
  transition-duration: 0.2s;
}

.menu-open-button {
  background: #ffd700;
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.3s;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}
.menu-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 0.2s;
  transform: scale(1, 1) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1.2);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-delay: 0.08s;
  transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-delay: 0.16s;
  transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-delay: 0.24s;
  transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-delay: 0.32s;
  transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-delay: 0.4s;
  transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-delay: 0.48s;
  transform: translate3d(-0.25084px, -104.9997px, 0);
}
.menu-open-button img {
  width: 50px;
  height: 50px;
}
.menu-item img {
  width: 50px;
  height: 50px;
}
.menu-open-button,
.red,
.orange,
.gold,
.green,
.blue,
.indigo {
  box-shadow: 3px 3px 10px 0 rgba(178, 34, 34, 0.5);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red {
  background-color: red;
}
.red:hover {
  color: red;
  text-shadow: none;
}

.orange {
  background-color: orange;
}
.orange:hover {
  color: orange;
  text-shadow: none;
}

.gold {
  background-color: gold;
}
.gold:hover {
  color: #ccac00;
  text-shadow: none;
}

.green {
  background-color: green;
}
.green:hover {
  color: green;
  text-shadow: none;
}

.blue {
  background-color: blue;
}
.blue:hover {
  color: blue;
  text-shadow: none;
}

.indigo {
  background-color: indigo;
}
.indigo:hover {
  color: indigo;
  text-shadow: none;
}
.toplogo {
  height: 30px;
  font-weight: bold;
  display: flex;
  gap: 10px;
  justify-content: center;
  font-size: 20px;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.toplogo img {
  object-fit: scale-down;
  width: 400px;
  height: 200px;
}
.toplogo a {
  color: var(--main-color);
}
.toplogo h1 {
  font-size: 24px;
  background: radial-gradient(
    circle,
    rgba(110, 105, 192, 1) 0%,
    rgba(136, 49, 124, 1) 3%,
    rgba(84, 119, 167, 1) 5%,
    rgba(213, 67, 41, 1) 9%,
    rgba(24, 168, 13, 1) 13%,
    rgba(177, 44, 160, 1) 17%,
    rgba(156, 112, 110, 1) 21%,
    rgba(18, 146, 100, 1) 24%,
    rgba(206, 39, 115, 1) 27%,
    rgba(135, 30, 122, 1) 31%,
    rgba(9, 9, 121, 1) 35%,
    rgba(107, 66, 61, 1) 38%,
    rgba(149, 88, 61, 1) 42%,
    rgba(25, 132, 62, 1) 46%,
    rgba(24, 146, 146, 1) 49%,
    rgba(187, 43, 129, 1) 53%,
    rgba(11, 134, 46, 1) 55%,
    rgba(242, 53, 209, 1) 57%,
    rgba(108, 133, 212, 1) 60%,
    rgba(42, 127, 178, 1) 63%,
    rgba(155, 119, 136, 1) 66%,
    rgba(223, 61, 75, 1) 69%,
    rgba(180, 51, 142, 1) 72%,
    rgba(115, 122, 14, 1) 75%,
    rgba(150, 24, 111, 1) 78%,
    rgba(12, 137, 20, 1) 81%,
    rgba(146, 56, 31, 1) 84%,
    rgba(195, 84, 20, 1) 87%,
    rgba(98, 146, 19, 1) 89%,
    rgba(73, 145, 18, 1) 92%,
    rgba(73, 117, 217, 1) 95%,
    rgba(230, 44, 232, 1) 97%,
    rgba(12, 170, 202, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}