* {
	box-sizing: border-box;
}
:root {
	--background: #000000;
	--primary: #991000;
	--secondary: #FFFFFF;
	--tertiary: #696969;
	--sectionSpacing: 0.5em;
}
@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;
  }
  17% {
	color: #ffff00;
  }
  33% {
	color: #00ff00;
  }
  50% {
	color: #00ffff;
  }
  67% {
    color: #0000ff;
  }
  83% {
    color: #ff00ff;
  }
  100% {
    color: #ff0000;
  }
}
html, 
body {
	margin: 0 var(--sectionSpacing);
	font-family: 'Terminus', monospace;
	font-size: 21px;
	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);
}
#about,
#socials,
#gaza {
	animation: colourRotate 4s linear 0s infinite;
}
#badgesSingle,
#badgesDouble {
	text-align: center;
}
.email:hover,
#operatingSystems:hover {
	animation: colourRotate 2s linear 0s infinite;
}
#palestineposter {
	display: block;
	margin: auto;
	width: 75%;
	border: 5px solid transparent;
}
#palestineposter:hover {
	border-image: conic-gradient(
		#ff0000,
		#ffff00,
		#00ff00,
		#00ffff,
		#0000ff,
		#ff00ff,
		#ff0000
		);
	border-image-slice: 1;
}