.header{position:fixed;top:0;left:0;right:0;padding:15px 10px;background-color:var(--primaryColor);color:var(--notWhite);display:flex;justify-content:space-between;z-index:1}.avatar-btn,.avatar-img{width:35px;height:35px}.avatar-btn{background-color:none;border:none;position:relative;outline:none;display:flex;cursor:pointer}.avatar-btn:after{font-family:Font Awesome\ 5 Free;font-size:1rem;font-weight:700;color:#fff;content:"\f0dd";margin-top:auto;margin-bottom:auto;margin-left:.5em;padding-bottom:.5em}.user-dropdown{position:relative;height:35px}.user-dropdown ul{position:absolute;background-color:var(--cardBg);width:10rem;right:5%;margin-top:0;list-style:none;z-index:1;text-align:center;filter:drop-shadow(0 1px 12px rgba(83,40,40,.5));color:#000;font-size:13px;font-family:var(--ubuntu);cursor:pointer;transform:translateY(10px);transition:all .4s ease}.user-dropdown ul li{width:100%;height:100%}.dd-link{color:#000}.user-dropdown ul button{border:none;outline:none;width:100%;background-color:transparent}.user-dropdown ul li a:hover{background-color:#6a8c70;color:#fff}.user-dropdown ul li a:hover>i{color:#fff}.user-dropdown ul li button:hover{background-color:#6a8c70;color:#fff}.user-dropdown ul li button:hover>i{color:#fff}.header .logo{font-weight:700;margin:0 5px;font-size:1.3rem;color:var(--notWhite)}.header .btn{padding:5px 20px;font-size:1rem;margin:0 5px;border-radius:1rem}.login,.logo{margin:0 5px}.login .btn .icon:before{font-family:Font Awesome\ 5 Free;font-weight:900;font-size:1rem;content:"\f2f6";text-align:start}.login .btn i,.login .btn span{display:none}.logout{margin:0 5px}.logout .btn .icon:before{font-family:Font Awesome\ 5 Free;font-size:1rem;content:"\f2f5";margin-left:6px}.logout .btn i,.logout .btn span{display:none}@media screen and (min-width:320px) and (max-width:480px){.header .logo{font-weight:500}.header .btn{padding:5px 0}.header .btn .icon:before{font-size:1.3rem}.header .btn i{display:inline-block}}@media screen and (min-width:481px) and (max-width:768px){.header .logo{font-weight:600}.header .btn i{display:inline-block}.header .btn .icon:before{font-size:1.4rem}.header .btn{padding:5px 0}}@media screen and (min-width:769px) and (max-width:1024px){.header .btn span{display:inline-block}.header .btn{border:1px solid var(--notWhite);border-radius:2rem}.header .login :hover{background-color:var(--secondaryColor);transform:scale(.9)}}@media screen and (min-width:1025px) and (max-width:1200px){.header .btn span{display:inline-block}.header .btn{border:1px solid var(--notWhite);border-radius:2rem}.header .login :hover{background-color:var(--secondaryColor);transform:scale(.9)}}@media screen and (min-width:1201px){.header .btn span{display:inline-block}.header .btn{border:1px solid var(--notWhite);border-radius:2rem}.header .login :hover{background-color:var(--secondaryColor);transform:scale(.9)}}