body{margin:0;width:100%;height:100vh;background:linear-gradient(135deg,#fdcbf1,#c7bcdf,#fbc2eb);overflow:hidden;animation:gradientAnimation 10s ease infinite;justify-content:center;align-items:center;font-family:Roboto,sans-serif}@keyframes gradientAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.dashboard-container{position:fixed;background-color:#ffffff4d;box-shadow:0 2px 4px #00000080;height:90vh;width:90vw;margin:5vh 5vw;display:flex;flex-direction:row;overflow:hidden;border-radius:2em}.navigation-menu{width:5vw;height:100%;transition:width .3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.navigation-menu.opened{width:18%;padding:0 2em}.collapse-button{position:absolute;top:10px;right:0;cursor:pointer}.content-area{display:flex;width:100%;margin-left:5vw;overflow:hidden}.logo{width:10em;height:fit-content;justify-content:center;align-items:center}.logo img{width:100%;height:auto;object-fit:cover}.dashboard-icons{display:flex;flex-direction:column;align-items:center;margin-top:20px;transition:opacity .3s ease,transform .3s ease;opacity:1;transform:translateY(0);margin-bottom:20px}.dashboard-icons.opened{align-items:flex-start}.dashboard-icon{display:flex;align-items:center;transition:transform .3s ease;transform:translateY(0);background-color:#f2f2f2;border-radius:10px;padding:.5em;margin:.5em;font-weight:500;cursor:pointer;text-decoration:none}.dashboard-icon span{margin-left:10px;font-size:14px;text-decoration:none}.dashboard-icon svg{color:#555;font-size:20px;transition:color .3s ease}.dashboard-icon:hover{background-color:#555}.dashboard-icon:hover span{color:#f2f2f2}.dashboard-icon:hover svg{color:#f2f2f2}@media (max-width: 768px){.navigation-menu{width:20%}.navigation-menu.opened{width:100%}.dashboard-icons.opened{align-items:center;margin:0}.logo{margin-top:0;margin-bottom:20%}.content-area.opened{display:none}}