:root {
  --font-xs: clamp(0.75rem, calc(0.5vw + 0.5rem), 0.875rem);
  --font-sm: clamp(0.875rem, calc(0.75vw + 0.6rem), 1rem);
  --font-md: clamp(1rem, calc(1vw + 0.75rem), 1.25rem);
  --font-lg: clamp(1.25rem, calc(1.5vw + 0.9rem), 1.5rem);
  --font-xl: clamp(.5rem, 2vw, 3rem); /* dynamic, grows with viewport */
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    font-size: 1vmax;
    text-decoration: none;
    color: black;
    flex: 1;
    text-align: center;
    align-content: center;
    height: 5vmax;
    transition: background-color .75s, border-radius .75s;
}
a:hover{
    background-color: rgba(255, 255, 255, 0.178);
    border-radius: 2rem;
}

.logo>a{
    padding: 0
}

#header{
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100;
    

    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 .1vmax .5vmax rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1vmax);
    -webkit-backdrop-filter: blur(1vmax);
    border-top: .15vmax solid rgba(255, 255, 255, 0.25);
    border-bottom: .15vmax solid rgba(0, 0, 0, 0.25);
    font-size: 1vmax;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav>div{
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo{
    flex: 1;
}
.links{
    justify-content: space-around;
    flex: 4;
}
.cta{
    flex: 1;
}
.logo img{
    height: 4vmax;
}
/* 
@media (max-width: 425px) {
    .links{
        display: none;
    }
} */