/*
 =========================================================
 * Filo's dark theme - Topbar
 =========================================================
 * Page: https://filo.gg
 * Copyright 2023 iLxlo_ (https://github.com/ilxlodev)
 * Designed by CSDIT Coded by iLxlo_
 =========================================================
 * Not allowed to copy substantial portions of the software without prior authorization.
 */

.topbar {
  z-index: 10;
  display: flex;
  padding: 5px 20px;
  position: relative;
  align-items: center;
  justify-content: space-around;
  background: var(--filogg-color-secondary);
}

.topbar .empty {
  width: 15%;
}

.announcements {
  width: 60%;
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
}

.announcements > span {
  margin-right: 10px;
  color: var(--filogg-color-primary);
  font-size: var(--filogg-font-size-small);
}

.discord-embed {
  width: 15%;
  height: 25px;
  text-align: end;
}

.discord-embed > a > img {
  width: auto;
  height: 100%;
}

/*
 =========================================================
 * Media queries
 =========================================================
 * Responsive is the future \ ✪ ω ✪ /
 */

@media (max-width: 1366px) { /* Laptop resolution */

  .topbar .empty {
    display: none;
  }

  .announcements {
    width: 80%;
  }

}

@media (max-width: 881px) { /* Mobile horizontal resolution */

  .announcements {
    width: 100%;
  }

  .discord-embed {
    display: none;
  }

}

@media (max-width: 768px) { /* Mobile vertical resolution */

  .topbar {
    padding: 10px 20px;
  }

  .announcements > span {
    font-size: var(--filogg-font-size-small-mobile);
  }

}