*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    background-repeat: no-repeat;
    /* background-size: 100%; */
}
body,html,main{
    width: 100vw;
    min-height:100vh;
    background-image:url('background.png');
}

main{
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    display: flex;
    flex-direction: column;
   
}

nav{
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: white;
    width:450px;
    font-size: 26px;
    justify-content: space-around;
    padding: 15px 0px;
    border-radius: 7px ;
    box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.icon-box{
    display: flex;
    color: rgb(150, 150, 150);
}

.icon-box:hover{
    opacity:0.8
}.icon-box:active{
    opacity:0.7
}

#nav-indicator{
    position: absolute;
    top:0px;
    left:12.5%;
    width:50px;
    height: 5px;
    background-color: rgb(29, 97, 255);
    transform: translateX(-50%);
    border-radius: 0 0 50px 50px;
    transition: 0.3s ease-out;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.25);
}

.nav-icons{
    cursor: pointer;
}

#home{
    color: rgb(29, 97, 255);
}