@font-face {
	font-family: "fira code";
	src: url(./fonts/FiraCode.ttf);
}

@font-face {
	font-family: "sextape";
	src: url(./fonts/SextapeRegular.ttf);
	font-weight: 100;
}

@font-face {
	font-family: "vhs";
	src: url(./fonts/vhs.ttf);
}

html,body {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0%;
	background-color: black;
	color: white;
	font-family: fira code;
	font-weight: 400;
}

#titlecard {
	display: flex;
	flex-direction: row;
	height: 10%;
	width: 100%;
	align-items: flex-end;
	padding: 2%;
	color: #ff9000;
	font-weight: 100;
}

.welcome {
	font-family: sextape;
	font-size: 500%;
	margin: 0%;
}

.smol-text {
	font-size: 50%;
	margin: 0%;
	margin-bottom: 1%;
}

p {
	margin: 1%;
}

h2,h3,h4,h5 {
	font-family: vhs;
	font-weight: 100;
}

button {
	font-family: fira code;
}

.nav {
	background-color: gray;
	margin-left: 5%;
	margin-right: 5%;
}

.inner-grid {
	display: grid;
	grid-template-areas: 
	"0 0 0 0"
	"a b c d"
	"e e f f"
	". . . ."
	"g g . .";
	gap: 1vh;
	padding: 1%;
}

.nav-btn {
	background-color: black;
	color: #ff9000;
	border-color: #ff9000;
	flex: 1;
}

#nav-head {
	grid-area: 0;
	font-family: vhs;
	padding-left: 2%;
}

#story-btn {
	grid-area: a;
}

#enemy-btn {
	grid-area: b;
}

#secrets-btn {
	grid-area: c;
}

#act2-btn {
	grid-area: d;
}

#VIam-btn {
	grid-area: e;
}

#form-btn {
	grid-area: f;
}

#download-btn {
	grid-area: g;
}

#changelog-div {
	color: yellow;
	margin: 2%;
}