:root {
    --ADMIN-COLOR-DARKER:#4B000C;
    --ADMIN-COLOR-DARK:#7E0015;
    --ADMIN-COLOR-MAIN:#B1001D;
    --ADMIN-COLOR-LIGHT:#E40025;
    --ADMIN-COLOR-LIGHTER:#FF183E;

    --ADMIN-COLOR-BACKGROUND:#F0F0F0;
}

nav#nav-admin {
    background-color:var(--ADMIN-COLOR-BACKGROUND);
    color:var(--ADMIN-COLOR-MAIN);
    box-shadow:var(--GC-FRAME-SHADOW);

    position:fixed;
    left:calc(-250px + 5px); top:0; z-index:510;
    width:250px; height:100vh;
    opacity:1;
    padding:10px 10px 50px 10px;
    box-sizing:border-box;
    transition:0.3s;

    transform:scale(1,0.3) translateY(-50vh);
    border-radius:10em;
    overflow:hidden;
}

nav#nav-admin:hover {
    opacity:1;
    border-radius:0;
    overflow:auto;
    animation:0.3s linear 0s forwards nav-admin-hover;
}
@keyframes nav-admin-hover {
    10%  {transform:scaleY(1)}
    100% {transform:scaleX(1);top:0;left:0;}
}

nav#nav-admin label:nth-child(1) {
    font-weight:bold;
    font-size:110%;
}

nav#nav-admin li a {
    color:var(--ADMIN-COLOR-DARKER);
}
nav#nav-admin li a:hover {
    color:var(--ADMIN-COLOR-LIGHTER);
}

nav#nav-admin input {
    display:none;
}
nav#nav-admin input+label {
    display:block;
    margin-top:30px;
    margin-bottom:-20px;
    cursor:pointer;
}
nav#nav-admin input+label>span {
    display:inline-block;
    width:12px; height:12px;
    margin-right:10px;
    background-image:linear-gradient(45deg,transparent,transparent 50%,var(--ADMIN-COLOR-MAIN) 50%);
    transform:rotate(45deg);
    transition:0.3s;
}
nav#nav-admin input:checked+label>span {
    transform:rotate(135deg) translateX(-5px);
}
nav#nav-admin input:checked+label+ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
nav#nav-admin input+label+ul li {
    padding:0;
    margin:0;
    font-size:0;
    opacity:0;
    transition:0.3s;
}
nav#nav-admin input:checked+label+ul li {
    margin:40px 0 0 20px;
    font-size:100%;
    opacity:1;
    line-height:0px;
}