#sidebar{
    position:fixed;
    top:50px;
    bottom:0;
    right:-500px;
    width:500px;
    background:white;
    transition:right 500ms ease-in-out;
    display: none;
}
#sidebar.show{
    display: unset;
}
.sidebar-open #sidebar{
    right:0;
}

#sidebartoggle:before{
    content:"Sidebar";
}
.sidebar-open #sidebartoggle:before{
    content:"Close";
}

.x {
    display: block;
    position: relative;
    left:450px;
    top:-180px;
    right: 0;
    width: 32px;
    height: 32px;
    transition: transform .25s ease-in-out;
}
.x:hover {
    transform: rotate(180deg);
    cursor: pointer;
}
.x:before {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(45deg);
    transform-origin: center;
}
.x:after {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.5);
    transform: rotate(-45deg);
    transform-origin: center;
}