:root{
	--main: #008CFF;
}

*{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

nav{
	overflow: hidden;
	box-shadow: 0px 0px 10px #999;
}

nav ul{
	list-style-type: none;
	max-width: 1200px;
	margin: 0 auto;
}

nav ul li a.menu-left{
	float: left;
	padding: 20px 20px 20px 0;
	animation-name: navLoadLeft;
	animation-duration: 1s;
}

nav ul li a.menu-right{
	float: right;
	padding: 20px 0px 20px 20px;
	animation-name: navLoadRight;
	animation-duration: 1s;
}

nav ul li a{
	font-size: 23px;
	text-decoration: none;
	font-weight: bold;
	color: orange;
	color: var(--main);
}

/* LOGIN */
#loginForm{
	max-width: 1200px;
	margin: 0px auto;
}

#loginForm form{
	box-shadow: 0px 0px 10px #999;
	max-width: 600px;
	margin: 100px auto;
	padding: 20px;
	animation-name: loadForm;
	animation-duration: 2s;
}

#loginForm form label{
	display: block;
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 30px;
	color: var(--main);
}

#loginForm form input[type=text], #loginForm form input[type=password]{
	display: block;
	width: 100%;
	margin-bottom: 20px;
	font-size: 22px;
	padding: 10px;
	border: none;
	border-bottom: 4px solid var(--main);
}

#loginForm form input[type=submit]{
	display: block;
	width: 50%;
	font-size: 22px;
	color: white;
	background: var(--main);
	border: none;
	padding: 10px;
	cursor: pointer;
	margin: 50px auto 0px auto;
	font-weight: bold;
	transition-duration: 0.5s;
}

#loginForm form input[type=submit]:hover{
	display: block;
	width: 55%;
	transition-duration: 0.5s;
}

/* HAVI PROGRAM */
#monthly{
	max-width: 1200px;
	margin: 0 auto;
}

#monthly form{
	box-shadow: 0px 0px 10px #999;
	margin-top: 100px;
	padding: 20px;
	animation-name: loadForm;
	animation-duration: 2s;
	overflow: hidden;
}

#monthly form label.header{
	font-size: 25px;
	display: block;
	font-weight: bold;
	margin-bottom: 20px;
}

#monthly form input[type=text]{
	width: 100%;
	display: block;
	padding: 10px;
	font-size: 22px;
	margin-bottom: 20px;
}

#monthly form label.dateText{
	float: left;
	font-size: 22px;
	margin-top: 11px;
	margin-right: 10px;
}

#monthly form input[type=date]{
	display: block;
	padding: 10px;
	font-size: 22px;
	margin-bottom: 20px;
	float: left;
}

#monthly form textarea{
	display: block;
	width: 100%;
	margin-top: 20px;
	font-size: 22px;
	padding: 10px;
	margin-bottom: 10px;
	resize: none;
}

#monthly form input[type=submit]{
	display: block;
	width: 100px;
	float: right;
	cursor: pointer;
	transition-duration: 0.5s;
	padding: 10px;
	font-size: 20px;
	border: none;
	background: var(--main);
	color: white;
	font-weight: bold;
	margin-top: 10px;
}

#monthly form input[type=submit]:hover{
	width: 120px;
	transition-duration: 0.5s;
}

/* sendmail */
#sendmail{
	max-width: 1200px;
	margin: 20px auto 0 auto;
}

#sendmail form{
	box-shadow: 0px 0px 10px #999;
	padding: 20px;
	animation-name: loadProgram;
	animation-duration: 2s;
	overflow: hidden;
}

#sendmail label{
	font-size: 25px;
	font-weight: bold;
	margin: 10px 0;
	float: left;
}

#sendmail input{
	display: block;
	width: 200px;
	float: right;
	cursor: pointer;
	transition-duration: 0.5s;
	padding: 10px;
	font-size: 20px;
	border: none;
	background: var(--main);
	color: white;
	font-weight: bold;
	margin-top: 5px;
}

#sendmail form input[type=submit]:hover{
	width: 220px;
	transition-duration: 0.5s;
}

/* uploaded */
#uploaded{
	max-width: 1200px;
	margin: 100px auto;
}

#uploaded .uploaded-header{
	font-size: 25px;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

#uploaded hr{
	border: 1px solid black;
	margin-bottom: 20px;
}

.program{
	padding: 10px;
	box-shadow: 0px 0px 10px #999;
	margin-bottom: 20px;
	overflow: hidden;
	animation-name: loadProgram;
	animation-duration: 2s;
}

.program .program-name{
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 10px;
	display: block;
}

.program .program-date{
	font-size: 20px;
	margin-bottom: 10px;
	display: block;
}

.program .program-text{
	font-size: 20px;
	margin-bottom: 20px;
	display: block;
	text-align: justify;
	word-wrap: break-word;
}

.program form{
	max-width: 30%;
	float: right;
	overflow: hidden;
	margin
}

.program form input{
	width: 150px;
	margin-left: 10px;
	float: right;
	cursor: pointer;
	transition-duration: 0.5s;
	padding: 10px;
	font-size: 20px;
	border: none;
	background: var(--main);
	color: white;
	font-weight: bold;
	margin-top: 10px;
}

.program form input:hover{
	width: 170px;
	transition-duration: 0.5s;
}