/* ===== Base styles ===== */
body {
	font-family: monospace;
	background: #000000;
	color: #FFFFFF;
	line-height: 1.4;
	padding: 1.5rem;
	max-width: 1400px;
	margin: 0 auto;
	background-image: url("../assets/newbackground.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	font-size: medium;
	font-family: "PT Mono";
}

hr {
	border: none;
	border-top: 6px double #FFFFFF;
	color: #FFFFFF;
	overflow: visible;
	text-align: center;
}

blockquote {
  border-left: 4px solid var(--primary);
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.5);
  font-style: italic;
}

/* LVHA Order */
a:link {
  color: #ffff00; /* Unvisited link color */
}

a:visited {
  color: #ffff00; /* Visited link color (styles are restricted for security) */
}

a:hover, a:focus {
  color: #ff0000; /* Color when hovered or focused */
  text-decoration: underline; /* Adds underline on hover/focus */
}

a:active {
  color: #ffffff; /* Color the moment it is clicked */
}

/* === FONTS!!! === */

@font-face {
  font-family: 'Comic Relief';
  src: url('../fonts/Comic_Relief/ComicRelief-Regular.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}

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

@font-face {
  font-family: 'JetBrains';
  src: url('../fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PT Mono';
  src: url('../fonts/PT_Mono/PTMono-Regular.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}

/* ===== Helper classes ===== */

.center {
	text-align: center;
}

.icon-small {
	object-fit: contain;
	width: 10vw;
 	height: 10vh;
}

.medium-img {
	object-fit: contain;
  	width: 30vw;
}

.logo {
	object-fit: contain;
	margin-left: 0px;
	margin-right: 0px;
	width: 50vw;
}

.logos {
	object-fit: contain;
	margin-left: auto;
	margin-right: auto;
	width: 10vw;
}

.welcome-title {
  	margin-bottom: 0;
  	text-align: center;
}

.welcome-subtitle {
  	margin-top: 0;
  	text-align: center;
}

.character {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	margin-right: 5px;
}

.character-name {
  	font-size: 1.2rem;
	text-align: center;
	font-family: "JetBrains";
}

.quote-icon {
	width: 20vw;
	max-width: 150px;
	max-height: 150px;
	object-fit: contain;
	flex-shrink: 0;
	padding: 1rem 1rem 0rem;
}

.cave-story-quote {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 4px ridge #ffb500;
  	background: rgb(25, 33, 66);
	color: rgb(255, 255, 255);
  	font-family: 'Courier New', Courier, monospace;
	font-size: large;
}

.code-quote {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid rgb(44, 44, 44);
  	background: rgb(18, 18, 18);
	color: rgb(255, 255, 255);
  	font-family: "JetBrains";
	font-size: large;
}

.modern-quote {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 4px double rgb(0, 0, 0);
  	background: rgba(14, 14, 14, 0.5);
	color: rgb(255, 255, 255);
  	font-family: "Tektur";
	font-size: large;
}

.undertale-quote {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 4px solid #ffffff;
  	background: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
  	font-family: "Comic Relief";
	font-size: large;
}

.modern-quote-voyager {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 4px double rgb(110, 0, 140);
  	background: rgb(0, 0, 0);
	color: rgb(200, 0, 255);
  	font-family: "Stick";
	font-size: large;
}

.code-quote2 {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 4px inset rgb(148, 165, 211);
  	background: rgb(18, 18, 18);
	color: rgb(255, 255, 255);
  	font-family: "PT Mono";
	font-size: large;
}