*{
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family: "Open Sans", serif;

}
header{
    display: flex;
    background-color: #ECE1F9;
    font-family: "Open Sans", serif;
    padding: 5px 0px;

}
.logo{
    margin: auto 0px auto 120px;
    cursor: pointer;
    scale: 0.75;
}

nav{
    display: flex;
    margin: auto 23% auto auto;
}
@media only screen and (max-width: 1600px) {
    nav{
        margin: auto;
    }
}
nav a{
    text-decoration: none;
    color: black;
    margin: 0px 15px;
    font-weight: bold;
    font-size: 16px;
    font-weight: 600;
}

.accountsection{
    display: flex;
    margin: auto 100px auto 10px;
}
.accountsection img{
    width: fit-content;
    height: 25px;
    margin: 10px;
    cursor: pointer;
}

/* Notification panel  */

#notification-panel{
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* background-color: rgba(255, 228, 196, 0.562); */
    position: fixed;
    left: 80vw;
    overflow: hidden;
    z-index: 12;
   width: 20vw;
   transform: translateX(20vw);
}

#notification-panel div{
    padding: 15px 25px;
    background-color: #FFF;
    margin: 4px auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
    width: 15vw;

}

 @keyframes notificationopen {
    0%{
        transform: translatex(20vw);
    }
    100%{
        transform: translateX(0vw);
    }
 }


 @keyframes notificationclose {
    0%{
        transform: translateX(0vw);
    }

    100%{
        transform: translateX(20vw);
    }
 }