a,
li {
  text-decoration: none;
  list-style-type: none;
  font-size: inherit;
  flex: 0 0 auto;
}

a {
  padding: var(--padding-link);
  color: inherit;
  transition: var(--transition-default);
}

p {
  font-size: var(--font-text-default);
}

.icon {
  width: var(--size-icon-default);
  height: var(--size-icon-default);
}

.logos img {
  height: var(--logo-height-default);
  width: auto;
}

/* BUTTONS */
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: var(--font-text-btn);
  font-weight: var(--weight-light);
  padding: var(--padding-button);
  border-radius: var(--radius-large);

  /* Only necessary for .btn */
  border: var(--border-transparent);
  cursor: pointer;
  font-family: var(--font-alaska);

  /* Trick for a nicer transitioning of button's color in hover state */
  /* Put it always on the original/default "state" */
  transition: var(--transition-default);
}

button.btn {
  padding: var(--padding-form-button);
}

.btn--full:link,
.btn--full:visited,
button.btn--full {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--full:hover,
.btn--full:active,
button.btn--full:hover {
  background-color: var(--color-primary-dark);
}

.btn--outline:link,
.btn--outline:visited {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 0.1rem solid currentColor;
}

.btn--outline:hover,
.btn--outline:active {
  color: var(--color-primary-dark);
}

.header-buttons--login:link,
.header-buttons--login:visited {
  background-color: var(--color-secondary-alpha);
  color: var(--color-secondary);
}

.header-buttons--login:hover,
.header-buttons--login:active,
.header-buttons--login:hover::after {
  background-color: var(--color-secondary-alpha-hover);
}

.header-buttons--portal:link,
.header-buttons--portal:visited {
  background-color: var(--color-quaternary-alpha);
  color: var(--color-quaternary);
}

.header-buttons--portal:hover,
.header-buttons--portal:active,
.header-buttons--portal:hover::after {
  background-color: var(--color-quaternary-alpha-hover);
}

.btn.header-buttons--login, .btn.header-buttons--portal {
  padding: var(--padding-header-button);
}

.header-buttons a.btn:not(.btn--full) {
  border: var(--border-transparent);
}

.lang-btn {
  appearance: none;
  outline: none;
  background: none;
  border: none;
  font-size: inherit;
  padding: var(--padding-link);
  height: 4.3rem;
  width: 8.1rem;
  transition: var(--transition-default);
}

.social-link:link,
.social-link:visited,
.social {
  color: var(--color-accent-light);
  background-color: var(--color-background-complementary);
}

.simulator-content button {
  margin-bottom: var(--margin-default);
}

.simulator-content button p {
  font-size: var(--font-text-btn);
}

/* MOBILE NAVIGATION */
.header-nav--mobile {
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
 /* display: none; */
}

.nav-icon {
  height: auto;
  width: 100%;
  display: none;
}

/* Responsive design */
@media only screen and (max-width: 84.375em) {
  .nav-icon {
    display: inline-block;
  }

  .logos img {
    height: 4.2rem;
  }
}