nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 20rem;
  backdrop-filter: blur(1rem);
  z-index: 100;
}

/* --- logo --- */

nav .logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 15rem;
}

nav .logo img {
  width: 2.25rem;
  height: 2.25rem;
}

nav .logo b {
  font-size: 1.5rem;
}

/* --- options --- */

nav .options {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  width: 15rem;
}

nav .options a {
  padding: 0.5rem 1rem;
  color: #f5f5f5;
  text-decoration: none;
  opacity: 0.8;
  transition: 0.15s;
}

nav .options a:hover {
  opacity: 1;
}

nav .options a:active {
  transform: scale(0.95);
}

nav .options a.primary {
  opacity: 1;
  background: #8000ff;
}

nav .options a.primary:hover {
  opacity: 0.9;
}

/* --- info --- */

.info {
  position: fixed;
  top: calc(3rem + 1px + 1rem + 1px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 20rem;
  background: #8000ff;
  z-index: 100;
}

.info a {
  color: #ffb692;
}

.icon-info {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  background-color: #f5f5f5;
  -webkit-mask: url('/static/icon/info.svg') no-repeat center;
  mask: url('/static/icon/info.svg') no-repeat center;
  mask-size: contain;
  transition: 0.15s;
}

/* --- Laptop --- */

@media (max-width: 1600px) {
  nav {
    padding: 1rem 12.5rem;
  }

  .info {
    padding: 0.25rem 12.5rem;
  }
}

/* --- tablet --- */

@media (max-width: 768px) {
  nav {
    padding: 1rem 5rem;
  }
}

/* --- mobile --- */

@media (max-width: 480px) {
  nav {
    padding: 1rem;
  }

  nav .links {
    display: none;
  }

  nav .logo, nav .options {
    width: max-content;
  }

  nav .logo img {
    width: 1.75rem;
    height: 1.75rem;
  }

  nav .logo b {
    font-size: 1.25rem;
  }

  nav .options a.secondary {
    display: none;  
  }

  .info {
    padding: 0.25rem;
    font-size: 0.5rem;
  }
}