header {position: fixed; left: 50%; margin-left: -50%; top:0; width: 100%; z-index: 100; display:flex; justify-content: space-between; align-items: center;}
.sub_header {background: #6622a6;}
.sub_header #menu {position: absolute; right: 1.5rem; top:1rem; width: 3rem; height: 2.5rem;}
.sub_header #menu img {width: 100%; height: 100%;}
header.on {background: #6622a6;}
header h1 {}
header h1 a {display: flex; align-items:center; padding: 1rem 1.5rem;}
header h1 a img {height: 2.6rem;}

#menu_bar {position: fixed; right: -100%; top:0; z-index: 200; background: #6622a6; width: 60%; height: 100vh; transition:right 0.7s}
#menu_bar.on {right: 0%;}
#menu_bar ul {display:flex; flex-flow:column; padding-top: 7rem; height: 100%;}
#menu_bar ul li {text-align: center; margin-bottom: 2.5rem;}
#menu_bar ul li a { color:#fff; display:inline-block; font-size:1.7rem; padding: 1rem 1.2rem; border-radius:3rem;}
#menu_bar ul li a.blue {background: #5b63f9;}
#menu_bar ul li a.purple {background: #a25bdf;}
#menu_bar ul li a.red {background: #ef4c4c;}
#menu_bar ul li a.yellow {background: #f9b75b;}
#menu_bar ul li a.pink {background: #f169b2;}
#menu_bar ul li a.green {background: #24ba7a;}
#menu_bar ul li a.sky {background: #2198e1;}
#menu_bar ul li a.lime {background: #91bd19;}
#menu_bar .close {position: absolute; right: 1.5rem; top:1.5rem; width: 2rem; height: 2rem;}
#menu_bar .close img {width: 100%;}

.menu_bar_bg {position: absolute; left: 0; width: 100%; height: 100vh; opacity: 0; display: none;}
.menu_bar_bg.on {opacity: 1; display: block;}
.menu_bar_bg::before {content:''; display: block; width: 100%; height: 100%; background: #0000008a; position: absolute; left: 0; top:0; z-index: 150;}









.touch_none {overflow:hidden; height: 100vh; touch-action:none;}
@media screen and (min-width:500px) {

}