:root{--bg:#EAF1FD;--grid:#e5e7eb}.navbar__container{display:flex;align-self:center;position:absolute;top:8.5rem;width:100%;z-index:10000}.layout__navbar{position:absolute;width:100%;padding:1rem;display:none;flex-direction:column;justify-content:center;align-items:center;gap:2rem;background-color:var(--bg);background-image:linear-gradient(to right,var(--grid) 1px,var(--bg) 1px),linear-gradient(to bottom,var(--grid) 1px,var(--bg) 1px),radial-gradient(circle 500px at 20% 100%,#d6c6ff 0,#e9e1ff 60%,var(--bg) 60%,var(--bg) 100%),radial-gradient(circle 500px at 100% 80%,#c7daff 0,#e7f1ff 60%,var(--bg) 60%,var(--bg) 100%);background-size:48px 48px,48px 48px,100% 100%,100% 100%;background-repeat:repeat;box-shadow:0 4px 10px rgba(0,0,0,.3)}.navbar__btn-open{position:absolute;top:2rem;left:2rem;width:4rem;height:4rem;padding:.4rem;background-color:#036aad;border-radius:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;box-shadow:0 4px 10px rgba(0,0,0,.3);cursor:pointer}.btn__icon-open{display:flex;width:2rem;height:.2rem;background-color:#fff}.navbar__btn-close{position:absolute;top:2rem;left:2rem;width:4rem;height:4rem;padding:.4rem;background-color:#036aad;border-radius:50px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.3);cursor:pointer}.navbar__btn-close:hover{transition:all .3s ease-in-out;transform:scale(1.1)}.btn__icon-close{position:absolute;width:2rem;height:.2rem;background-color:#fff}.btn__icon-close:first-child{transform:rotate(45deg)}.btn__icon-close:last-child{transform:rotate(-45deg)}.navbar__title{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;gap:2rem;margin-top:2rem;margin-bottom:3rem;padding:2rem;border-radius:15px;background-color:#f7e7c0;background-image:linear-gradient(to right,#e5e7eb 1px,transparent 1px),linear-gradient(to bottom,#e5e7eb 1px,transparent 1px);background-size:40px 40px;box-shadow:10px 10px 10px #d1dceb}.navbar__title h3{font-size:1.6rem;font-weight:700;color:#036aad;text-shadow:2px 2px 5px rgba(0,0,0,.5)}.navbar__list{width:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:3rem}.navbar__item{width:100%;padding:0 2rem}.navbar__item a{position:relative;width:100%;padding:.5rem 2rem;display:flex;justify-content:left;align-items:center;font-size:1.2rem;font-weight:700;color:#fff;background-color:#7096e5;box-shadow:2px 2px 5px 3px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease-in-out}.navbar__item a:hover{margin-left:2rem;background-color:#3b82f6}