/* ===== Base styles ===== */
body {
	font-family: monospace;
	background: #000000;
	color: #FFFFFF;
	line-height: 1.6;
	padding: 2rem;
	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;
}

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

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: 'Tektur';
  src: url('../fonts/Tektur/Tektur-VariableFont_wdth\,wght.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}

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

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

.center {
	text-align: center;
}

.icon-small {
 	height: 70px;
}

.medium-img {
  	height: fit-content;
	max-width: fit-content;
}

.logo-big {
	align-self: center;
	height: 20vh;
	display: block;
	margin: 5% auto;
}

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

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

.quote-icon {
	width: 20%;
	max-height: 150px;
	max-width: 150px;
	height: 20%;
	padding: 1rem 1rem;
}


.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;
}

.modern-quote {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 4px double rgb(0, 0, 0);
  	background: rgb(14, 14, 14);
	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;
}