html {
  scroll-behavior: smooth;
}
body {
	font-family: "Courier New", "monospace";
	fontsize: 18px;
	fontstyle: normal;
	color: black;
	font-weight: 200;
}



/* LINKS */
a {
	text-decoration: none;
	display: inline;
	padding: 15px;
	text-align: center;
	color: black;
	font-weight: normal;
	transition: 0.1s ease;
	border-radius: 5px;
}
a:hover {
	background-color: rgba(127, 127, 127, 0.9);
	color: #ffffff;
}

/* Reset styles for the specific <a> tag */
.image-download-link {
    text-decoration: none; /* Removes underline or other text-specific styles */
    color: inherit; /* Keeps the link color neutral */
    display: inline-block; /* Ensures it behaves as a container for the image */
    padding: 0; /* Removes unwanted padding */
    margin: 0; /* Removes unwanted margin */
    border: none; /* Removes borders if any */
}

/* Ensure the <img> inside the link behaves normally */
.image-download-link img {
    display: block; /* Ensures no extra space below the image */
    max-width: 100%; /* Prevents the image from exceeding its container */
    height: auto; /* Maintains the aspect ratio */
}



/* HEADINGS */
h1 {
	text-align: center;
}
h2, h3, p {
	text-align: left;
}



/* NAVIGATION */
nav {
	display: flex;
	flex-flow: row wrap;
}


/* LISTS */
/* READ: https://css-tricks.com/snippets/css/complete-guide-grid/ */
.courses {
	justify-content: center;
}

.items {
	justify-content: left;
}

.videos {
	list-style: none;
	display: grid;
  	padding: 0px;
  	grid-gap: 10px;
	grid-template-rows: auto;
	grid-auto-rows: auto;
}
.videos.lectures{
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	justify-content: center;
}
.videos.questions{
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	justify-content: center;
}
.videos > li > iframe {
	width: 100%;
	height: 100%;
}