@charset "UTF-8";

:root {
  --background:#9c88ff;
  --navbar-width:145px;
  --navbar-width-min:50px;
  --navbar-dark-primary:#000018;
  --navbar-dark-secondary:#2c3e50;
  --navbar-light-primary:#f5f6fa;
  --navbar-light-secondary:#fff;
font-size:12px;
}
.pic {
position:relative;
margin:0px 2px;
border:none;
}
#nav-toggle:checked ~ #nav-header {
width:calc(var(--navbar-width-min) - 16px);
}
#nav-toggle:checked ~ #nav-content, #nav-toggle:checked ~ #nav-footer {
width:var(--navbar-width-min);
}
#nav-toggle:checked ~ #nav-header #nav-title {
opacity:0;
pointer-events:none;
transition:opacity 0.1s;
}
#nav-toggle:checked ~ #nav-header label[for=nav-toggle] {
left:calc(10% - 0px);
transform:translate(-50%);
cursor:url(../curs/curs5.cur),w-resize;
}
#nav-toggle:checked ~ #nav-header #nav-toggle-burger {
background:var(--navbar-light-primary);
}
#nav-toggle:checked ~ #nav-header #nav-toggle-burger:before, #nav-toggle:checked ~ #nav-header #nav-toggle-burger::after {
width:16px;
background:var(--navbar-light-secondary);
transform:translate(0, 0) rotate(0deg);
}
#nav-toggle:checked ~ #nav-content .nav-button span {
opacity:0;
transition:opacity 0.1s;
}
#nav-toggle:checked ~ #nav-content .nav-button {
min-width:calc(100% - 16px);
}
#nav-toggle:checked ~ #nav-footer #nav-footer-avatar {
margin-left:0px;
left:50%;
transform:translate(-50%);
}
#nav-toggle:checked ~ #nav-footer #nav-footer-titlebox, #nav-toggle:checked ~ #nav-footer label[for=nav-footer-toggle] {
opacity:0;
transition:opacity 0.1s;
pointer-events:none;
}
#nav-bar {
position:absolute;
left:0rem;
top:5rem;
height:calc(34% - 2vw);
background:var(--navbar-dark-primary);
border-radius:18px;
display:flex;
flex-direction:column;
color:var(--navbar-light-primary);
font-family:Verdana, Geneva, Tahoma, sans-serif;
overflow:hidden;
user-select:none;
}
#nav-bar hr {
position:relative;
margin:0px;
left:16px;
width:calc(100% - 32px);
border:none;
border-top:solid 1px var(--navbar-dark-secondary);
}
#nav-bar {
min-width:50px;
}
#nav-bar a {
color:inherit;
text-decoration:inherit;
}
#nav-bar input[type=checkbox] {
display:none;
}
#nav-header {
position:relative;
width:var(--navbar-width);
left:15px;
width:calc(var(--navbar-width) - 10px);
min-height:50px;
background:var(--navbar-dark-primary);
border-radius:18px;
z-index:2;
display:flex;
align-items:center;
transition:width 0.2s;
}
#nav-title {
font-size:1em;
font-family:'Croissant One', cursive;
font-weight:normal;
transition:opacity 1s;
}
label[for=nav-toggle] {
position:absolute;
right:0px;
width:3rem;
height:100%;
display:flex;
align-items:center;
justify-content:center;
cursor:url(../curs/curs5.cur),w-resize;
}
#nav-toggle-burger {
position:relative;
width:16px;
height:2px;
background:var(--navbar-dark-primary);
border-radius:99px;
transition:background 0.2s;
}
#nav-toggle-burger:before, #nav-toggle-burger:after {
position:absolute;
content:"";
top:-6px;
width:10px;
height:2px;
background:var(--navbar-light-primary);
border-radius:99px;
transform:translate(2px, 8px) rotate(30deg);
transition:0.2s;
}
#nav-toggle-burger:after {
top:6px;
transform:translate(2px, -8px) rotate(-30deg);
}
#nav-content {
position:relative;
margin:-16px 0px;
padding:16px 0px;
flex:1;
width:var(--navbar-width);
background:var(--navbar-dark-primary);
box-shadow:0px 0px 0px 16px var(--navbar-dark-primary);
direction:rtl;
overflow:hidden;
transition:width 0.2s;
scrollbar-width:none;
}
#nav-content::-webkit-scrollbar {
width:8px;
height:8px;
}
#nav-content::-webkit-scrollbar-thumb {
border-radius:99px;
background-color:#D62929;
}
#nav-content-highlight {
position:absolute;
left:5px;
top:-38px;
width:calc(100% - 5px);
height:25px;
background:var(--background);
background-attachment:fixed;
border-radius:18px 0px 0px 18px;
transition:top 0.2s;
}
#nav-content-highlight:before, #nav-content-highlight:after {
position:absolute;
content:"";
right:0px;
bottom:100%;
width:50px;
height:30px;
border-radius:45%;
box-shadow:15px 15px var(--background);
}
#nav-content-highlight:after {
top:100%;
box-shadow:15px -15px var(--background);
}
.nav-button {
position:relative;
margin-left:5px;
height:35px;
display:flex;
align-items:center;
color:var(--navbar-light-secondary);
direction:ltr;
z-index:1;
}
.nav-button {
transition:min-width 0.2s;
}
.nav-button span {
position:relative;
margin-left:2px;
transition:opacity 1s;
}
.nav-button:nth-of-type(1):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(1):hover ~ #nav-content-highlight {
top:22px;
}
.nav-button:nth-of-type(2):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(2):hover ~ #nav-content-highlight {
top:57px;
}
.nav-button:nth-of-type(3):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(3):hover ~ #nav-content-highlight {
top:92px;
}
.nav-button:nth-of-type(4):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(4):hover ~ #nav-content-highlight {
top:127px;
}
.nav-button:nth-of-type(5):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(5):hover ~ #nav-content-highlight {
top:162px;
}
.nav-button:nth-of-type(6):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(6):hover ~ #nav-content-highlight {
top:197px;
}
.nav-button:nth-of-type(7):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(7):hover ~ #nav-content-highlight {
top:232px;
}
.nav-button:nth-of-type(8):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(8):hover ~ #nav-content-highlight {
top:267px;
}
.nav-button:nth-of-type(9):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(9):hover ~ #nav-content-highlight {
top:302px;
}
.nav-button:nth-of-type(10):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(10):hover ~ #nav-content-highlight {
top:337px;
}
.nav-button:nth-of-type(11):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(11):hover ~ #nav-content-highlight {
top:372px;
}
.nav-button:nth-of-type(12):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(12):hover ~ #nav-content-highlight {
top:407px;
}
.nav-button:nth-of-type(13):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(13):hover ~ #nav-content-highlight {
top:442px;
}
.nav-button:nth-of-type(14):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(14):hover ~ #nav-content-highlight {
top:477px;
}
.nav-button:nth-of-type(15):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(15):hover ~ #nav-content-highlight {
top:512px;
}
.nav-button:nth-of-type(16):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(16):hover ~ #nav-content-highlight {
top:547px;
}
.nav-button:nth-of-type(17):hover {
color:var(--navbar-dark-primary);
}
.nav-button:nth-of-type(17):hover ~ #nav-content-highlight {
top:582px;
}
#nav-footer {
position:relative;
width:var(--navbar-width);
height:45px;
background:var(--navbar-dark-secondary);
border-radius:18px;
display:flex;
flex-direction:column;
z-index:2;
transition:width 0.2s, height 0.2s;
}
#nav-footer-heading {
position:relative;
width:100%;
height:45px;
display:flex;
align-items:center;
}
#nav-footer-avatar {
position:relative;
margin:10px 0px 15px 5px;
left:0px;
width:32px;
height:32px;
border-radius:50%;
overflow:hidden;
transform:translate(0);
transition:0.2s;
}
#nav-footer-avatar img {
height:100%;
}
#nav-footer-titlebox {
position:relative;
margin-left:-30px;
margin-top:5px;
width:10px;
display:flex;
flex-direction:column;
transition:opacity 1s;
}
#nav-footer-subtitle {
color:var(--navbar-light-secondary);
font-size:1vw;
}
#nav-footer-toggle:checked + #nav-footer {
height:100%;
min-height:54px;
}
#nav-footer-toggle:checked + #nav-footer label[for=nav-footer-toggle] {
transform:rotate(180deg);
}
label[for=nav-footer-toggle] {
position:absolute;
right:0px;
width:3rem;
height:100%;
display:flex;
align-items:center;
transition:transform 0.2s, opacity 0.2s;
}
#nav-footer-content {
margin:0px 16px 16px 16px;
border-top:solid 1px var(--navbar-light-secondary);
padding:16px 0px;
color:var(--navbar-light-secondary);
font-size:1vw;
overflow:auto;
}
#nav-footer-content::-webkit-scrollbar {
width:0px;
height:0px;
}
#nav-footer-content::-webkit-scrollbar-thumb {
background-color:yellow;
}