@import url("./font.css");

#main{
    width: 100%;
    background-color: #f5f5f5;
    font-family: "AvertaCY-Regular", sans-serif;
    color: var(--tertiary-color)
}

#nav{
    width: 100%;
    /* height: 200px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 3vw;;
    position: fixed;
    z-index: 5;

}

#nav.scrolled{
    background-color: #bcbcbcbe;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
#nav img{
    width: 6rem;
    height: auto;
}
#nav h1{
    font-size: 1.2vw;
    font-family: "AvertaCY-Bold", sans-serif;
}
#nav .nav-links{
    display: flex;
    gap: 2vw;
    align-items: center;
    list-style: none;
    font-size: 0.95vw;;
}

#nav .nav-links a{
    text-decoration: none;
    color: var(--tertiary-color);
    letter-spacing: -0.02vw;
}

#nav .nav-links a:hover{
    color: var(--secondary-color);
    transition: all 0.3s ease-in-out;
}

#nav .nav-links .contact a{
    padding: 0.4vw 1vw;
    background-color: var(--tertiary-color);
    color: #f5f5f5;
    line-height: 0;
    border-radius: 100px;
}

#nav .nav-links .contact a:hover{
    /* background-color: var(--primary-color); */
    color: #f5f5f5;
    transition: all 0.3s ease-in-out;
}