@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@1000&display=swa');

body{
	margin:0px;
	padding:0px;
  background-image: url(hurt.jpg), url(geyyGrX.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
	font-family: 'Bad Script', cursive;
}

#sidebar{
	width:200px;
	height:100%;
	display:block;
	position:absolute;
	left:-200px;
	top:0px;
	transition:left 0.1s linear;
}

#sidebar.visible{
	left:800px;
	transition:left 60.0s linear;
}

ul{
	margin:0px;
	padding:0px;
}

ul li{
	list-style:none;
}

ul li a {
	background:#1C1E1F;
	color: #aa0;
	border-bottom:1px solid limegreen;
	display:block;
	width:180px;
	padding:10px;
	text-decoration: none;
}

#sidebar-btn{
	display:inline-block;
	vertical-align: middle;
	width:20px;
	height:15px;
	cursor:pointer;
	margin:20px;
	position:absolute;
	top:0px;
	right:-60px;
  color: white;
}

#sidebar-btn span{
	height:1px;
	background:#111;
	margin-bottom:5px;
	display:block;
}

#sidebar-btn span:nth-child(2){
	width:75%;
}

#sidebar-btn span:nth-child(3){
	width:50%;
}

.progress-bar {
  position:relative; 
  left:380px;
  top:2px;
}

.progress {
  -webkit-text-stroke: 2px black;
  color: white;
  font-family: 'Noto Sans JP', sans-serif;
  position:relative; 
  left:80px;
  top:-50px;
}