/* DEFAULT CSS */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer/TTF/Switzer-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer/TTF/Switzer-VariableItalic.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

body {
  font-family: "Switzer", sans-serif;
}

@media only screen and (max-width: 1559px) {
  .navbar-container {
    max-width: 1559px;
    width: 100%;
    height: 66px;

    background-color: #8ab63d;

    padding: 14px 20px;
  }

  .language-dropdown a img {
    height: 32px;
  }

  .language-dropdown {
    top: calc(100% + 14px);
  }

  .language-dropdown {
    background-color: #8ab63d;
  }

  .language-dropdown a:hover {
    background-color: #93c73a;
  }
}

@media only screen and (min-width: 1560px) {
  .navbar-container {
    max-width: calc(1920px - 240px);
    position: fixed;

    width: calc(100% - 240px);
    height: 80px;

    top: 32px;

    background-color: #6e6e6e;
    border-radius: 20px;

    padding: 18px 40px;
  }

  .language-dropdown {
    top: 100%;
  }

  .language-dropdown a img {
    height: 24px;
  }

  .language-dropdown {
    background-color: #6e6e6e;
  }

  .language-dropdown a:hover {
    background-color: #5a5a5a;
  }
}

/* NAVBAR CSS */
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  align-self: center;

  z-index: 1000;
}

.navbar-container img {
  height: 100%;

  object-fit: contain;
}

.navbar-language-selector {
  height: 100%;

  position: relative;

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

  cursor: pointer;
}

.selected-language {
  height: 100%;
}

.selected-language img {
  height: 100%;
  transition: transform 0.3s ease;
}

.navbar-language-selector:hover .selected-language img {
  transform: scale(1.1);
}

.language-dropdown {
  position: absolute;
  right: 0;

  display: none;
  flex-direction: column;
  flex-wrap: nowrap;

  border-radius: 10px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  padding: 8px 0;

  z-index: 1000;
}

.navbar-language-selector:hover .language-dropdown {
  display: flex;
}

.language-dropdown a {
  display: flex;
  align-items: center;

  color: white;
  text-decoration: none;
  font-weight: 600;

  transition: background-color 0.2s ease;

  padding: 8px 20px;
}

.language-dropdown a img {
  margin-right: 10px;
  object-fit: contain;
}

.language-dropdown a:hover {
  cursor: pointer;
}