/* website global default.css */
body {
	font-family: 'Times New Roman', serif;
	font-size: 16px;
	margin: 0; /* Disable any default outer padding */
	padding: 0;
	width: 100%; /* Make sure the page takes up the full display size */
	height: 100%;
}

h1 {
	font-family: 'Times New Roman', serif;
	font-size: 28px;
}

h2 {
	font-family: 'Times New Roman', serif;
	font-size: 24px;
}

h3 {
	font-family: 'Times New Roman', serif;
	font-size: 20px;
}

h4 {
	font-family: 'Times New Roman', serif;
	font-size: 18px;
}

h5 {
	font-family: 'Times New Roman', serif;
	font-size: 16px;
}

ol, ul, li {
	font-family: 'Times New Roman', serif;
	font-size: 16px;
}

code, pre {
	font-family: 'Courier New', Courier, monospace;
	font-size: 16px;
}

label {
	font-family: 'Times New Roman', serif;
	font-size: 16px;
}

button {
	font-family: 'Times New Roman', serif;
	font-size: 16px;
	font-weight: bolder;
}

a {
	color: darkblue;
	text-decoration: none; /* no underline for links */
}

a:hover {
	color: #66ccff; /* change color and underline links on hover */
	text-decoration: underline;
}

iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* Keyframe Animations */
@keyframes rainbow-color {
	0%, 100% {
		color: black;
	}
	14% {
		color: violet;
	}
	28% {
		color: indigo;
	}
	42% {
		color: blue;
	}
	56% {
		color: green;
	}
	70% {
		color: yellow;
	}
	84% {
		color: orange;
	}
	98% {
		color: red;
	}
}

@keyframes ColorShift {
	0% {
		background-position: 0 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	to {
		background-position: 0 50%;
	}
}

/* Start of CSS Classes */
.main {
	padding: 0 20px;
}

.container {
	display: flex;
	flex-wrap: wrap; /* Auto wrap around */
	justify-content: center; /* Horizontal Align */
	align-items: stretch; /* Vertical fill */
	gap: 20px; /* gap between sub boxes */
}

.box {
	background-color: #FBFBF9;
	flex-grow: 1;
	flex-basis: 0;
	display: flex;
	flex-direction: column;
	margin: 10px;
	padding: 20px;
	border: 2px solid #EAEDED;
	border-radius: 25px;
	justify-content: start; /* Align left vertically top */
}

.box h3 {
	text-align: center; /* Horizontal Align */
}

.box h4 {
	text-align: center; /* Horizontal Align */
}

.submitButton {
	background-color: #0000ff;
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	display: block; /* Make the button a block element */
	margin: 0 auto; /* Auto margins for horizontal centering */
}

.submitButton:hover {
	background-color: #66ccff;
}

.header {
	background-color: black;
	display: flex;
	align-items: center; /* vertical center alignment of logo and text */
	justify-content: space-between; /* distributes space between flex items */
	padding: 0 20px;
	height: 50px; /* header height */
}

.headerBar {
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.logo {
	height: 40px; /* logo image height */
	width: auto;
	margin-right: 20px; /* space between logo and navbar */
}

.headerText {
	color: #d1d5db; /* Text color */
	text-decoration: none; /* no underline for links */
}

.headerText a {
	color: #0972d3;
	text-decoration: none; /* no underline for links */
}

.headerText a:hover {
	color: #66ccff; /* change color and underline links on hover */
	text-decoration: underline;
}

.authButton {
	background-color: #FF9900;
	color: black;
	border: none;
	padding: 8px 20px;
	cursor: pointer;
	border-radius: 9999px; /* fully rounded */
	display: inline-block;
	margin-left: auto; /* auto push button to the right side */
}

.authButton:hover {
	background-color: #FF8000;
}

.authButton a {
	color: black;
	text-decoration: none; /* no underline for links */
}

.authPage {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: #EBD5B3;
}

.authPage input {
	width: 80%;
	padding: 10px;
	margin: 10px 0;
	border-radius: 10px;
	border: 2px solid #EAEDED;
}

.authPage p {
	width: 80%;
}

.rainbowH1 {
	font-family: 'Times New Roman', serif;
	font-size: 28px;
	text-align: center;
	animation: rainbow-color 15s infinite;
}

.animatedBody {
	animation: ColorShift 60s ease infinite;
	background-image: linear-gradient(120deg, rgba(130, 92, 246, .7) 7.63%, rgba(231, 21, 123, .5) 37.94%, rgba(237, 113, 0, .7) 65.23%, rgba(189, 65, 202, .5) 92.12%);
	background-size: 400% 400% !important;
	min-height: 100vh; /* body uses Full viewport height */
	position: relative; /* Set to relative to ensure positioning context for any absolutely positioned child elements */
	margin: 0;
	z-index: -2;
}

.returnToTop {
	position: fixed; /* fixed to bottom right */
	bottom: 20px;
	right: 0;
	cursor: pointer; /* indicate clickable */
	height: auto;
	width: 65px;
	opacity: 0.70; /* semi-transparent (70%) */
	transition: opacity 0.4s ease; /* transition between on hover */
}

.returnToTop:hover {
	opacity: 1;
}

.centeredH {
	text-align: center;
}

.response {
	color: blue;
}