:root {
	--colorLightBack: rgb(255, 255, 255);
	--colorDarkBack: rgb(47, 41, 43);
	--colorOSCLight: rgb(227, 51, 128);
	--colorOSCDark: rgb(156, 40, 123);
	--sizeBorderWidth: 5px;
}

html,
body {
	background: var(--colorOSCLight);
	font: 16px/1.2em nimbus-sans, sans-serif;
	margin: 0;
	min-height: 100vh;
}

header {
	background-color: var(--colorDarkBack);
	background-image: url(../../img/rns/rns.webp);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 90vh;
	width: 100%;
}

	h1 {
		color: rgb(255, 255, 255);
		font-family: futura-pt, sans-serif;
		font-size: 16px;
		height: 70px;
		line-height: 18px;
		margin: 0;
		position: absolute;
		right: 20px;
		text-align: center;
		top: 20px;
		width: 138px;
	}
	
	#remi,
	#stefan {
		font-size: 18px;
		text-transform: uppercase;
		text-shadow: rgb(0, 0, 0) -3px 3px 0;
	}
	
	#and {
		font-size: 12px;
		text-shadow: rgb(0, 0, 0) -3px 3px 0;
		text-transform: uppercase;
	}
	
	#do {
		background: rgb(255, 255, 255);
		border-radius: 28px;
		box-shadow: rgb(0, 0, 0) -3px 3px;
		color: rgb(0, 0, 0);
		display: block;
		font-family: "times new roman", serif;
		font-size: 11px;
		font-style: italic;
		left: 50%;
		line-height: 20px;
		position: absolute;
		text-transform: uppercase;
		transform: translateX(-50%);
		top: 15px;
		width: 20px;
		z-index: 1;
	}
	
	#spokane {
		display: block;
		font-size: 30px;
		margin-top: 18px;
		text-shadow: rgb(0, 0, 0) -3px 3px 0;
		text-transform: uppercase;
	}
	
	#logoLine {
		border: 0;
		border-top: 1px solid rgb(255, 255, 255);
		box-shadow: rgb(0, 0, 0) -3px 3px;
		left: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 25px;
		width: 100%;
		z-index: 0;
	}

main {
	background: var(--colorLightBack);
	margin: -60px auto 0;
	max-width: 680px;
	padding: 30px;
	position: relative;
}

	h3 {
		font-family: georgia, "times new roman", sans-serif;
		font-style: italic;
		text-align: center;
	}

	#videos {
		display: grid;
		gap: 30px;
		grid-template-areas: 'a a a a';
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
		#videos li {
			margin: 0;
			padding: 0;
			position: relative;
		}
		
		#videos a {
			color: rgb(0, 0, 0);
			display: block;
			font-size: 14px;
			line-height: 16px;
			height: 100%;
			text-decoration: none;
			width: 100%;
		}
		
		.format,
		time {
			background: var(--colorOSCDark);
			color: var(--colorLightBack);
			font-size: 12px;
			font-weight: bold;
			padding: 3px;
			position: absolute;
			right: -5px;
			top: -10px;
		}
		
		time {
			left: -5px;
			right: unset;
		}
		
		.image {
			border-bottom: var(--sizeBorderWidth) solid var(--colorOSCLight);
			max-width: 100%;
		}
		
		.title {
			background: rgba(0, 0, 0, .2);
			box-sizing: border-box;
			bottom: 5px;
			color: var(--colorLightBack);
			left: 0;
			padding: 5px;
			position: absolute;
			text-shadow: rgba(0, 0, 0, 1) 1px 1px 0;
			width: 100%;
		}
		
		#videos a:hover .title {
			background: rgba(0, 0, 0, .75);
		}

		#zune {
			background-color: var(--colorLightBack);
			background-image: url(../../img/rns/zune.png);
			background-position: center center;
			border-radius: 48px;
			background-repeat: no-repeat;
			background-size: 38px;
			border: 6px solid var(--colorLightBack);
			height: 48px;
			left: 50%;
			margin: 0;
			position: absolute;
			top: 0;
			transform: translate(-50%, -50%);
			width: 48px;
		}

	footer {
		position: relative;
	}

		#osclogo {
			background-color: var(--colorOSCDark);
			background-image: url(../../img/logo.svg);
			background-position: center center;
			border-radius: 48px;
			background-repeat: no-repeat;
			background-size: 38px;
			border: 6px solid var(--colorOSCLight);
			height: 48px;
			left: 50%;
			margin: 0;
			position: absolute;
			top: 0;
			transform: translate(-50%, -42px);
			width: 48px;
		}
		
		#oscBackParagraph {
			padding: 16px 0 24px;
			text-align: center;
		}
		
		#oscBack {
			color: var(--colorLightBack);
			font-weight: bold;
			text-decoration: none;
			text-shadow: rgba(0, 0, 0, .2) 1px 1px 0;
		}
		
	ol a {
		color: var(--colorOSCDark);
	}
				
@media screen and (max-width: 767px) {
	#videos {
		gap: 30px;
		grid-template-areas: 'a a';
	}
}