:root {
    --color1: #212A31;
    --color2: #2E3944;
    --color3: #124E66;
    --color4: #748D92;
    --color5: #D3D9D4;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background-color: var(--color4);
    overflow-x: hidden;
}


/*Nav Bar*/
header {
    color: var(--color5);
    align-items: center;
    margin: 2%;
    box-sizing: border-box;
}

.current {
    color: var(--color2);
    transition: color 0.4s;
}

header a, header li {
    transition: color 0.2s;
}

header a:hover, header li:hover {
    color: white;
}

li {
    margin-left: 15px;
}

/* Hero Section */
.hero {
    color: var(--color1);
}

.hero h1 {
    color: var(--color1);
    padding: 30px 20%;
}

/* Footer */
footer {
    color: var(--color5);
    background-color: var(--color2);
    padding: 2%;
    margin-top: 2%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
    gap: 10px; 
}

footer a:hover, footer li:hover, .footer-socials a:hover {
    text-decoration: underline;
    color: var(--color4);
}

.footer-socials {
    display: flex;
    font-size: 20px;
    gap: 10px;
}

@media (max-width: 600px) {
    footer {
      flex-direction: column;
      text-align: center;
      gap: 10px;
    }
  
    .footer-nav ul {
      justify-content: center;
      flex-wrap: wrap;
    }
  }