*{margin:0;padding:0;box-sizing:border-box;}
body{background:#f5f5f5;}

.top{position:fixed;top:0;left:0;width:100%;height:65px;background:#0d47a1;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 20px;z-index:9999;}
.logo{font-family:'Patua One';font-size: 33px;align-items: center;}
a.logo {color: white; text-decoration: none;}
.menu-btn{font-size:32px;cursor:pointer;}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);visibility:hidden;opacity:0;transition:.3s;z-index:9998;}
.overlay.show{visibility:visible;opacity:1;}

.sidebar{position:fixed;top:-100%;left:0;width:100%;background:#ffffff;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:.4s;z-index:9999;overflow:auto;max-height:100vh;}
.sidebar.show{top:0;}
.sidebar-header{height:65px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:#1565c0;color:#fff;}
.kop-btn{font-size:34px;cursor:pointer;}

.menu{list-style:none;}
.menu>li{border-bottom:1px solid #eee;}
.menu>li>a{display:flex;margin-left: 10px;font-family: 'Signika';justify-content:space-between;align-items:center;text-decoration:none;color:#333;padding:12px 14px;font-size:16px;transition:.3s;}
.menu>li>a:hover{background:#f3f6fb;}

/* .submenu{list-style:none;max-height:0;overflow:hidden;transition:.35s ease;background:#fafafa;}
.submenu li a{display:block;text-decoration:none;color:#555;padding:14px 40px;border-top:1px solid #eee;}
.submenu li a:hover{background:#e8f0fe;}
.menu li.active .submenu{max-height:400px;}
.arrow{transition:.3s;}
.menu li.active .arrow{transform:rotate(180deg);} */

.content{margin-top:90px;padding:25px;}
@media(min-width:900px){.sidebar{width:420px;left:50%;transform:translateX(-50%);border-radius:0 0 12px 12px;}}