@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Ubuntu+Condensed&display=swap');

:root{
	--color-a: rgb(24,22,20);
	--color-b: rgb(44,42,40);
}

/* General Classes */

*{
	color: rgb(220,220,220);
	font-size: 5vh;
	font-family: 'Concert One', cursive;
	border-radius: 2vh;
	gap: 2vh;
}

.abs{
	position: absolute;
	left: 0;
	top: 0;
}.flexcen{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Background */

body{
	margin: 0;

	background: var(--color-a);
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}

/* Main center text */
/* little gaps, padding, fonts */

.desc{
	background: var(--color-b);
	padding: 2vh;
	
	white-space: pre-line;
}

.popupMain{
	width: 60vw;
	aspect-ratio: 2 / 1;

	flex-direction: column;
	align-items: flex-start;
}.wordHead{
	justify-content: flex-start;
}

#wordTitle{
	text-transform: uppercase;
}#wordDef{
	font-family: 'Ubuntu Condensed', sans-serif;
}

/* Side Bar */
/* absolute left, vertical text */

.sideBar{
	height: 100vh;
	width: 5vw;
}.sideBar *{
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 4.5vh;
}

/* Top Bar */
/* absolute top, add arrows to children */

#topBar{
	left: 2vh;
	height: 10vh;
	width: calc(100vw - 4vh);

	justify-content: end;
	align-items: flex-start;
	overflow: hidden;

	padding-top: 2vh;
	gap: 1vh;
}

#topBar *{
	display: flex;
	background: var(--color-b);
	font-size: 3vh;
	padding: 1vh;
}#topBar *::before{
	content: "> ";
}#topBar *:nth-child(1):before{
	content: "";
}

/* Bottom Bar */

.bottomBar{
	top: 93vh;
	height: 5vh;
	width: 100vw;
	
	opacity: .5;
}.bottomBar img{
	width: 4vh;
	height: 4vh;
}.bottomBar *{
	text-decoration: none;
	font-size: 4vh;
}