/**
 * @name:       Samp Front
 * @version:    0.5.1
 * @author:     EOussama (eoussama.github.io)
 * @license     MIT
 * @source:     github.com/EOussama/samp-front
 */

/* #region Nav */

nav {
  margin: 0 !important;
}

nav span.community-name {
  font-weight: bold;
  margin-left: 10px;
}

nav.sticky {
  animation-duration: 0.3s;
  animation-name: menu-reveal;
  left: 0 !important;
  position: fixed !important;
  top: 0 !important;
  width: 100%;
}

@keyframes menu-reveal {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

/* #endregion */

/* #region Header */

header {
  background-attachment: fixed !important;
  background-image: url("./../../img/backgrounds/header-bg.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: grayscale(50%);
  height: 700px;
  margin: 0 0 80px 0 !important;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: margin;
}

body.dark header {
  filter: grayscale(100%);
}

body.dark header h1 {
  color: var(--color-dark) !important;
}

body.dark header h4 {
  color: var(--color-dark-light) !important;
}

header.sticky {
  margin-top: 50px !important;
}

header > div.container {
  display: flex !important;
  flex-direction: column;
  float: right;
  justify-content: center;
  height: 100%;
  width: 50% !important;
}

header h1.header {
  font-size: 40px !important;
}

header h4 {
  font-weight: 500 !important;
}

header p.icon-wrapper {
  position: relative;
}

header i.icon {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: wiggle;
  cursor: pointer;
  left: 50%;
  margin-top: 20px;
  opacity: 0.1;
  position: absolute;
  top: -5px;
  transform: translateX(-50%);
  transition-duration: 0.3s;
  transition-property: opacity;
}

header i.icon:hover {
  opacity: 0.6;
}

@keyframes wiggle {
  50% {
    top: 5px;
  }

  100% {
    top: -5px;
  }
}

/* #endregion */