:root{--header-bg: rgba(180, 166, 36, .8);--text-color: rgb(255, 255, 255);--list-item-bg: rgb(175, 160, 19, .8);--border-color: rgb(45, 45, 45, .8);--hover-color: rgb(48, 43, 0, .4)}body{background-color:#fff;overflow-x:hidden}.header-container{background-color:var(--header-bg);top:0;left:0;position:absolute;display:flex;width:100vw;height:8dvh;color:var(--text-color)}.logo-header{font-size:25px;font-weight:600;position:absolute;left:10px;margin:0;top:15px;-webkit-user-select:none;user-select:none}.menu-icon{display:flex;cursor:pointer;position:absolute;right:10px;top:15px;transition:all .3s ease-in-out;color:#fff}.menu-icon:hover{transform:scale(1.3)}.menu-icon:active{transform:scale(1.3);color:#00f}.preferences{position:absolute;display:flex;width:15vw;background-color:var(--header-bg);height:92vh;top:8vh;border-left:1px solid var(--border-color);right:-15vw;transition:all .5s ease-in-out;z-index:10}.preferences ul{list-style-type:none;padding:0;margin-left:0;margin-right:0}.preferences p{-webkit-user-select:none;user-select:none;font-size:16px;font-weight:600;position:absolute;width:100%;bottom:16vh;padding:0;margin:0;text-align:center;transition:all .5s ease-in-out}.preferences p:hover{color:#141414}.list-item{margin-bottom:10px;font-weight:500;font-size:15;background-color:var(--list-item-bg);width:100%;display:inline-block;position:abslute;border-radius:6px;border:1px solid var(--border-color);cursor:pointer;-webkit-user-select:none;user-select:none;padding:3px;transition:all .4s ease-in-out}.list-item:hover{background-color:var(--hover-color);transform:scale(1.3)}.kria-div{-webkit-user-select:none;user-select:none;position:absolute;display:flex;height:15vh;width:15vw;bottom:0vh}.logo-img{height:100%;width:100%}.content-container{position:absolute;width:100vw;height:86dvh;bottom:6vh;left:0;background-color:#fdf8ed;border-top:1px solid var(--border-color)}.footer{background-color:var(--header-bg);position:absolute;width:100vw;height:6dvh;bottom:0;display:flex;left:0;align-items:center;border-top:1px solid var(--border-color)}.button{cursor:pointer;transition:all .3s ease-in-out;color:#000;position:absolute;left:6px}.button:hover{transform:scale(1.3)}.button:active{color:wheat;animation:bounce 1s infinite;transform:scale(1.3)}.buttonMid{cursor:pointer;transition:all .3s ease-in-out;color:#000;position:absolute;left:46%}.buttonMid:hover{transform:scale(1.3)}.buttonMid:active{color:wheat;animation:bounce 1s infinite;transform:scale(1.3)}@keyframes bounce{0%,to{transform:translate(0)}50%{transform:translateY(-8px)}}.buttonSet{cursor:pointer;transition:all .3s ease-in-out;color:#000;position:absolute;right:6px}.buttonSet:hover{transform:scale(1.3)}.buttonSet:active{color:wheat;animation:spin 2s linear infinite;transform:scale(1.3)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register{cursor:pointer;background-color:wheat;border:1px solid var(--border-color);height:5vh;border-radius:6px;width:5vw;position:absolute;right:115px;top:11px;-webkit-user-select:none;user-select:none;transition:all .3s ease-in-out}.register:hover{transform:scale(1.1)}.login{cursor:pointer;background-color:wheat;border:1px solid var(--border-color);height:5vh;border-radius:6px;width:5vw;position:absolute;right:40px;top:11px;-webkit-user-select:none;user-select:none;transition:all .3s ease-in-out}.login:hover{transform:scale(1.1)}@media (max-width: 768px){.menu-icon,.preferences{display:none}}