@charset "UTF-8";
/* CSS Document */

body{
	background: linear-gradient(180deg, #B7F6E9 0%, #E6FFDC 100%);
	margin:32px;
	margin-top:40px;
}

html,body{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	scroll-behavior: smooth;
}

p,li{
	line-height:1.55;
	font-size:1.2em;
	font-weight: 400;
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

header{
	margin-left:20px;
	margin-top: 0;
}

header h1{
	font-family: "hagrid", sans-serif;
	font-weight:700;
	font-size:2.4em;
	margin-bottom:0;
	line-height:1;
}

header p{
/*	font-family: "hagrid", sans-serif;*/
	font-weight:400;
	font-size:1.2em;
	margin-top:8px;
	margin-bottom:10px;
}

header h2{
	font-size:1.6em;
	text-align:center;
	margin-bottom:1px;
/*	background-color:#FDFBB1;*/
	padding:12px;
	margin-right:20px;
	margin-top:10px;
}

#scheduletitle{
	margin-left:165px;
}

h2,h3{
	font-family: "hagrid", sans-serif;
	line-height:1;
	font-size:1.3em;
}

nav{
	font-weight:300;
	float:right;
	position: absolute;
	top:0;
	right:0;
	margin-top:6px;
	margin-right: 30px;
	font-size:0.9em;

}

nav li{
	font-family: "hagrid", sans-serif;
	list-style-type:none;
	text-decoration: none;
	float:left;
	margin:5px;
	margin-left:7px;
	padding:5px;
}

nav a:link, nav a:visited{
	text-decoration:none;
	color:black;
}

nav a:hover{
	color:#E76262;
}

nav a:active{
	opacity:0.7;
}

.on{
	text-decoration:underline;
}

.container{
	display:grid;
	flex:1;
	grid-template-areas:
		'a b'
		'a c';
}

#description{grid-area:a;}
#info{grid-area:b;}
#texts{grid-area:c;}

article{
	background-color:#FDFBB1;
	margin:20px;
	padding:5px;
	padding-top:20px;
	padding-left:40px;
	padding-right:40px;
	padding-bottom:10px;
}

#info a:link, #info a:visited{
	color:#E76262;
	text-decoration:none
}

#info a:hover{
	opacity:0.7;
}

#info a:active{
	opacity:1;
	color:gray;
}

.container-e{
	display:grid;
	flex:1;
	grid-template-areas:
		'u w'
		'v x'
		'v y'
		'z z';
}

#expectations{grid-area:u;}
#workload{grid-area:v;}
#Evaluation{grid-area:w;}
#digitalcomm{grid-area:x}
#absences{grid-area:y}
#contact{grid-area:z}

main{
	display:flex;
	align-items:flex-start;
}

.months{
	font-family: "hagrid", sans-serif;
	font-weight:300;
	position:sticky;
	top:6%;
	margin-left:-20px;
	margin-right:30px;
	margin-top:53px;
}

.months li{
	list-style-type:none;
	background-color:#fff7a8;
	margin-top:10px;
	padding:2px;
	padding-left:12px;
	padding-right:12px;
	text-align:center;
}

.months a{
	text-decoration:none;
	font-size:0.9em;
}

.months a:link, .months a:visited{
	color:black;
}

.months a:hover{
	color:#E76262;
}

.months a:active{
	opacity:0.7;
}

.container-s{
	flex:1;
	margin-top:-30px;
	margin-right:20px
}

.schedule-box{
	flex:1;
	background-color:#fff7a8;
	padding:15px;
	padding-left:30px;
	padding-right:30px;
}

.schedule-row h2{
	padding-top:18px;
	text-align:center;
	font-size:1.4em;
}

.schedule-row h3{
	font-size:1.1em
}

.rowcon{
	display:flex;
	gap:20px;
}

#noclass{
	background-color:#FFB4A4;
}

footer{
	width:100%;
	text-align:center;
	padding:10px;
	margin-top:30px;
}

footer a{
	color:#E76262;
}

@media screen and (max-width:950px){
	.container{
		grid-template-areas:
		'a'
		'b'
		'c';
	}
	
	.container-e{
		grid-template-areas:
			'u'
			'w'
			'v'
			'x'
			'y'
			'z';
	}
	
	.rowcon{
		flex-direction:column;
		gap:0px;
	}
	
}