@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
@import url(https://fonts.googleapis.com/css?family=Rubik:500);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

.unstyled-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.open {
    left: 0 !important;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#sidenav {
    left: -288px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    top: 50px;
}

div#toggle {
    transform: rotate(-90deg);
    position: absolute;
    top: 165px;
    left: 222px;
    background: rgba(33, 37, 41, 0.5);
    padding: 0px;
    text-align: center;
    width: 150px;
    color: #fff;
    font-size: 15px;
    font-family: 'Rubik','Noto Sans TC', sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 0px 0px 5px 5px;
}

div#menu {
    font-family: 'Rubik','Noto Sans TC', sans-serif;
    position: relative;
    background-color: #fff;
    top: 100px;
    box-shadow: 0 5px 10px 1px rgba(60, 60, 60, 0.4);
}

    div#menu ul {
        overflow: hidden;
        text-align: left;
    }

        div#menu ul li {
            position: relative;
            cursor: pointer;
            color: #595656;
        }

            div#menu ul li:hover {
                color: #fabf2a;
            }

            div#menu ul li a {
                text-align: center;
                display: block;
                color: #595656;
                padding: 5px 15px 5px 15px;
                text-decoration: none;
            }
                div#menu ul li a:hover {
                    color: #fff;
                    background: #595656;
                    -webkit-transition: all 0.4s ease;
                    -o-transition: all 0.4s ease;
                    transition: all 0.4s ease;
                }

.Side-Title {
    background: #fabf2a;
    font-size: 18px;
}