@import url( "https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500&display=swap" );

html {
	--opacity: 80%;
	--opacity-hover: 90%;
	--padding: 1.6em;
	--font-light: 300;
	--font-heavy: 500;
	--border-radius: 12px;
	--color-front: rgba( 255 , 255 , 255 , 1.0 );
	--color-back: rgba( 0 , 0 , 0 , 1.0 );
}

body {
	align-content: space-between;
	background-attachment: fixed;
	background-position-x: center;
	background-position-y: center;
	background-size: cover;
	background-image: linear-gradient( to top right , purple , indigo );
	display: grid;
	color: var( --color-front );
	font-family: 'Ubuntu', sans-serif;
	font-size: 1.2em;
	font-weight: var( --font-light );
	grid-row-gap: var( --padding );
	grid-template-columns: auto;
	grid-template-rows: max-content auto max-content;
	height: 100vh;
	justify-content: space-around;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	overflow-y: auto;
	text-align: center;
}

a {
	color: white;
	text-decoration: none;
}
a:visited {
	color: white;
}

header {
	background: var( --color-back );
	border-bottom-left-radius: var( --border-radius );
	border-bottom-right-radius: var( --border-radius );
	font-size: 1.8em;
	font-weight: var( --font-heavy );
	opacity: var( --opacity );
	padding-bottom: calc( var( --padding ) / 2 );
	padding-left: var( --padding );
	padding-right: var( --padding );
	padding-top: calc( var( --padding ) / 2 );
	width: max-content;
	transition: opacity 1s;
	margin-left: auto;
	margin-right: auto;
}

header:hover {
	opacity: var( --opacity-hover );
}

main {

}

article {
	background: var( --color-back );
	border-bottom-left-radius: var( --border-radius );
	border-bottom-right-radius: var( --border-radius );
	border-top-left-radius: var( --border-radius );
	border-top-right-radius: var( --border-radius );
	max-width: 100%;
	opacity: var( --opacity );
	padding-bottom: var( --padding );
	padding-left: var( --padding );
	padding-right: var( --padding );
	padding-top: var( --padding );
	transition: opacity 1s;
}

article:hover {
	opacity: var( --opacity-hover );
}

footer {
	background: var( --color-back );
	border-top-left-radius: var( --border-radius );
	border-top-right-radius: var( --border-radius );
	font-size: 1.8em;
	opacity: var( --opacity );
	padding-bottom: calc( var( --padding ) / 2 );
	padding-left: var( --padding );
	padding-right: var( --padding );
	padding-top: calc( var( --padding ) / 2 );
	width: max-content;
	transition: opacity 1s;
	margin-left: auto;
	margin-right: auto;
}

footer:hover {
	opacity: var( --opacity-hover );
}