@font-face {
    font-family: TempestApache;
    src: url(./fonts/TempestApache.otf);
}

@font-face {
  font-family: Patrius;
  src: url(./fonts/AmericanCaptainPatrius.otf);
}

@font-face {
  font-family: DejaVu;
  src: url(./fonts/DejaVuSansMNerdFontMono-Regular.ttf)
}

html, body {
    font-family: DejaVu;
    background-color: #1e1e2e;
    color: #cdd6f4;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/*Navbar css*/
.nav {
    background-color: #11111b;
    position: sticky;
    top: 0;
    padding: 10px;
    z-index: 100;
}

.nav h1 {
    font-family: TempestApache;
    font-size: 50px;
    margin:0%;
}

.menu {
  position:absolute;
  margin:0%;
  right:20px;
  top:20px;
}

.menu-button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 2; /* above menu */
}

.menu-button span {
  display: block;
  height: 4px;
  background-color: #cba6f7;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-items {
  top: 30px;
  right: -20px;
  width: 200px;
  background-color: #181825;
  position: absolute;
  display: none;
}

.menu-items li {
  margin: 20px 0;
}

.menu-items a {
  text-decoration: none;
  color: #cba6f7;
  font-size: 18px;
  padding:5px;
}

.menu-items a:hover {
  text-decoration: none;
  background-color: #cba6f7;
  color: #181825;
  font-size: 18px;
}

.menu-selected {
  text-decoration: underline;
  text-decoration-color: #cdd6f4;
  text-decoration-thickness: 3px;
}

.menu-selected:hover {
  text-decoration-color: #181825;
}

#menu:checked ~ .menu-items {
  display: inline;
}

#menu:checked + .menu-button span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 7.5px);
}
#menu:checked + .menu-button span:nth-child(2) {
  opacity: 0;
}
#menu:checked + .menu-button span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -7.5px);
}

.logo {
  width: 50px;
  height: 50px;
  left: 50%;
  right: 50%;
  position: absolute;
}

/*banner css*/

.banner-image {
  width: 100%;
  filter: brightness(70%) saturate(110%);
}

.banner-text {
  z-index: 1;
  text-align: center;
  font-size: 50px;
  font-family: TempestApache;
  position: absolute;
  left: 50%;
  top: 300px;
  transform: translate(-50%, -50%)
}

.header {
  font-family: Patrius;
  text-align: center;
  color: #cba6f7;
  font-size: 35px;
  text-decoration: underline;
  text-decoration-thickness: 5px;
}

.content {
  font-family: DejaVu;
  width: 70%;
  margin: auto;
}

.content p {
  text-indent: 50px;
}

.content a {
  color: #cba6f7;
}

.theme-button {
  position: absolute;
  margin: 0;
  right: 40px;
  top: -3px;
  cursor: pointer;
}

.theme-button-svg {
  width: 30px;
  height: 30px;
  background: url(./icons/half-moon.svg);
  background-size:cover;
}

footer {
  background-color: #11111b;
  font-family:DejaVu;
  padding:30px;
}

footer a{
  color: #cba6f7;
}

.icon-link {
  text-align:center;
}

.icon-link a{
  font-family:DejaVu;
  font-size: 100px;
  text-decoration: none;
  margin:50px;
}

.linkicon:hover {
  color:#cba6f7;
  text-decoration:underline;
  text-decoration-color:#cba6f7;
}

.mail-icon {
  color:#f38ba8;
}

.instagram-icon {
  color:#fab387;
}

.twitter-icon {
  color:#f5e0dc;
}

.facebook-icon {
  color:#89b4fa;
}

.tor-icon {
  color:#b4befe;
}

html:has(#theme-toggle:checked) {
  background-color: #eff1f5;
}

body:has(#theme-toggle:checked) {
  background-color: #eff1f5;
  .content {
    color: #4c4f69;
  }
  .header {
    color: #8839ef
  }
  .nav {
    background-color: #dce0e8;
    color: #4c4f69;
  }
  .menu-button span {
  background-color: #8839ef;
  }
  .menu-items {
  background-color: #e6e9ef;
  }
  .menu-items a {
  color: #8839ef;
  }
  .menu-items a:hover {
  color: #e6e9ef;
  background-color: #8839ef;
  }
  .menu-selected {
    text-decoration-color: #4c4f69;
  }
  .menu-selected:hover {
    text-decoration-color: #e6e9ef;
  }
  .theme-button-svg {
    background: url(./icons/sun-light.svg);
    background-size:cover;
  }
  footer {
    background-color:#dce0e8;
    color:#4c4f69;
  }

  footer a {
    color: #8839ef;
  }

  .linkicon:hover {
    color:#8839ef;
    text-decoration-color:#8839ef;
  }

  .mail-icon {
    color:#d20f39;
  }

  .instagram-icon {
    color:#fe640b;
  }

  .twitter-icon {
    color:#4c4f69;
  }

  .facebook-icon {
    color:#1e66f5;
  }
}