* {
	box-sizing: border-box;
}
:root {
	--background: #000000;
	--primary: #991000;
	--secondary: #FFFFFF;
	--tertiary: #696969;
	--sectionSpacing: 0.5em;
	--baseFontSize: 21px;
	--largeScreenFont: 24px;
}
@font-face {
	font-family: 'Terminus';
	src: url('../graphics/fonts/TerminusTTF_4.49.3.woff') format('woff'),
		url('../graphics/fonts/TerminusTTF_4.49.3.woff2') format('woff2');
}
@keyframes colourRotate {
  from {
    color: #ff0000;
  }
  12.5% {
	color: #ff8000;
  }
  25% {
	color: #ffff00;
  }
  37.5% {
	color: #00ff00;
  }
  50% {
    color: #00ffff;
  }
  62.5% {
    color: #0000ff;
  }
  75% {
    color: #8700ff;
  }
  87.5% {
    color: #ff00ff;
  }
  100% {
    color: #ff0000;
  }
}
@keyframes rainbowRotate {
	to {
		--angle: 360deg;
	}
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@media (min-width: 3840px) {
	:root {
		--baseFontSize: var(--largeScreenFont);
	}
}
html, 
body {
	margin: 0 var(--sectionSpacing);
	font-family: 'Terminus', monospace;
	font-size: var(--baseFontSize);
	color: var(--secondary);
	scrollbar-color: var(--primary) var(--background);
	scrollbar-width: thin;
}
body {
	background: var(--background);
}
body a {
	color: var(--primary);
	text-decoration: none;
}
body h1,
body h2 {
	text-decoration: underline;
	text-transform: uppercase;
	color: var(--primary);
}
body h1 {
	font-size: 1.25em;
}
body b {
	color: var(--primary);
}
ul {
	list-style: "★ ";
}
li > ul {
	list-style: "☆ ";
}
#about,
#socials,
#gaza {
	animation: colourRotate 4s linear 0s infinite;
}
#badgesSingle,
#badgesDouble {
	text-align: center;
}
#badgesSingle {
	margin-bottom: var(--sectionSpacing);
}
#badgesDouble {
	margin-top: var(--sectionSpacing);
}
.email:hover,
#operatingSystems:hover {
	animation: colourRotate 2s linear 0s infinite;
}
#palestineposter {
	display: block;
	margin: 1em auto;
	width: 75%;
	border: 5px solid transparent;
}
#palestineposter:hover {
	border: 5px solid;
	border-image: conic-gradient(from var(--angle), 
		#ff0000,
		#ff8000,
		#ffff00,
		#00ff00,
		#00ffff,
		#0000ff,
		#8700ff,
		#ff00ff,
		#ff0000) 
		1;
	animation: rainbowRotate 4s linear infinite;
}