body  { 
	font-family: Arial, Helvetica, sans-serif;
}
@font-face {
      font-family: Amagro;
      src: url(fonts/Amagro.ttf);
}
h1       { 
	font-family: Amagro;
    font-size: 2.6em;
	margin: 20px; 
	color: #FFFFFF;
	padding: 15px;
	text-align: center;
	background-color: #E5E5F7;
	opacity: 0.8;
	background-image:  radial-gradient(#333333 17%, #000000 18% 35%, transparent 36.5%), radial-gradient(#333333 17%, #000000 18% 35%, transparent 36.5%), radial-gradient(#000000 34%, #333333 36% 68%, transparent 70%), repeating-linear-gradient(45deg, #333333 -12.5% 12.5%, #000000 0 37.5%);
	background-position: -20px -20px, 20px 20px, 0 0, 0 0;
	background-size: 80px 80px, 80px 80px, 40px 40px, 80px 80px;
	border-bottom: #a16473 solid 8px;
}
.headly {
	background-color: #000000;
	color: #FFFFFF;
	padding: 10px 15px;
	margin-top: -20px;
}
.course {
	font-size: 95%; 
	font-weight: bold;
	transform: translateY(-15px);
}

/* heading background from https://www.magicpattern.design/tools/css-backgrounds */
.imaging {
	max-width: 100%; 
	height: auto; 
	margin-top: -25px;
	}
.footer {
	font-size: 90%;
	text-align: center;
    border-radius: 20px;
	background-color: white;
	margin: 0 60px;
	height: 40px;
}
.tiles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	padding: 20px;
}

.tile {
    flex: 1 0 300px;
    background-color: #EFEFEF;
	padding: 15px;
	border: 1px solid black;
    border-radius: 20px;
    transition: transform 0.3s ease-in-out;   
}

.tile:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.nice {
	padding: 4px 9px;
	background-color: #FFFFCF;
	border-radius: 25px;
	font-weight: bold;
}
.nice:hover {
	padding: 4px 9px;
	background-color: #000000;
	color: #FFFFFF;
	border-radius: 25px;
	font-weight: bold;
}	
li {
	margin-left: -25px;
}