#container {
  --btn-en-primary-color: var(--lang-primary-color);
  --btn-en-secondary-color: var(--lang-secondary-color);

  --btn-pt-primary-color: var(--lang-primary-color);
  --btn-pt-secondary-color: var(--lang-secondary-color);
}

#select-language--first {
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  user-select: none;
  width: var(--content-width);
  height: 100vh;
  background-color: var(--home-secondary-color);
  gap: 1px;
}

#select__first--en, #select__first--pt {
  flex-grow: 1;
  background-color: var(--home-primary-color);
  color: var(--home-secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 600ms;
}

.select-language:checked ~ #container #select-language--first {
  animation: disappear forwards 600ms;
}

#lang__title {
  color: var(--lang-secondary-color);
}

#language__en:checked ~ #container {  
  --btn-en-primary-color: var(--lang-secondary-color);
  --btn-en-secondary-color: var(--lang-primary-color);
}

#language__pt:checked ~ #container {
  --btn-pt-primary-color: var(--lang-secondary-color);
  --btn-pt-secondary-color: var(--lang-primary-color);
}

#language {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.language-selector {
  display: block;
  padding: 8px 14px;
  border: 1px solid;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: 150ms;
  margin-bottom: min(20px, 2vh, 5vw);
  text-align: center;
}

@media (pointer: fine) {
  #select-language--first label:hover,
  .language-selector:hover {
    opacity: .92;
  }
}

#language--en {
  background-color: var(--btn-en-primary-color);
  color: var(--btn-en-secondary-color);
}

#language--pt {
  background-color: var(--btn-pt-primary-color);
  color: var(--btn-pt-secondary-color);
}

@keyframes disappear {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}

/* INSERTING TRANSLATED CONTENT */
#menu-selection--home::before {
  content: var(--home);
}

#menu-selection--lang::before {
  content: var(--lang);
}

#menu-selection--about:before {
  content: var(--about);
}

#tutorial__description::before {
  content: var(--home-description);
}

#tutorial__label::before {
  content: var(--home-label);
}

#tutorial__bottom::before {
  content: var(--home-bottom);
}

#about__subtitle::before {
  content: var(--about-subtitle);
}

#about__content::before {
  content: var(--about-content);
}

#about__contact-word::before {
  content: var(--about-contact);
}

#about__repo::before {
  content: var(--about-repo);
}

#about__version::before {
  content: var(--about-version);
}