/* == COLORS ======================= */
	@font-face {
		font-family: 'Silkscreen'; /*a name to be used later*/
		src: url(fonts/Silkscreen-Regular.ttf); /*URL to font*/
	}

	html {
		color: #f90808;
		font-family: 'Silkscreen';
	}
	
	html a  {
		color: #88c0bd;
	}

	html a:visited {
		color: #5f1cc3;
	}

	.dark-mode {
	
  		background-color: #0F0F0F;
  }

	.dark-mode a:visited {
		color: #F0F0F0;
	}


	/* == COLORS ======================= */

	div {
		margin: 0 auto;
		width: calc(57.5em - 50px);
	}

	a {
		text-decoration: none;
	}

	body {
		color:beige
	}

	li a {
		font-size: 1.25em;
	}

	h1 {
		text-align: center;
		font-size: 5em;
	}

	h2 {
		text-align: center;
		font-size: 3em;
		font-weight: normal;
	}

	h3 {
		font-weight: normal;
		text-align: center;
		font-size: 1.75em;
		margin: 0.1em 0em 0.1em 0em;
	}

	a h3 {
		font-size: 1.25em;
		margin: 0.1em 0em 0.1em 0em;
	}

	p1,p2 {
		text-align: center;
		color: rgb(112, 148, 168);
		font-size: 1.4em;
		margin: 0.6em 0em 0.6em 0em;
		padding: 0.5em;
	}

	footer {
		text-align: center;
	}

	ul {
		color:#9a83bc;
		font-size: 0.8em;
		margin: 0 auto;
		width: calc(50em - 50px);
		padding: 1em 4em 1em 4em;
		border-radius: 1.5em;
		border-style: solid;
		border-width: 0.2em;
		list-style-type: none;
	}
	ol {
		color:rgb(182, 129, 185);
		font-size: x-small;
	}
	button {
		position: sticky;
		top: 1em;
		margin: 0 auto;
		padding: 1em 1em 1em 1em;
		border-radius: 0.5em;
		border-style: none;
	}

	li {
		padding: 0.05em 0em 0.05em 0em;
	}

	.centered {
		text-align: center;
	}

	.title {
		text-align: center;
		padding: 2em 0em 2em 0em;
		color:beige
	}

	.unselectable {
		user-select: none;
		text-align: center;
	}

	/* Page Background */
	body {
		background-image: url(assets/bg/2.png);
		background-size: cover;
	}

	/* Header and footer adjustments*/

	body {
		min-height: 100vh;
		margin: 0;
	  }
	  
	header {
		min-height: 50px;
		background: lightcyan;
	}
	  
	footer {
		min-height: 50px;
		/*background: PapayaWhip;*/
	}
	  
	  
	  /* The article fills all the space between header & footer */
	  
	body {
		display: flex;
		flex-direction: column;
	}
	  
	main {
		flex: 1;
	}