body {
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  background-color: #888;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-image: url('./assets/nintento-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.radial-menu {
  position: relative;
  --radius: 200px;
  --small-radius: 50px;
  --base-of-triangle: 0px;
  --logo-size: 3rem;
  --logo-color: white;
  --primary-color: rgba(0, 0, 0, 0.8);
  --secondary-color: white;
  --shadow-color: white;
  --small-logo-size: calc(var(--logo-size) / 2);
  --small-logo-color: var(--primary-color);
  --animation-time: 2s;
}

.radial-menu::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 50%;
  top: 0;
  box-shadow: 0 0 15px var(--shadow-color);
  transition: opacity var(--animation-time);
}

.radial-menu:hover::after {
  opacity: 1;
}

.triangle {
  --half-base: calc(var(--base-of-triangle) / 2);
  width: 0px;
  height: 0px;
  border-top: var(--radius) solid var(--primary-color);
  border-left: var(--half-base) solid transparent;
  border-right: var(--half-base) solid transparent;
  position: absolute;
  right: calc(50% - var(--half-base));
  transform-origin: center bottom;
  transition: transform var(--animation-time), opacity var(--animation-time);
  opacity: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle.no-opacity {
  opacity: 1;
}

.triangle i {
  position: absolute;
  --size: var(--logo-size);
  top: calc(
    0px - calc(var(--size) / 2) - (var(--radius) + var(--small-radius)) / 2
  );
  color: var(--logo-color);
  z-index: 0;
  font-size: var(--size);
  transition: inherit;
}

.big-circle {
  height: calc(var(--radius) * 2);
  width: calc(var(--radius) * 2);

  border-radius: 50%;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.small-circle {
  --diameter: calc(var(--small-radius) * 2);
  height: var(--diameter);
  width: var(--diameter);
  background-color: var(--secondary-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.small-circle i {
  font-size: var(--small-logo-size);
  color: var(--small-logo-color);
}