@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
:root {
  --primary-white: rgba(255, 255, 255, 0.75);
  --primary-orange: #f8b218ff;
}

html, body {
  /*background-color: #0c4b85;*/
  background: linear-gradient(to bottom, #0C4B85FF, #072f54);
  color: var(--primary-white);
  height: 100vh;
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 300;
  text-align: center;
}

nav {
  display: flex;
  justify-content: space-evenly;
  font-size: 1.5rem;
  width: 90%;
}


a {
  color: var(--primary-white);
  text-decoration: none;
}
a:hover {
  color: var(--primary-orange);
}

h1 {
  margin: 50px auto;
}

#site-logo {
  width: 40%;
  margin: auto;
  -webkit-filter: drop-shadow(0px 0px 5px var(--primary-orange));
  filter: drop-shadow(0px 0px 5px var(--primary-orange));
}

.wrapper {
  margin: auto 1rem;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;    /* vertical centering (because column) */
  align-items: center;        /* horizontal centering */
  gap: 1rem;
}

header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo-name {
  font-size: 1.5rem;
  margin: auto 2rem;
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }

  p {
    margin: 0.3rem auto ;
  }

  .wrapper {
    height: 80%;
  }
}