header{flex:0 1 auto;display:flex;justify-content:space-between;position:relative;box-shadow:0 2px 2px rgba(63,54,88,.445);background-color:var(--purple-navy)}.logo{width:40%;padding:10px;position:absolute;top:0;left:0}.logo a{display:flex;flex-direction:column;justify-content:center;align-items:center}.logo h1{text-align:center;font-weight:700;color:#fff}nav{width:100%;min-height:120px;display:flex;justify-content:flex-end;align-items:center}nav ul{display:flex;flex-direction:column;justify-content:center;color:#fff;font-weight:700}.login-btn,.logout-btn{background-color:var(--medium-purple);padding:10px;border-radius:5px;margin:5px 15px;cursor:pointer}.register{text-align:center;margin:5px 15px}.desktop-auth,.mobile-auth{width:40%;display:flex;justify-content:center;align-items:center;padding:5px;color:#fff}.desktop-auth{display:none;position:absolute;left:30%;top:20%}.desktop-auth a,.mobile-auth a{display:flex;justify-content:center;align-items:center}.user-avatar{display:flex;justify-content:center;align-items:center;border-radius:100%;background-color:var(--medium-purple);width:40px;padding:5px;margin:5px 10px}.user-picture{clip-path:circle(50% at 50% 50%)}.mobile-menu{width:100%;min-height:120px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}.burger-button{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;width:70px;height:70px;border-radius:50%;background-color:var(--medium-purple);margin:10px 20px}.bar1,.bar2,.bar3{width:30px;height:2px;background-color:#fff;margin:4px 0;transition:.4s}.change .bar1{-webkit-transform:rotate(-45deg) translate(-8px,6 px);transform:rotate(-45deg) translate(-7px,7px)}.change .bar2{opacity:0}.change .bar3{-webkit-transform:rotate(45deg) translate(-7px,-7px);transform:rotate(45deg) translate(-7px,-7px)}.burger-nav{display:none;flex-direction:column;justify-content:center;align-items:center;width:100%;background-color:var(--purple-navy);box-shadow:0 2px 2px rgba(63,54,88,.445)}.burger-nav-show{display:flex;position:absolute;top:120px;z-index:10}.burger-nav li{width:100%;text-align:center;line-height:35px}.active,.burger-nav li:hover{background-color:var(--medium-purple);border-radius:5px;width:60%!important}.burger-nav a:not(.mobile-autha){display:flex;justify-content:center;width:100%;height:100%}.line,.long-line{height:1px;margin:0 auto;background-color:#fff;margin:10px 0}.long-line:first-child{margin:0;margin-bottom:10px}.long-line{width:90%}.line{width:60%}.custom-select-wrapper{display:none;position:relative;width:180px;user-select:none;margin:10px 20px;color:#fff;font-weight:700;font-size:1.2rem;background-color:var(--medium-purple);border-radius:5px}.border-radius{border-radius:5px 5px 0 0}.custom-select{position:relative;display:flex;flex-direction:column;align-items:center}.custom-select_trigger{position:relative;display:flex;align-items:center;justify-content:space-between;width:120px;height:50px;line-height:50px;vertical-align:middle;cursor:pointer}.custom-options{width:180px;position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:100%;background-color:var(--medium-purple);border-radius:0 0 5px 5px;box-shadow:0 2px 2px rgba(63,54,88,.445);transition:all .5s;opacity:0;visibility:hidden;pointer-events:none;z-index:2;text-align:center;white-space:nowrap}.custom-options.open,.custom-select.open{opacity:1!important;visibility:visible!important;pointer-events:all}.custom-option{width:100%;position:relative;display:block;padding:0 15px;line-height:50px;cursor:pointer;transition:all .5s}.custom-option a{display:block;width:100%;height:100%}.custom-option.selected,.custom-option:hover{background-color:var(--purple-navy);border-radius:5px;width:75%!important}.menu-arrow{position:relative;height:15px;width:15px}.menu-arrow::after,.menu-arrow::before{content:"";position:absolute;bottom:0;width:.15rem;height:100%;transition:all .5s}.menu-arrow::before{left:5px;transform:rotate(45deg);background-color:#fff}.menu-arrow::after{left:-5px;transform:rotate(-45deg);background-color:#fff}.open .menu-arrow::before{left:5px;transform:rotate(-45deg)}.open .menu-arrow::after{left:-5px;transform:rotate(45deg)}@media screen and (min-width:768px){.logo{width:30%}nav{width:100%}.default-nav{flex-direction:row-reverse;align-items:center}.desktop-auth{display:flex}header h1,header h2{font-size:1.2rem}#desktop-menu{display:block}.mobile-menu{display:none}}