body {
    margin:0;
    font-family:Arial;
}

/* TOPBAR */
.topbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:50px;
    background:#2c3e50;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    z-index:1000;
}

.topbar a {
    color:white;
    margin-left:15px;
    text-decoration:none;
}

/* SIDEBAR */
.sidebar {
    position:fixed;
    top:50px;
    left:0;
    width:220px;
    height:100%;
    background:#34495e;
    padding-top:10px;
    transition:0.3s;
}

.sidebar a {
    display:block;
    color:white;
    padding:12px;
    text-decoration:none;
}

.sidebar a:hover {
    background:#1abc9c;
}

/* CONTENT */
.content {
    margin-left:220px;
    margin-top:50px;
    padding:20px;
    transition:0.3s;
}

/* HIDDEN */
.sidebar.hidden {
    left:-220px;
}

.content.full {
    margin-left:0;
}

.menu-title {
    padding:12px;
    background:#2c3e50;
    cursor:pointer;
    color:white;
}

.menu-title:hover {
    background:#1abc9c;
}

.submenu {
    display:none;
    background:#3b536b;
}

.submenu a {
    padding-left:30px;
}



/* MOBILE */
@media (max-width:768px){
    .sidebar {
        left:-220px;
    }

    .content {
        margin-left:0;
    }
}