@font-face {
	font-family: 'Terminal';
	src: url('../fonts/Terminal.ttf') format('truetype');
}
@font-face {
	font-family: 'Cairo';
	src: url('../fonts/Cairopixel.ttf') format('truetype');
}
html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
    overflow-y: auto;
}

body {
	color: white;
	font-family: 'Cairo', monospace;
	background-image: url('../images/bg.png');
	background-size: cover;
	background-color: black;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-height: 100vh;
	text-rendering: geometricPrecision;	/* Why doesn't this work??? Idk. I'm keeping it just in case. */
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-smooth: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.cairo {
	font-family: 'Cairo', monospace;
}
.terminal, .limetext {
	font-family: 'Terminal', monospace;
}
.parent {
		display: flex;
		flex-direction: column;

		/* Horizontal centering */
		align-items: center;

		/* Keep everything at the top */
		justify-content: flex-start;

		margin: 15px auto;
		text-align: center;

		width: 75%;
		height: calc(100vh - 30px);
		box-sizing: border-box;
}

.title {
    transform: scale(0.75);
	
}
.teaser img {
	height:100%;
	max-height: 500px;
}
.socials {
	font-size:27.5px;
}
.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;	 
	height: 100vh; 
	z-index: -1;		 
	background-color: black;
}

/* 
=====================================
Lime text with the gradient! (UNUSED)
=====================================

.limetext{
	 background: -webkit-linear-gradient(yellow, lime);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
 */
 
/* 
=====================
USED LIME TEXT BELOW!
=====================
*/
.limetext {
	font-size:35px;
	color: lime !important;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}
.links {
	color: white !important;
}

.links:hover{
	color: #00A7FF !important;
}	

.space {
	height: 5px;
	flex-shrink: 0;
}
.content {
	gap: 5px;
}
/* 
=====================
IMG STUFF
=====================
*/