:root {
			--background: rgb(17, 15, 15);
			--text:  #c5d2da;
			--line:  #b2c8d4;
			}

			
			* {
				box-sizing: border-box;
				font-synthesis: none;
			}
		
			body {
				margin: 0;
				padding: 36px 40px 0px;
				
				background: var(--background);
				color: var(--text);
				
				font-family: sans-serif;
				font-size: 14px;
				line-height: 1.4em;
			}

			nav{
				font-size:1.2em;

			}
			
			h1, h2, p {
				font-size: 1em;
				font-weight: 400;
				margin: 0;
			}
			
			a {
				color: inherit;
				text-decoration: none;
			}
			
			a:hover {opacity: 0.8;}
			
			ul {
				list-style-type: none;
				margin-block: none;
				padding-inline-start: 0px;
			}
			
			hr {
				border: none;
				border-top: 0.2px dotted var(--line);
				margin: 1em 16px;
			}

			.hr_no_marg_H {
				margin: 1em 0px;
			}

			.HR_1{
				border-top: 0.6px dashed rgba(200, 255, 255, 0.3);
				
			}
		
			img {
				width: 100%; /* Fills the column width */
				height: auto; /* Maintains aspect ratio */
				grid-column: span 1; /* Explicitly span one column */
				object-fit: contain; /* Ensures the image fits nicely */
				border-radius: 4px;
			}


			/* -------------------------------------------------------------- */

			.grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
			}

			.grid_2 {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
}

			.pad{padding: 16px}
			.pad_L{padding: 24px}

			.pad_L_V{padding: 24px 16px}
			.pad_XL_V{padding: 32px 16px}
			.pad_XXL_V{padding: 64px 16px}

			.about {grid-column: span 1;}
			.intro {grid-column: span 2;}

			.pad_bottom	{padding-bottom: 1em;}
			.pad_bottom_L	{padding-bottom: 2em;}

			.marg_bottom {margin-bottom: 1em;}

			.center {text-align: center;}


			/* -------------------------------------------------------------- */


			.overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
			opacity: 0;
			transition: opacity 0.4s ease;
			cursor: cell;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 1.2em;
			backdrop-filter: blur(16px);
			}

			.has_overlay {
			position: relative;
			}
			
			.has_overlay:hover .overlay {
			opacity: 1;
			
			}


			/* -------------------------------------------------------------- */



			@media screen and (max-width: 1200px) {

				body {
				margin: 0;
				padding: 18px 20px 0px;
				}

				.pad{
				padding: 0px 16px 32px;
				}

				section { height: auto; }
				
				.grid, 
				.grid_2 { 
					display: block;

				}

				.hero {
					display: flex;
					flex-direction: column-reverse;
				}

				.late { display:grid }

				.pad_XXL_V{padding: 16px 16px;}



			.has_overlay:hover .overlay {
			opacity: 0;
			
			}
			}


			@media screen and (max-width: 600px) {
				
				.late { display:block };
			}