header{z-index:20;position:absolute;top:0;left:0;width:100vw;box-sizing:border-box;margin:0;display:flex;justify-content:space-between;align-items:center;padding:0 1rem}#logo{z-index:-10;color:var(--color-orange);width:80px;height:80px;display:flex;justify-content:center;align-items:center}#logo:hover #logo-dot{transform:translateY(15px);transition:transform .2s}#logo:hover{transform:scale(1.05) rotate(5deg);transition:transform .2s}#burger-button{border:0;padding:0;background-color:transparent;cursor:pointer}.ham{-webkit-tap-highlight-color:transparent;transition:transform .4s;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision}#burger-button.active .ham{transform:rotate(45deg)}.line{fill:none;transition:stroke-dasharray .4s,stroke-dashoffset .4s,stroke .5s cubic-bezier(.77, .2, .05, 1);stroke:var(--color-orange);stroke-width:5.5;stroke-linecap:round}#burger-button.active .line{stroke:var(--color-purple)}.ham .top{stroke-dasharray:41 121}.ham .bottom{stroke-dasharray:41 121}#burger-button.active .top{stroke-dashoffset:-68px}#burger-button.active .bottom{stroke-dashoffset:-68px}nav ul{z-index:-5;position:absolute;width:100vw;height:100vh;box-sizing:border-box;padding-top:125px;top:0;right:0;background-color:var(--color-sand);margin:0;list-style-type:none;-webkit-font-smoothing:antialiased;transform-origin:0% 0%;transform:translate(100%,0);transition:transform .5s cubic-bezier(.77, .2, .05, 1);visibility:hidden;display:flex;flex-direction:column;align-items:center}@media (min-width:768px){nav ul{width:20rem}}nav .active~ul{transform:none;visibility:visible}nav li{width:100%}nav a{text-decoration:none;color:var(--color-purple);font-size:1.5rem;font-weight:700;text-transform:uppercase;padding:1rem 0;display:block;transition:color .3s;width:100%}nav div{z-index:-8;position:absolute;top:0;left:0;width:100vw;height:100vh;backdrop-filter:blur(2px) opacity(0);transition:backdrop-filter .5s,background-color .5s;pointer-events:none;background-color:rgba(0,0,0,0)}nav .active~div{backdrop-filter:blur(2px) opacity(1);pointer-events:all;background-color:rgba(0,0,0,.25)}footer{display:flex;flex-direction:column;justify-content:end;align-items:center;height:10vh}footer p{text-align:center;font-size:.74rem;color:var(--p-color);margin-top:2rem;margin-bottom:1rem}