:root {
	--exquizit-green: #258d8b;
	--exquizit-blue: #4adfdc;
	--exquizit-yellow: #ffd500;
	}
body{
	background-color:#dfdfdf;
	height: 100%;
	margin: 0;
	font-family: hurme_no2-webfont, -apple-system, BlinkMacSystemFont, sans-serif;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.box{
	border-top: 0.2vw solid var(--exquizit-yellow);
	background-color:var(--exquizit-green);
	padding:0.5vw;
	opacity:0.85;
	border-radius:10px;
	font-size:1vw;
}
.set{
	background-color:var(--exquizit-blue);
	padding:0.5vw;
	border-radius: 5px;
	margin-bottom: 2%;
	text-align: left;
	color: #000000;
	cursor:pointer;
}
.set:hover{
	background-color:#ccecec;
}
#create-set:hover{
	background-color:var(--exquizit-blue);
}
.title{
	background-color:var(--exquizit-green);
	padding:0.2vw;
}
.title h1{
	text-align: center;
	font-size: 3.75vw;
	font-family: "Candara";
	color:var(--exquizit-yellow);
	padding:0.75vw;
	margin:0;
}
.title h1 a{
	text-decoration: none;
	color:var(--exquizit-yellow);
}
.username_box{
	position: absolute;
	top: 1.75%;
	left: 3%;
	color:var(--exquizit-yellow);
}
/*.title h4{
	margin-top:0;
	padding:0.2vw;
	color:var(--exquizit-yellow);
	text-align: center;
	font-size: 1vw;
	background-color:var(--exquizit-green);
}*/

.title nav{
	position: absolute;
	top: 1.5%;
	right: 3%;
}
.navi{
	color: #c1c4c8;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.5vw;
	display:inline-block;
	padding:none;
	margin:none;
}
.navi:hover{
	color: #eaebed;
}
.title nav a{
	text-decoration: none;
	color: white;
	padding-right: 1%;
	display:inline-block;
}
#side_content{
	margin-left: 2%;
	position: absolute;
	top: 16%;
}
#examples{
	position: absolute;
	right: 2%;
	top: 18%;
}
#examples ul{
	line-height: 1.8;
}
#examples ul li div{
	line-height: initial;
}
#examples a{
	color: var(--exquizit-yellow);
}
#main{
	text-align: center;
	margin-top: 3%;
	margin-left: auto;
	margin-right: auto;
	padding:2vw;
	width: 40%;
}
#main textarea{
	width:80%;
	height:16vw;
}
#set_title{
	margin-top:-2%;
}
button, input[type="submit"]{
	background-color:#008CBA;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius:8px;
}
button:hover, input[type="submit"]:hover{
	background-color: #4CAF50;
}
#bottom-text{
	margin-top:14%;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
.bottom-banner{
	margin-top: 2%;
	margin-left: 30%;
	width: 80%;
}
.side-banner{
	float: right;
	position: absolute;
	right: 2%;
	top: 16%;
}
#notes{
	border-style: solid;
	border-width: 3px;
	border-color: var(--exquizit-green);
}
#main_container{
	background-color:var(--exquizit-blue);
	padding:2vw;
	border-radius:10px;
}
#login{
	width: 40%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	padding: 2vw;
}
#login form input[type="password"], #login form input[type="text"], #login form input[type="email"], #set-name {
	width: 310px;
	height: 50px;
	border: 1px solid #dee0e4;
	margin-bottom: 20px;
	padding: 0 15px;
}
@media (min-height: 1500px) and (max-width: 1080px), only screen and (max-width: 767px){
	body{
		padding-bottom: 15%;
	}
	.wrapper,html,body{
		overflow-x:hidden;
		overflow-y: auto;
		position: relative;
	}
	.box{
		border-top: 0.7vw solid var(--exquizit-yellow);
		font-size:2.5vw;
	}
	#login form input[type="password"], #login form input[type="text"], #login form input[type="email"], #set-name {
		width: 80%;
		margin-bottom: 20px;
		padding: 0 15px;
	}
	#side_content{
		position:static;
		margin-top: 10%;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}
	#examples{
		position: unset;
		width: 90%;
		margin-top: 7%;
		margin-left: auto;
		margin-right: auto;
	}
	#main{
		margin-top: 10%;
		width:90%;
	}
	#login{
		width: 40%;
		padding: 2vw;
		margin-top: 20%;
		width:85%;

	}
	.username_box{
		top: 1.25%;
		left: 3%;
		font-size: 3.4vw;
	}
	.navi{
		font-size: 5vw;
	}
	.title nav{
		right: -15%;
	}
	#main textarea{
		width:95%;
		height:30vw;
	}
	.bottom-text{
		font-size:3vw;
	}
	.bottom-banner{
		margin-left: 10%;
	}
	.side-banner{
		right: unset;
		margin-top: 20%;
		margin-left: auto;
		margin-right: auto;
		top: unset;
	}
	.title h1{
		font-size: 8vw;
		padding:4vw;
	}
}