.language__container {
  display: flex;
  gap: 0.3cqi;
  position: absolute;
  z-index: 300;
  right: 2cqi;
  top: 2cqi;

  button {
    background-color: transparent;
    border: calc(3 / var(--container-width) * 100cqi) solid white;

    border-radius: 100px;
    transition: 0.1s ease-out;
    backdrop-filter: blur(10px);
    color: white;
    text-align: center;

    font-size: calc(32 / var(--container-width) * 100cqi);
    height: calc(100 / var(--container-width) * 100cqi);
    width: calc(100 / var(--container-width) * 100cqi);

    &:hover {
      opacity: 0.7;
    }
  }

  button.active {
    border: calc(3 / var(--container-width) * 100cqi) solid var(--green);

    background-color: var(--green);
    color: white;
  }
}

.button__fullscreen {
  font-size: calc(32 / var(--container-width) * 100cqi);
  height: calc(100 / var(--container-width) * 100cqi);
  position: absolute;
  right: 20px;
  bottom: 10vh;
  z-index: 99;
}

.logo {
  position: absolute;
  top: 0.5cqi;
  right: 1cqi;
  width: 8cqi;
}

.btn__fullscreen {
  all: unset;
  position: absolute;
  right: 2cqi;
  bottom: 5cqi;
  cursor: pointer;
  width: 3cqi;
  height: 3cqi;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 85% auto;
  z-index: 10;

  background-color: black;

  &:hover {
    background-color: #e30613;
  }
}

.-enter-fullscreen {
  mask-image: url("/img/assets/fullscreen-enter.svg");
}

.-exit-fullscreen {
  mask-image: url("/img/assets/fullscreen-enter.svg");
}

.cursor__pointer {
  width: calc(100 var(--calc-cqi));
  height: calc(100 var(--calc-cqi));
  position: absolute;
  z-index: 20;
  top: calc(680 var(--calc-cqi));
  left: calc(945 var(--calc-cqi));
  animation: pulsefast 2s infinite;
}