/* ||| CUSTOM FONTS ||| */

@font-face {
	font-family: "8-bit-wonder";
	src: url("../Fonts/8BitWo.ttf");
}

@font-face { /* This font is NOT the actual UNDERTALE font. */
	font-family: "pixel-operator";
	src: url("../Fonts/PixelOperator.otf");
}

@font-face { /* This font is EXACTLY LIKE UNDERTALE. */
	font-family: "determination";
	src: url("../Fonts/Determination.otf");
}


/* ||| ELEMENTS ||| */


h1 {
	font-family: "8-bit-wonder";
	user-select: none;
	font-size: 3em;

	text-align: center;
}

h2 {
	font-family: "8-bit-wonder";
	font-size: 2.4em;

	text-align: center;
}


h3 {
	font-family: "8-bit-wonder";
	font-size: 1.8em;

	text-align: center;
}

hr {
	width: 75%;
}

img {
	user-select: none;
}

body {
	font-family: "determination";
	font-size: 1.1vw;

	color: white;

	background-position: center;
	background-attachment: fixed;
	background-size: cover;

	background-image: url(../Images/background.gif);
}

label {
	width: 12vw;
	line-height: 1.75vw ;
	font-size: 1.5vw;
	display: inline-block;
}

input {
	font-size: 1vw;
}

input:focus {
	color: white;
	background-color: black;

	border: solid 0.3vw;
	border-color: white;
}

textarea {
	resize: vertical;
	overflow: auto;

	width: 40vw;
	height: 10vw;
	font-size: 1vw;
}

textarea:focus {
	color: white;
	background-color: black;

	border: solid 0.3vw;
	border-color: white;
}

/* ||| IDS ||| */

/* -- HEADER RELATED -- */
#main-header { /* A <div> that covers the top of the website. */
	background-color: black;
	outline: solid 0.3vw;
	outline-color: white;
	width: 100vw;
	height: 5vw;

	top: 0;
	left: 0;
	position: fixed;

	z-index: 10;

	display: flex;
	align-items: center;
	justify-content: left;
	text-align: center;
}

#main-header .ut-themed-button { /* The themed navigation buttons at the top left of the main header. */
	width: 10%; border: 0;
}

#main-header .ut-themed-button:hover { /* Nav buttons turn yellow upon hover. */
	color: yellow;
}

#credit-logo { /* Small star logo at the top right of the main header. */
	margin-left: 1%;
	margin-right: 2%;

	width: 1.75vw;
	height: 1.75vw;

	display: none;
}

#credit-text { /* "Created by DimensionReset" text on the top right. */
	cursor: default;
	display: block;
	color: dimgray;
}

#credit-text:hover + #credit-logo { /* Star logo appears after hovering on credit text. */
	display: block;
}

/* -- DOCUMENT RELATED -- */
#main { /* The main box that contains everything. */
	margin-top: 5%;

	background-color: black;
	border-color: white;
	border: solid 0.3vw;
}

#title { /* The title on the top of the main box. */
	color: gray;
}

/* ||| CLASSES ||| */

.centered-box { /* Creates a box that is centered considering current window size. Should be used on <div>. */
	left: 50%;
	transform: translate(-50%, 0%);
	position: absolute;

	width: 70%;
	margin: 0;

	background-color: white;

	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-shrink: 1;
}

.float-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 5%;
	clear: both;
}

.float-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ghost-text {	/* Makes text fade in from top. */
	background: -webkit-linear-gradient(#555, #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.golden-border { /* Creates a golden gradient border around elements. */
	border: solid 0.3vw;
	border-image: linear-gradient(to top right, darkgoldenrod, gold) 1;
}

.silver-text { /* Makes text appear shiny like silver. */
	background: -webkit-linear-gradient(#555, #fff, #555, #fff);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.silver-border { /* Creates a silver gradient border around elements. */
	border: solid 0.3vw;
	border-image: linear-gradient(to top right, silver, cornsilk) 1;
}

.rainbow-text { /* Makes text have an animated rainbow gradient. */
	background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ut-themed-button { /* Creates a button with the corresponding UNDERTALE theme */
	color: white;
	border-color: white;
	border: solid 0.15vw;
	background-color: black;

	font-family: "determination";
	cursor: pointer;
}

/* ||| ANIMATION ||| */

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}