.btn {
  background: var(--btn-secondary-color);
  font-family: var(--text-font);
  font-weight: 500;
  border: var(--outline-thick);
  width: 265px;
  font-size: 1.2rem;
  padding: 1rem 0.3rem;
  line-height: 1.2rem;
  color: var(--btn-primary-color);
  cursor: pointer;
}
.btn:not(.inactive):hover {
  background: var(--btn-primary-color);
  color: var(--btn-secondary-color);
}
.btn.inactive {
  cursor: default;
  opacity: 0.2;
}
.btn-container {
  display: flex;
  justify-content: center;
}
.square-btn {
  font-family: Arial, sans-serif;
  font-size: 2rem;
  width: 40px;
}
.switch {
  width: 60px;
  min-width: 60px;
  height: 20px;
  padding: 5px;
  user-select: none;
  border-radius: 30px;
  cursor: pointer;
  outline: solid 1px rgba(255, 255, 255, 0.4);
  position: relative;
  background-color: black;
  transition: background-color 200ms;
}
.switch .switch-inner {
  background: white;
  border: solid 1px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 200ms ease-out;
}
.switch.on {
  background-color: var(--blue-30);
  outline-color: var(--blue-30);
}
.switch.on .switch-inner {
  left: 45px;
}
.square-logo {
  --size: 160px;
  --th: 1px;
  --shadow-color: hsla(210, 90%, 50%, 0.5);
  --border-color: hsla(210, 90%, 70%, 0.8);
  position: relative;
  height: calc(1 * var(--size));
  width: calc(1 * var(--size));
}
.square-logo .square {
  border: solid var(--border-color) var(--th);
  width: var(--size);
  height: var(--size);
  position: absolute;
  box-shadow: var(--shadow-color) 0 0 calc(var(--size) / 10) inset, var(--shadow-color) 0 0 calc(var(--size) / 20);
  animation: bounce 4s cubic-bezier(0.65, 0.05, 0.36, 1) infinite alternate;
  transform: rotate(45deg) scale(1);
  /* Init state of animation */
}
.square-logo .square:nth-of-type(2) {
  animation-delay: 400ms;
}
.square-logo .square:nth-of-type(3) {
  animation-delay: 800ms;
}
@keyframes bounce {
  from {
    transform: rotate(45deg) scale(1);
  }
  45% {
    transform: rotate(45deg) scale(1.5);
  }
  55% {
    transform: rotate(45deg) scale(1.5);
  }
  to {
    transform: rotate(45deg) scale(1);
  }
}