/* load fonts */

@font-face {
	font-family: 'LinuxBiolinum'; /* normal */
	src:	local("Linux Biolinum G Regular"),
		url('fonts/linbiolinum_r.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'LinuxBiolinum'; /* italic */
    src:	local("Linux Biolinum G Italic"),
		url('fonts/linbiolinum_ri.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'LinuxBiolinum'; /* bold */
    src:	local("Linux Biolinum G Bold"),
		url('fonts/linbiolinum_rb.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
	font-family: 'LinuxLibertine'; /* normal */
	src:	local("Linux Libertine G Regular"),
		url('fonts/linlibertine_r.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'LinuxLibertine'; /* italic */
    src:	local("Linux Libertine G Italic"),
		url('fonts/linlibertine_ri.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'LinuxLibertine'; /* bold */
    src:	local("Linux Libertine G Bold"),
		url('fonts/linlibertine_rb.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* define standard font size */

@media all {html {font-size: 24px;}}
@media all and (max-width:1000px){html {font-size: 24px;}}
@media all and (max-width:960px){html {font-size: 23px;}}
@media all and (max-width:920px){html {font-size: 22px;}}
@media all and (max-width:880px){html {font-size: 21px;}}
@media all and (max-width:840px){html {font-size: 20px;}}
@media all and (max-width:800px){html {font-size: 19px;}}

@media all and (max-width:520px) {
    html{ font-size: 18px;}
}

/* define colour palette */

:root {
	--light01: #E6E2DD;
	--dark01: #373A36;
	--highlight01: #D48166;
	--highlight02: #D48166;
}

/* light mode */
body {
  color:var(--dark01);
  background-color:var(--light01);
}
/* dark mode */
body.dark-theme {
  color:var(--light01);
  background-color:var(--dark01);
}

/*@media (prefers-color-scheme: dark) {
   defaults to dark theme 
  body {
	color:var(--light01);
	background-color:var(--dark01);
  }
  body.light-theme {
    color:var(--dark01);
	background-color:var(--light01);
  }
}*/

/* HAMBURGER MENU */

/* Hamburger */
.hamburger1 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	height: 25px;
	margin: 0px;
	display: -ms-grid;
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	justify-items: start;
	align-items: center;
	z-index: 120;
}

.hamburger1 div {
  background-color: var(--light01);
  width: 30px;
  height: 3px;
  margin-top: 0px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#toggle1 {
  display: none;
}

#toggle1:checked + .hamburger1 .top {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-top: 12.5px;
}

#toggle1:checked + .hamburger1 .meat {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-top: -6px;
}

#toggle1:checked + .hamburger1 .bottom {
  -webkit-transform: scale(0);
          transform: scale(0);
}

#toggle1:checked ~ .menu1 {
  height: 17.5em;
}


/* Menu */
.menu1 {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	width: 100%;
	background-color: var(--highlight01);
	margin: 0;
	display: -ms-grid;
	display: grid;
	grid-template-rows: 1fr repeat(5, 1fr);
	grid-row-gap: 1em;
	padding: 0;
	list-style: none;
	clear: both;
	text-align: center;
	height: 0px;
	overflow: hidden;
	transition: height .3s ease;
	z-index: 120;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.link1 {
	display:block;
	margin: 0;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 1.1em;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.link1:hover {
	background-color: var(--light01);
	color: var(--dark01);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.link1:hover >.toggle-theme {
	color: var(--dark01);
}
.link1::after {
	height: 0;
	left: 50%;
	top: 50%;
	width: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	 z-index: -1;
}
.link1:hover:after {
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}

/* definition of body */

body {
	font-family: 'LinuxBiolinum';
	margin: 0rem;
	padding: 0rem;
}

/* definition of header */

header {
	box-sizing: border-box;
	width:100%;
	background-color: var(--highlight01);
	padding-top:0rem;
	padding-bottom: 0rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	margin:0;
	border-bottom: none;
	position: fixed; /* Set the header to fixed position */
	top: 0;
}
.titleline {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) 30px;
	grid-template-rows: 50px auto;
	column-gap: 0.5em;
	row-gap: 0;
	justify-items: center;
	align-items: center;
}
#spectrogram-name {
	width:100%;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}
#titlename {
	width=100%;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	justify-self:start;
	margin:0;
}
#titlename h1 {
	font-family:'LinuxLibertine';
	font-weight:normal;
	font-size: 1.5em;
	color: var(--light01);
	margin:0;
	padding-top:0px;
	padding-bottom:4px;
}
nav ul { width:100%; display:table; padding:0; margin:0; }
nav ul li {
	width:100%;
	padding-top:0em;
	padding-bottom:0em;
}
header a {
	color: var(--light01);
	text-decoration:
	none;
}
.toggle-theme {
	background:none;
	font-size:100%;
	width:100%;
	font-family:'LinuxBiolinum';
	color: var(--light01);
	border: none;
	padding: 0;
	cursor: pointer;
}

#affiliation { display:none; }
#affiliation ul {
	text-align:left;
	list-style-type: none;
	padding:0em;
	width:80%;
	margin: 0 auto;
}
#affiliation li {
	display:inline;
	color: var(--highlight01);
}
#affiliation ul li.university:after { content: " |"; }

/* definition of article */

article {
	padding-bottom:0;
	padding-top:0.5em;
	padding-left:0.5em;
	padding-right:0.5em;
	margin-top:50px;
	text-align:left;
	border-top: none;
}
article h1 {
	font-family:'LinuxLibertine';
	font-size: 1.5em;
}
article h2 {
	font-family:'LinuxLibertine';
	font-size: 1.3em;
	margin-top:0;
	margin-bottom:0.5em;
}
article h3 {
	font-family:'LinuxLibertine';
	font-size: 1.1em;
	margin-top:0;
	margin-bottom:0.25em;
}
article p {
	margin: 0.5em 0;
}
article a {
	color: var(--highlight01);
	text-decoration: none;
}
article ul li { padding-bottom:0.25em; }
section {
	padding-bottom: 1em;	
}
.secimage {
	width: 85%;
	display:block;
	margin:auto;
	padding-top:1em;
	border-radius: 50%;
}
.BMBFlogo {
	display:none;
}
.warning {
	border-style:solid;
	border-color:var(--highlight01);
	border-width:thick;
	border-radius: 0.5em;
	margin-top:1.5em;
	padding-left:1em;
	padding-right:1em;
	padding-bottom:1em;
}

.examitem {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: auto;
	row-gap: 0.25em;
	padding-bottom: 0.5em;
}
.examname {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	font-weight: bold;
}
.examdate {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}
.examtime {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}
.examplace {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
}
.contactinformation {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: auto auto;
	column-gap: auto;
	row-gap: 0em;
	padding-bottom: 0.5em;
}
.contactcat {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}
.contactitem {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}
#postitem {
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
}
#letteritem {
	grid-column: 1 / -1;
}
#parcelitem {
	grid-column: 1 / -1;
}
p.handle {
	padding:0;
	margin:0;
}

/* definition of accordions */
.accordion > input[name="collapse"] {
	display: none;
}
.accordion > input[name="collapsesub"] {
	display: none;
}
.accordion > input[name="collapsecontact"] {
	display: none;
}
.accordion .content {
	overflow: hidden;
	height: 0;
	transition: 0.3s;
}
.accordion label {
	color: var(--highlight01);
	cursor: pointer;
	font-weight: normal;
	padding: 0;
    }
.accordion label:hover,
.accordion label:focus {
	background: var(--highlight01);
	color: var(--light01);
}
.accordion .handle label:before {
	content: "▼";
	display: inline-block;
	margin-right: 0.25em;
	font-size: 1em;
	line-height: 0.5em;
	vertical-align: middle;
	transition: 0.3s;  
}
.accordion .handlesub label:before {
	content: "▼";
	display: inline-block;
	margin-right: 0.25em;
	font-size: 1em;
	line-height: 0.5em;
	vertical-align: middle;
	transition: 0.3s;  
}
.accordion > input[name="collapse"]:checked ~ .handle label:before {
	transform: rotate(180deg);
	transform-origin: center;
	transition: 0.3s;
}
.accordion > input[name="collapsesub"]:checked ~ .handlesub label:before {
	transform: rotate(180deg);
	transform-origin: center;
	transition: 0.3s;
}
.accordion > input[name="collapsecontact"]:checked ~ .handle label:before {
	transform: rotate(180deg);
	transform-origin: center;
	transition: 0.3s;
}
.accordion > input[name="collapse"]:checked ~ .content {
	transition: height 0.3s;
	height: auto;
	margin-left:1.5em;
}
.accordion > input[name="collapsesub"]:checked ~ .content {
	height: auto;
	transition: height 0.3s;
	margin-left:1.2em;
}
.accordion > input[name="collapsecontact"]:checked ~ .content {
	transition: height 0.3s;
	height:9em;
	margin-left:1em;
}

/* definition of schedule */

.scheduleweek {
	text-align:center;
}

.schedule {
	width:100%;
	overflow:auto;
	display:grid;
	grid-template-columns: repeat(7, 8em);
	grid-column-gap: 0.25em;
}

.schedule a {
	color: currentcolor;
	text-decoration: underline;
}

.schedhead {
	text-align:center;
}

.mon, .tue, .wed, .thu, .fri, .sat, .sun {
	display: grid;
	grid-template-rows:
		[day] 2em
		[time-0900] 2em
		[time-0930] 2em
		[time-1000] 2em
		[time-1030] 2em
		[time-1100] 2em
		[time-1130] 2em
		[time-1200] 2em
		[time-1230] 2em
		[time-1300] 2em
		[time-1330] 2em
		[time-1400] 2em
		[time-1430] 2em
		[time-1500] 2em
		[time-1530] 2em
		[time-1600] 2em
		[time-1630] 2em
		[time-1700] 2em
		[time-1830] 2em
		[time-1900] 2em
		[time-1930] 2em
		[time-2000] 2em
		[time-2030] 2em
		[time-2100] 2em
		[time-2130] 2em
		[time-2200] 2em;
	grid-row-gap: 0.25em;
}

.morning-1 {
	grid-row: time-0900 / time-1030;
}

.morning-2 {
	grid-row: time-1100 / time-1230;
}

.afternoon {
	grid-row: time-1400 / time-1530;
}

#arr {
	grid-row: time-1400 / time-1700;
}

#dep {
	grid-row: time-0900 / time-1000;
}

#wrmup, #wrmdwn {
	grid-row: time-2000 / time-2200;
}

#cntrbr-soc-1 {
	grid-row: time-1000 / time-1100;
}

#cntrbr-soc-2 {
	grid-row: time-1130 / time-1300;
}

#free-cntrbr {
	grid-row: time-1300 / time-2200;
}

#we-soc-1 {
	grid-row: time-1030 / time-1530;
}

#free-sat {
	grid-row: time-1530 / time-2200;
}

#lnd-soc-out {
	grid-row: time-1000 / time-1130;
}

#lnd-soc-1 {
	grid-row: time-1130 / time-1230;
}

#lnd-soc-2 {
	grid-row: time-1230 / time-1400;
}

#free-lnd {
	grid-row: time-1400 / time-2030;
}

#lnd-soc-ret {
	grid-row: time-2030 / time-2200;
}

#free-lunch {
	grid-row: time-1230 / time-1400;
}

#free-afternoon {
	grid-row: time-1530 / time-2200;
}

#free-sun {
	grid-row: time-0900 / time-2200;
}

#free-fri {
	grid-row: time-1530 / time-2000;
}

.social {
	background-color:var(--highlight01);
}

.free {
	border-style:solid;
}

#classA {
	background-color:#66b9d4;
}

#classB {
	background-color:#82d466;
}

#classC {
	background-color:#b866d4;
}

.class-title, .event-title {
	margin-top:0;
	margin-bottom:0;
}

.class-title, .event-title, .class-time, .event-time, .instructor, .event-note {
	display:block;
	padding-left:0.25em;
}

.class-title, .event-title {
	padding-top:0.25em;
}

/* automatic slideshow */

.slideshow-container {
	position: relative;
	margin: auto;
	z-index:-100;
}

.slide, .slide img {
	width:100%;
}

/* Caption text */
.text {
  color: var(--light01);
  padding: 0.25em 0.375em;
  position: absolute;
  bottom: 0.25em;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 3s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* definition of footer */

footer {
	text-align:center;
	padding-top: 0.25rem;
}

/* special settings for tablet screens */
@media all and (min-width:768px) {
	header {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	article {
		padding-left:1em;
		padding-right:1em;
	}
	.secwithpic {
		display:grid;
		grid-template-columns: 3fr 5fr;
		grid-column-gap: 1em;
		align-items: start;
	}
	.secimage {
		width:100%;
		grid-column-start:1;
		grid-column-end:2;
		margin-top:1.5em;
		padding:0;
	}
	.secwithpic .sectiontext {
		grid-column-start:2;
		grid-column-end:3;
	}
	.titleline {
		grid-template-rows: 75px;
		height:75px;
	}
	.menu1 {
		width: 0;
		text-align: right;
		margin-left:auto;
		margin-right:0;
		height: 0;
		position:relative;
		left:1em;
		z-index: 120;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	nav ul { width:100%; display:table; padding:0; margin:0; }
	nav ul li {
		width:100%;
		padding-top:0em;
		padding-bottom:0em;
	}
	.link1 {
		padding-right:1em;
	}
	.toggle-theme {
		text-align: right;
	}
	#toggle1:checked ~ .menu1 {
		width: 12em;
		height: calc(100vh - 50px);
	}
	.schedule{
		font-size: 15px;
		display:grid;
		grid-template-columns: repeat(7, 9em);
		grid-column-gap: 0.25em;
	}
}

/* special settings for notebook screens */
@media all and (min-width:1280px) {
	#letteritem {
		grid-column-start: 1;
		grid-column-end: 2;
	}
	#parcelitem {
		grid-column-start: 2;
		grid-column-end: 3;
	}
	#letteritem .content {
		font-size:0.8em;
		margin:0
	}
	#parcelitem .content {
		font-size:0.8em;
		margin:0
	}
	.accordion > input[name="collapsecontact"]:checked ~ .content {
		transition: height 0.3s;
		height:8em;
		margin-left:1em;
	}
	article {
		box-sizing:border-box;
		margin-top:75px;
		margin-left:auto;
		margin-right:auto;
		box-sizing: border-box;
		width:100%;
		max-width:1000px;
	}
		.schedule{
		font-size: 15px;
		display:grid;
		grid-template-columns: repeat(7, 1fr);
		grid-column-gap: 0.25em;
	}
}

/* special settings for desktop screens */
@media all and (min-width:1920px) {

.titleline {
	display: grid;
	grid-template-columns: 120px 1fr 4fr;
	grid-template-rows: 75px;
	row-gap: 0;
	align-items: center;
	justify-content: space-between;
}
.hamburger1 { display:none }
.menu1 {
	width:100%;
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	background-color: var(--highlight01);
	margin: 0;
	justify-self: start;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 75px;
	padding: 0;
	list-style: none;
	clear: both;
	align-items: center;
	justify-items: center;
	justify-content: space-between;
	text-align:center;
	height: 75px;
}

.link1 {
		padding-right:0em;
	}
	
#darkmodeswitch {
		padding-right:1em;
	}

nav ul { width:100%; display:table; padding:0; margin:0; }
nav ul li {
	display:table-cell;
	width:20%;
	padding-top:0em;
	padding-bottom:0em;
}

}