@font-face {
  font-family: 'Hina-Mincho';
  src: url('fonts/Hina-Mincho-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[x-cloak] { 
	display: none !important; 
}

:root {
	--background: rgb(0, 0, 0);
	--accent: rgb(220, 220, 220);
	
	--cyan: rgb(0, 160, 250);
	--yellow: rgb(240, 170, 20);
}
body {
	position: fixed;
	background-color: var(--background);
	left:  0;
	top:   0;
	width: 100%;
	height:100%;
	
	padding:0;
	border: 0;
	outline:0;
	margin: 0;
}
.text {
	color: var(--accent);
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: inherit;
}

h1 {
	padding:0;
	border: 0;
	outline:0;
	margin: 0;
	
	font-size: 3rem;	
}

h2 {
	padding:0;
	border: 0;
	outline:0;
	margin: 0;
	
	font-size: 2rem;
}

p1 {
	padding:0;
	border: 0;
	outline:0;
	margin: 0;
	
	font-size: 1rem;
}

.top_bar {
	padding: 1rem .75rem .5rem 2rem;
	border-bottom: .4rem solid var(--accent);
}

.content_container {
	position: relative;
	flex: 1;
	height: 100%;
}

.padding {
	padding: 1rem;
}

.text_padding {
	padding: 1rem 2rem;
}

.center_justified {
	text-align: center;
}

.fill_parent {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.flex_equal_spacing {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: auto;
}

.flex_equal_spacing > * {
	flex: 1;
}

.flex_rows {
	display: flex;
	flex-direction: column;
}
.flex_columns {
	display: flex;
	flex-direction: row;
}
.flex_gap {
	gap: 1rem;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}


.primary_input {
	padding:0;
	border: 0;
	outline:0;
	margin: 0;
	
	background-color: var(--background);
	border: .2rem solid var(--accent);
	border-radius: .4rem;
	
	font-size: 2rem;
}

.tertiary_interactable {
	cursor: pointer;
}
.tertiary_interactable:hover {
	text-decoration: underline;
}

.top_left_corner {
	position: absolute;
	left: 0;
	top: 0;
}

.bottom_right_corner {
	position: absolute;
	right: 0;
	bottom: 0;
}

@keyframes spin {
	0% { transform: skew(10deg,0deg) translate(50px,-200px) scale(.7,.7); }
	100% { transform: skew(30deg,0deg) translate(1000px,8300px) scale(10,10); }
}