:root {
    --bg-color:rgb(187, 231, 245);
    --primary-color:rgb(13, 11, 167);
    --secondary-color:rgb(255, 6, 6);
    --nav-color:rgb(255, 255, 255);

}
a {
    text-decoration: none;
    color: var(--primary-color);
    
    transition: all ease 0.5s;
}
a:hover {
    color:var(--secondary-color)
}
.empty-zone {
    height: 200vh;
}
html,body {
    width:100%;
    height:100%;
    margin:0;
}
body {
    background-color: var(--bg-color);
}
.nav-zone {
    width:100%;
    height:55px;
    padding:10px 0 10px 0;
    background-color: var(--nav-color);
    
    position: absolute;
    top: 0;

    border-radius:0 0 15px 15px;
}
nav {
    width:100%;
    height:55px;
    padding:10px 0 10px 0;
    backdrop-filter: blur(5px);

    position: sticky;
    top: 0;
    
    display:flex;
    align-items: center;
    justify-content: space-between;
    border-radius:0 0 15px 15px;
    box-shadow: 3px 0 5px 2px rgb(0,0,123,0.75);
}
nav div {
    padding-left: 10px;
    padding-right:10px;
}
nav .icon img {
    width: 60px;
    clip-path: circle();
}
nav .links {
    display: flex;
    gap: 10px;
}
nav .links a {
    line-height: 75px;
    width: 100px;
    text-align: center;
    border: 0;

    /* background-color: var(--nav-color); */
}
nav .links a:hover{
    line-height: 72px;
    border-bottom:3px solid var(--primary-color);
    background-color: var(--bg-color);
}