/* --------------------------- Navbar -----------------------  */

.navbar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  background-color: rgb(0 0 0 / 75%);
  align-items: center;
  border-bottom: 2px solid rgb(27 170 255);
  z-index: 10;
  padding: 0.1rem 0.1rem 0;
  height: 14vh;
  min-height: 85px;
  width: 100%;
  flex-direction: column;
}

.navbtn {
  color: rgb(180 180 180 / 80%);
  text-decoration: none;
  border: none;
  user-select: none;
  padding: 0 0.8vw;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-block;
  height: 5vh;
  transition: color 1s ease-out;
}

.navbtn:hover,
.current {
  color: white;
  border-bottom: none;
}

#dropbtn:hover {
  cursor: default;
}

.logo {
  display: inline-block;
  width: 240px;
  height: 60px;
  background: url("../images/garuda/home/garudalinux2.png") center center/cover;
  margin-right: 2vw;
}

.dropdown-content {
  display: none;
}

.dropdown-content a {
  display: block;
  text-decoration: none;
  background-color: rgb(0 0 0 / 80%);
  border: none;
  padding: 2vh 0.5vw;
  color: rgb(180 180 180 / 80%);
  font-size: 1rem;
  border-bottom: 0.2px solid rgb(180 180 180 / 25%);
  transition: all 1s ease-out;
}

.dropdown-content a:hover {
  color: white;
  border-bottom: 2px solid white;
}

.dropdown:hover .navbtn {
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  position: absolute;
  right: 0;
  padding-top: 2vh;
  margin-top: -2vh;
  animation: rolldown 0.4s 1;
}

/* ----------------------------- End of Header ---------------------- */

/* ----------------------------  Side Navigation Menu --------------------- */

.sidenav {
  font-size: 1.25rem;
  position: fixed;
  left: 0;
  top: 50vh;
  margin-top: -9rem;
  border-radius: 2px 20px 20px 2px;
  z-index: 5;
}

.sidelinks {
  z-index: 20;
  padding: 0.75rem 0.5rem 0.75rem 0.2rem;
  border: 3px solid;
  border-left: 2rem;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
  background-color: white;
  text-decoration: none;
  color: inherit;
  margin-left: -4rem;
  max-width: 6.25rem;
  transition: all 1s ease;
}

.sidedwn {
  color: black;
  animation: rollup 1.25s 1;
}

.sidedwn:hover {
  color: white !important;
  background-color: #000 !important;
}

.sidegit {
  color: #fc6d26;
  animation: rollup 1.55s 1;
}

.sidegit:hover {
  color: white !important;
  background-color: #fc6d26 !important;
}

.sidetele {
  color: #08c !important;
  animation: rollup 2s 1;
}

.sidetele:hover {
  color: white !important;
  background-color: #08c !important;
}

.sidetwit {
  color: #00acee !important;
  animation: rollup 2.3s 1;
}

.sidetwit:hover {
  color: white !important;
  background-color: #00acee !important;
}

.hidden {
  display: inline-block;
  font-size: 0.8rem;
  width: 4rem;
}

.sidelinks:hover {
  border: 1px solid;
}

.sidenav ~ * {
  padding-left: 1.85rem;
}

/* --------------------------- End of Side Navigation Menu ------------------ */

.floating-button {
  position: fixed;
  color: blue;
  right: 2%;
  bottom: 5%;
  z-index: 5;
}

.floating-button button {
  color: red;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #279def;
  background: linear-gradient(225deg, #279def, #279def);
  box-shadow: 0 0 1rem 0.2rem #279def;
  border: none;
  outline: none;
  display: none;
  transition: all 0.4s ease;
}

.arrow {
  border: solid papayawhip;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.up {
  transform: rotate(-135deg);
}

.floating-button button:hover {
  box-shadow: 0 0 1rem 0.3rem #279def;
  transform: translateY(-2px);
}

/* --------------------------- Floating button ------------------------------ */

.announce {
  background-color: white;
  display: block;
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 5000;
  color: black;
  padding: 0 2rem;
  transition: all 2s ease;
  text-align: center;
}

.announce-text {
  display: inline-block;
  max-height: 1rem;
  font-size: 0.8rem;
}

.announce-cross {
  color: red;
  display: inline-block;
  position: absolute;
  right: 1vw;
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: white;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
}

.footer a {
  color: white;
  text-decoration: none;
}

.footer-container {
  display: flex;
  flex-direction: column;
}

#foss-footer-logo {
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ----------------------------------- End of Footer ----------------------------- */

/* ------------------------------------- End of Page ------------------------------ */

/* ---------------------------- Animations -------------------------- */

@keyframes rollup {
  0% {
    transform: translateY(27.5rem);
    opacity: 0;
  }

  50% {
    transform: translateY(27.5rem);
    opacity: 0;
  }

  100% {
    margin-top: 0;
    margin-bottom: 0;
    opacity: 1;
  }
}

@keyframes rolldown {
  0% {
    transform: translateY(2rem);
    opacity: 0;
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    filter: blur(0.1px);
  }
}

/* ------------------------- Blur -------------------- */

@supports (
  (-webkit-backdrop-filter: blur(1.9rem)) or (backdrop-filter: blur(1.9rem))
) {
  .navbar,
  .blur {
    background-color: rgb(0 0 0 / 40%);
    backdrop-filter: blur(1.9rem);
  }
}

.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}

#google_translate_element > * > * > * {
  color: white;
  background-color: black;
  font-size: 1rem;
  border: 1px solid gray;
  padding: 0.5rem;
  display: block;
  margin-bottom: -2rem;
  border-radius: 1rem;
}

.translate {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
}

#google_translate_element > * > * > *:hover {
  background-color: #333 !important;
  transition: all 0.5s ease;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}