*{
    margin: 0;
    padding: 0;
}

html {
	scroll-behavior: smooth;
}

body{
    background-color: #2F394B;
}

section{
    padding: 10%;
}

#back{
    color: #BCA165;
    text-decoration: underline;
	display: inline-block;
	margin-bottom: 1em;
}

a{
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

h2{
	text-align: center;
	margin-bottom: 1em;	
}

p{
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	color: #FAF4EB;	
	text-align: center;
	letter-spacing: 1.5px;
	line-height: 150%;
	margin-bottom: 1em;
}

.content{
	margin-bottom: 2em;
	width: 100%;
    height: 100%;
}

.frame{
	width: 2.5em;
}

#output{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
	width: 65vw;
    text-align: center;
    margin: 0 auto;
}

#question{
	text-align: center;
    width: 80vw;
	margin-top: 1em;
}

.after_input{
	text-align: center;
	margin: 0 auto;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
}

canvas{
	width: 80%;
	margin-bottom: 1em;
}

form{
	text-align: center;
	margin: 0 auto;
}

form input[type='text']{
	font-size: 1em;
    padding: 1em 3em 1em 1em;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 1em;
    color: #a3a3a3;
    display: inline-block;
    width: 16vw;
    border-style : none;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

form input[type='text']:focus{
    color: #333333;
}

form input[type="button"]{
	font-size: 1em;
	padding: .8em 2em;
	background-color: #BCA165;
	color: #FAF4EB;
	border-style: none;
	border-radius: 40px;
	cursor: pointer;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

ul{
	list-style: none;
	margin: 0 auto 3em auto;
	display: flex;
	justify-content: center;
}

ul li{
	display: inline-block;
}

ul li a{
	color: #FAF4EB;
	text-decoration: none;
	padding: 0 3em;
	text-align: center;
	border-left: solid 1px #BCA165;
	border-right: solid 1px #BCA165;
}

ul li a:hover{
	color: #BE4B40;
	transition: all ease .2s;
}

ul li #left{
	border-left: solid 2px #BCA165;
}

ul li #right{
	border-right: solid 2px #BCA165;
}

#question{
	text-align: center;
}

#question img{
	display: inline-block;
	margin: 0 auto 3em;
	width: 80%;
}

footer{
    background-image: url("../images/papertexture.svg");
    background-repeat: repeat;
	padding: 0;
}

footer #logos{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 0;
}

footer a{
    margin: 0 4em;
	display: flex;
    align-items: center;
}

@media only screen and (max-width:1440px) {

	.content{
		height: 82%;
	}

	.frame{
		width: 3vw;;
	}

	form input[type='text']{
		width: 16vw;
	}	

}

@media only screen and (max-width:1024px) {

	.frame{
		width: 3vw;;
	}
}

@media only screen and (max-width:768px) {
	
	h2 img{
		width: 100%;
	}	

	#logos img{
		width: 6em;
	}

	form input[type='text'] {
		width: 27vw;
		padding: 0.7em 4em 0.7em 1em;
	}

	ul li a{
		font-size: 12px;
	}

}

@media only screen and (max-width:599px) {
	p{
		font-size: 12px;
	}

	#output{
		width: 82vw;
	}

	.frame {
		width: 4vw;
	}

	form{
		display: flex;
	    flex-direction: column;
    	align-items: center;
	}

	form input[type='text'] {
		width: 100%;
		font-size: 12px;
		padding: 2vw 3vw 2vw 2vw;
		margin: .7em;
	}

	form input[type="button"] {
		font-size: 12px;
		padding: 0.6em 2em;
	}

	ul li a{
		padding: 0 1.5em;
		font-size: 12px;
	}

	footer a{
		margin: 0 4vw;
	}	

	#logos img{
		width: 12vw;
	}
}

@media only screen and (max-width:343px) {
	
	ul li a {
		padding: 0 1em;
	}

}