/* ----------- Webpage ----------- */



/* ----------- Fonts ----------- */
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/hk-grotesk.min.css");
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
	font-family: 'Werksatz-Regular';
	src: url('/fonts/Werksatz-Regular.woff2') format('woff2'); /* Pretty Modern Browsers */
}
/* ----------- Fonts End ----------- */



/* ----------- Variables ----------- */
:root{
	--light:#f9f9f9;
	--dark: #151515;
	--grey: #666676;
}
/* ----------- Variables End ----------- */



/* ----------- Webpage Grid ----------- */
/* I decided on creating an intuitive and flexible webpage with sticky navigation sidebar and scrollable content with the help of CSS Grid*/
*{
	scroll-behavior: smooth;
	margin:0;
	padding:0;
	box-sizing: border-box;

}

body {
	overflow: hidden; /*this step ensures that there should be nothing outside of the parent container*/
	padding: 0;
	margin: 0;
	background-color: var(--light);
}

#alles {
	display: grid;
	height: 100vh;
	width: 100vw;

	grid-template-areas:
	"header header header header"
	"subnav haupt haupt haupt"
	"footer footer footer footer";
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 148px 1fr 30px;
}
/* ----------- Webpage Grid End ----------- */



/* ----------- Highlight ----------- */
::selection{
	background: rgb(255, 255, 0);
	color: var(--dark);
}
/* ----------- Highlight End ----------- */



/* ----------- Superscript ----------- */
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align:super
}
/* ----------- Superscript End ----------- */



/* ----------- Header ----------- */
#header {
	grid-area: header;

	display: flex;
	justify-content: left;
	cursor: pointer;

	font-family: 'Werksatz-Regular', sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 1.05em;

	border-bottom:1px solid var(--dark);
	background: var(--light);
	color: var(--dark);

	margin: 0px;
	padding: 16px 0px 4px 0px; /* Shorthand Property: padding-top; padding-rigth; padding-bottom; padding-left;*/

	text-shadow: 0 0 0 var(--grey);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#header:hover {
	text-shadow:
	-0.35px -0.35px 0 var(--grey),
	0.35px -0.35px 0 var(--grey),
	-0.35px 0.35px 0 var(--grey),
	0.35px 0.35px 0 var(--grey);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#header h1 {
	width: 25.5vw;
	text-indent: 16px; /* for reasons unknown to me, both the padding-left and margin-left properties break the flex menu intended for mobile usage,
	therefore I decided to use the text-indent property to "fake" the space between the content and its border.*/
	align-self: baseline;
	padding-top: 1px;
}

#subheading { /* div element combining "Prof. Jörg Petri", "HSRW" and "Courses" headings, so that the text-ident property could be assigned to all of them simultaniously.
Reason>In comparison to the margin-left property, text-ident specifies how much horizontal space text should be moved only before the beginning of the first line of the text, if not grouped*/
width: 74.5vw;
text-indent: 8px;
align-self: baseline;
}
/* ----------- Header End ----------- */


/* ----------- Navigation ----------- */
#subnavigation_float {
	grid-area: subnav;

	background: var(--light);

}

#subnavigation_float ul li {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.5px;
	line-height: 1.05em;
}

#subnavigation_float ul li a {
	display:block;

	text-align: left;
	text-decoration:none;
	text-indent: 16px; /* here again, both the padding-left and margin-left properties break the flex menu intended for mobile usage,
	therefore I decided to use the text-indent property to "fake" the space between the content and its border.*/

	color: var(--dark);
	border-bottom:1px solid var(--dark);

	padding: 12px 0px 12px 0px; /* Shorthand Property: padding-top; padding-rigth; padding-bottom; padding-left;*/

	transition-property: opacity, padding-left;
	-webkit-transition: -webkit-transform 1s, 0.5s;
	-moz-transition: -moz-transform 1s, 0.5s;
	transition: transform 1s, 0.5s;
}

#subnavigation_float ul li a:hover {
	color: var(--grey);
	opacity: 0.75;

	padding-left: 40px;
}
/* ----------- Navigation End ----------- */



/* ----------- Main Content ----------- */
#haupt{
	grid-area: haupt;

	overflow-y: scroll;
	border-left:1px solid var(--dark);
	background: var(--light);
	color: var(--dark);
	padding: 8px 0px 4px 16px; /* Shorthand Property: padding-top; padding-rigth; padding-bottom; padding-left;*/
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#text {
	width: 680px;
	position: relative;
}

#text p {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.5px;
	line-height: 1.35em;

	margin-top: 0px;
}

#text h2 {
	font-family: 'Werksatz-Regular', sans-serif;
	font-weight: 600;
	font-size: 34px;
	line-height: 1.05em;

	margin-top: 24px;
	margin-bottom: 4px;

	text-shadow: 0 0 0 var(--dark);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#text h2:hover {
	text-shadow:
	-0.35px -0.35px 0 var(--dark),
	0.35px -0.35px 0 var(--dark),
	-0.35px 0.35px 0 var(--dark),
	0.35px 0.35px 0 var(--dark);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s; /*Using font-weight transitions on :hover states always results in a slightly unpleasant jump
	I wasn't able to make it work with JavaScript either, so as a workaround I used text-shadow transition to fake the font-weight. Feel free to delete, if
	deemed unnecessary*/
}

#text h3 {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 26px;
	font-style: italic;
	letter-spacing: -0.5px;
	line-height: 1.35em;

	margin: 4px 0px 4px 0px; /* Shorthand Property: margin-top; margin-rigth; margin-bottom; margin-left;*/
}

#text ul li {
	font-family: 'PT Serif', serif;
	font-size: 26px;
	letter-spacing: -0.5px;
	line-height: 1.35em;

	margin: 4px 0px 4px 0px; /* Shorthand Property: margin-top; margin-rigth; margin-bottom; margin-left;*/
}

#text-bottom {
	width: 680px;
}

#text-bottom p {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.5px;
	line-height: 1.35em;

	margin-top: 0px;
}

#text-bottom h2 {
	font-family: 'Werksatz-Regular', sans-serif;
	font-weight: 600;
	font-size: 34px;
	line-height: 1.05em;

	margin-top: 24px;
	margin-bottom: 4px;

	text-shadow: 0 0 0 var(--dark);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#text-bottom h2:hover {
	text-shadow:
	-0.35px -0.35px 0 var(--dark),
	0.35px -0.35px 0 var(--dark),
	-0.35px 0.35px 0 var(--dark),
	0.35px 0.35px 0 var(--dark);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s; /*Using font-weight transitions on :hover states always results in a slightly unpleasant jump
	I wasn't able to make it work with JavaScript either, so as a workaround I used text-shadow transition to fake the font-weight. Feel free to delete, if
	deemed unnecessary*/
}

#text-bottom h3 {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 26px;
	font-style: italic;
	letter-spacing: -0.5px;
	line-height: 1.35em;

	margin: 4px 0px 4px 0px;
}

#text-bottom ul li {
	font-family: 'PT Serif', serif;
	font-size: 26px;
	letter-spacing: -0.5px;
	line-height: 1.35em;

	margin: 4px 0px 4px 0px;
}

a {
	color: var(--grey);
	text-decoration: none;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

a:hover {
	color: var(--dark);
	text-decoration: underline;
}
/* ----------- Main Content End ----------- */



/* ----------- Footer ----------- */
/*Footer here doesn't have any real purpose, however it's included as a part of the design layout. It nevertheless provides a sense of completion and contributes
to the website's overall aesthetics. Also, improves the readability of the scrollable content*/
#footer {
	grid-area: footer;

	border-top:1px solid var(--dark);
	background: var(--light);
}
/* ----------- Footer End ----------- */



/* ----------- Webpage End----------- */



/* ----------- Media Queries/Breakpoints For Standard Devices ----------- */



/* Mobile (Extra small devices)  iPhone SE, iPhone 6 to X, iPhone 8 Plus; up to 640px */

/*up to 480px*/
@media only screen and (max-width: 480px) {
	#alles {
		grid-template-areas:
		"header"
		"subnav"
		"haupt"
		"footer";

		grid-template-columns: 1fr;
		grid-template-rows: 136px 72px 1fr 30px;
	}

	#header {
		display: block;
		justify-content: left;
		font-size: 26px;
		margin: 0;
		align-content: baseline;
	}

	#header h1 {
		width: 100vw;
		text-indent: 16px;
		padding-top: 1px;
	}

	#subheading {
		width: 100vw;
		text-indent: 16px; /*check line 89 for explanation;*/
	}

	#subnavigation_float {
		display: flex;
		align-items: center;  /* specifies the default alignment for items inside the flexible container*/
		list-style: none;
		text-align: center; /*sets the horizontal alignment of the inline-level content inside a block element to the center*/
	}

	#subnavigation_float ul li {
		display: inline-block; /*places buttons as an inline element (on the same line as adjacent content).*/
	}

	#subnavigation_float ul li a {
		color: var(--dark);
		border:1px solid var(--dark);
		border-radius: 16px;
		text-decoration:none;

		font-size: 16px;
		letter-spacing: -0.5px;
		line-height: 1.05em;
		text-indent: 0px;

		padding:4px 4px 4px 4px; /* Shorthand Property: padding-top; padding-rigth; padding-bottom; padding-left;*/
		margin: 3px;

		transition-property: font-size color border-color;
		transition-duration: 0.6s;
		transition-delay: 0.2s;

		transition-property: opacity, padding-left;
		-webkit-transition: -webkit-transform 1s, 0.2s;
		-moz-transition: -moz-transform 1s, 0.2s;
		transition: transform 1s, 0.2s
	}

	#subnavigation_float ul li a:hover {
		color: var(--grey);
		border:1px solid var(--grey);
		opacity: 0.75;

		padding-left: 4px;

		font-size: 18px;
	}

	#haupt{
		border-top:1px solid var(--dark);
		border-left:none;
		padding-top: 8px;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 8px;
	}

	#text {
		width: 100%;
	}

	#text p {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text h2 {
		font-size: 32px;
		line-height: 1.05em;
	}

	#text h3 {
		font-size: 24px;
		font-style: italic;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text ul li {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text-bottom {
		width: 100%;
	}

	#text-bottom p {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text-bottom h2 {
		font-size: 32px;
		line-height: 1.05em;
	}

	#text-bottom h3 {
		font-size: 24px;
		font-style: italic;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text-bottom ul li {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}
}
/*up to 480px End*/



/*481px-640px*/
@media only screen and (min-width: 481px) and (max-width: 640px)  {
	#alles {
		grid-template-areas:
		"header"
		"subnav"
		"haupt"
		"footer";

		grid-template-columns: 1fr;
		grid-template-rows: 142px 80px 1fr 30px;
	}

	#header {
		display: block;
		justify-content: left;
		font-size: 28px;
		margin: 0;
		align-content: baseline;
	}

	#header h1 {
		width: 100vw;
		text-indent: 16px;
		padding-top: 1px;
	}

	#subheading {
		width: 100vw;
		text-indent: 16px;
	}

	#subnavigation_float {
		display: flex;
		align-items: center;  /* specifies the default alignment for items inside the flexible container*/
		list-style: none;
		text-align: center; /*sets the horizontal alignment of the inline-level content inside a block element to the center*/
	}

	#subnavigation_float ul li {
		display: inline-block; /*places buttons as an inline element (on the same line as adjacent content).*/
	}

	#subnavigation_float ul li a {
		color: var(--dark);
		border:1px solid var(--dark);
		border-radius: 16px;
		text-decoration:none;

		font-size: 18px;
		letter-spacing: -0.5px;
		line-height: 1.05em;
		text-indent: 0px;

		padding:4px 4px 4px 4px; /* Shorthand Property: padding-top; padding-rigth; padding-bottom; padding-left;*/
		margin: 3px;

		transition-property: font-size color border-color;
		transition-duration: 0.6s;
		transition-delay: 0.2s;

		transition-property: opacity, padding-left;
		-webkit-transition: -webkit-transform 1s, 0.2s;
		-moz-transition: -moz-transform 1s, 0.2s;
		transition: transform 1s, 0.2s
	}

	#subnavigation_float ul li a:hover {
		color: var(--grey);
		border:1px solid var(--grey);
		opacity: 0.75;

		padding-left: 4px;

		font-size: 20px;
	}

	#haupt{
		border-top:1px solid var(--dark);
		border-left:none;
		padding-top: 8px;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 8px;
	}

	#text {
		width: 100%;
	}

	#text p {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text h2 {
		font-size: 32px;
		line-height: 1.05em;
	}

	#text h3 {
		font-size: 24px;
		font-style: italic;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text ul li {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text-bottom {
		width: 100%;
	}

	#text-bottom p {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text-bottom h2 {
		font-size: 32px;
		line-height: 1.05em;
	}

	#text-bottom h3 {
		font-size: 24px;
		font-style: italic;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}

	#text-bottom ul li {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.35em;
	}
}
/*481px-640px End*/

/* Mobile (Extra small devices)  iPhone SE, iPhone 6 to X, iPhone 8 Plus, up to 640px End */



/*641px-768px*/
@media only screen and (min-width:641px) and (max-width:768px) {
	#alles {
		grid-template-rows: 120px 1fr 30px;
	}

	#header {
		font-size: 30px;
	}

	#subheading {
		align-self: baseline;
	}

	#subnavigation_float ul li {
		font-size: 18px;
	}

	#subnavigation_float ul li a:hover {
		padding-left: 5px;
	}

	#haupt{
		padding: 8px 75px 8px 16px;
	}

	#text {
		width: 100%;
	}

	#text p {
		font-size: 24px;
	}

	#text h2 {
		font-size: 32px;
	}

	#text h3 {
		font-size: 24px;
	}

	#text ul li {
		font-size: 24px;
	}

	#text-bottom {
		width: 100%;
	}

	#text-bottom p {
		font-size: 24px;
	}

	#text-bottom h2 {
		font-size: 32px;
	}

	#text-bottom h3 {
		font-size: 24px;
	}

	#text-bottom ul li {
		font-size: 24px;
	}
}
/*641px-768px End*/



/* Medium devices, tablets, iPad, landscape e-readers, landscape smartphones, low-res laptops ands desktops; 769px-960px */
@media only screen and (min-width:769px) and (max-width:960px) {
	#alles {
		grid-template-rows: 132px 1fr 30px;
	}

	#header {
		font-size: 34px;
	}

	#header h1 {
		padding-top: 1.75px;
	}


	#subnavigation_float ul li {
		font-size: 20px;
	}

	#subnavigation_float ul li a:hover {
		padding-left: 5px;
	}

	#haupt{
		padding: 8px 100px 8px 16px;
	}

	#text {
		width: 100%;
	}

	#text p {
		font-size: 24px;
	}

	#text h2 {
		font-size: 32px;
	}

	#text h3 {
		font-size: 24px;
	}

	#text ul li {
		font-size: 24px;
	}

	#text-bottom {
		width: 100%;
	}

	#text-bottom p {
		font-size: 24px;
	}

	#text-bottom h2 {
		font-size: 32px;
	}

	#text-bottom h3 {
		font-size: 24px;
	}

	#text-bottom ul li {
		font-size: 24px;
	}
}
/* Medium devices, tablets, iPad, landscape e-readers, landscape smartphones, low-res laptops ands desktops; 769px-960px End*/



/* Big landscape tablets, laptops, and desktops; 961px-1024px */
@media only screen and (min-width:961px) and (max-width:1024px) {
	#subnavigation_float ul li {
		font-size: 24px;
	}

	#subnavigation_float ul li a:hover {
		padding-left: 10px;
	}

	#haupt{
		padding: 8px 125px 8px 16px;
	}

	#text {
		width: 100%;
	}

	#text p {
		font-size: 26px;
	}

	#text h2 {
		font-size: 34px;
	}

	#text h3 {
		font-size: 26px;
	}

	#text ul li {
		font-size: 26px;
	}

	#text-bottom {
		width: 100%;
	}

	#text-bottom p {
		font-size: 26px;
	}

	#text-bottom h2 {
		font-size: 34px;
	}

	#text-bottom h3 {
		font-size: 26px;
	}

	#text-bottom ul li {
		font-size: 26px;
	}
}
/* Big landscape tablets, laptops, and desktops; 961px-1024px End */




/* High-resolution laptops & desktop monitors; 1025px-1280px */

/* 1025px-1140px */
@media only screen and (min-width:1025px) and (max-width:1140px) {
	#subnavigation_float ul li {
		font-size: 24px;
	}

	#subnavigation_float ul li a:hover {
		padding-left: 20px;
	}

	#haupt{
		padding: 8px 150px 8px 16px;
	}

	#text {
		width: 100%;
	}

	#text p {
		font-size: 26px;
	}

	#text h2 {
		font-size: 34px;
	}

	#text h3 {
		font-size: 26px;
	}

	#text ul li {
		font-size: 26px;
	}

	#text-bottom {
		width: 100%;
	}

	#text-bottom p {
		font-size: 26px;
	}

	#text-bottom h2 {
		font-size: 34px;
	}

	#text-bottom h3 {
		font-size: 26px;
	}

	#text-bottom ul li {
		font-size: 26px;
	}
}
/* 1025px-1140px End */



/* 1141px-1280px */
@media only screen and (min-width:1141px) and (max-width:1280px) {

	#subnavigation_float ul li {
		font-size: 26px;
	}

	#subnavigation_float ul li a:hover {
		padding-left: 30px;
	}

	#haupt{
		padding: 8px 250px 8px 16px;
	}

	#text {
		width: 100%;
	}

	#text p {
		font-size: 26px;
	}

	#text h2 {
		font-size: 34px;
	}

	#text h3 {
		font-size: 26px;
	}

	#text ul li {
		font-size: 26px;
	}

	#text-bottom {
		width: 100%;
	}

	#text-bottom p {
		font-size: 26px;
	}

	#text-bottom h2 {
		font-size: 34px;
	}

	#text-bottom h3 {
		font-size: 26px;
	}

	#text-bottom ul li {
		font-size: 26px;
	}
}
/* 1141px-1280px End */

/* High-resolution laptops & desktop monitors; 1025px-1280px End */



/* Potential fix for extra large devices & desktop monitors; 1281px and above */


@media  screen and (min-width: 1921px) { /*feel free to change the value to 2561px(MacBook Air); 3201px(MacBook Pro/iMac) or 3841px (iMac), if needed*/
	/*
	#alles {
	display: grid;
	height: 100vh;
	width: 100vw;

	grid-template-areas:
	"header header header header"
	"subnav haupt haupt haupt"
	"footer footer footer footer";
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 164px 1fr 30px;
}

#header {
margin: 0px;
padding: 24px 0px 12px 0px;
}
*/

}