@font-face{
	font-family: 'Montserrat';
	src: url('../font/Montserrat-Regular.ttf')format('truetype');
}
@font-face{
	font-family: 'Montserrat1';
	src: url('../font/Montserrat-Light.ttf')format('truetype');
}
@font-face{
	font-family: 'roboto';
	src: url('../font/Roboto-Light.ttf')format('truetype');
}
*{
	margin: 0;
	padding: 0;
	 font-family: roboto;
}
:root{
	/*
	calc(minfont + (maxFont-minFont)*(maxScreen-minScreen)/(maxScreen-minScreen)
	= 14px font-size : 300px min-screen-size
	= 26px     "     : 1600px  max-screen
	*/
	--myFont: calc(16px + (20 - 16)*(100vw - 300px)/(1400 - 300));
	/*--main-width: calc(100% - 6vw);*/
	--grey: #888;
	/* --mainColor: #daab39; */
	--orange: #ffa500;
}

/*html{scroll-behavior:smooth;}*/
html, body{
	width: 100%;
	height: 100vh;
}
body{
	/*overflow: hidden;*/
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 1%;
	background: #eee;
	box-sizing:border-box;
	border-top: 5px solid var(--orange);
}
h1{
	font-family: Montserrat1;
	/* font-family: roboto1; */
	letter-spacing: 2px;
	font-size: calc(26px + (36 - 26)*(100vw - 300px)/(1600 - 300));
	/* color: var(--mainColor); */
	color: var(--grey);
	/* font-weight: 400;*/ 
	font-variant: small-caps;
	/* text-align: center; */
	margin: 2% 0 2% 1%;
}
h1:first-letter{
	color: var(--orange);
}
h2{
	font-family: Montserrat1;
	letter-spacing: 2px;
	font-size: calc(20px + (24 - 20)*(100vw - 300px)/(1600 - 300));
	/* color: var(--mainColor); */
	color: var(--grey);
	margin-bottom: 10px;
	text-align: left;
}
p{
	font-size: calc(14px + (20 - 14)*(100vw - 300px)/(1600 - 300));
	line-height: calc(24px + (30 - 24)*(100vw - 300px)/(1600 - 300));
	letter-spacing: 2px;
	padding-bottom: 15px;
	text-align: left;
	text-indent: 1%;
	color: #000;
	font-weight: 500;
}
a{
	text-decoration: none;
}
.container{
	display:flex;
	flex-direction:column;
	min-height:95vh;
}
main{
	flex:1;
}
#wrap{
	-webkit-display: flex;
	display: flex;
	justify-content:center;
   align-items: center;
	padding-top: 60px;
	margin: 0 auto;
	width: 90%;
  /* border:1px solid rgb(16, 214, 76); */
}
.error{
	color: red;
}
input{
	outline:none;
	width: 250px;
}
input[type='password']{
font-size: calc(14px + (18 - 14)*(100vw - 300px)/(1600 - 300));
  border: 1px solid var(--grey);
  border-radius: 4px;
}
label{
	font-size: calc(10px + (14 - 10)*(100vw - 300px)/(1600 - 300));
}
footer{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding:1%;
	/* margin-bottom:2%; */
	border-bottom: 2px solid var(--orange);
}