/* Chris KC 11 13 2025 base.css */
/* CSS Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Color Definitions and Brand Book */

:root{
	--VaultBlue: #1e88e5;
	--GoldenVault: #ffc107;
	--SteelBluue: #4fc3f7;
	--SoftAmber: #ffecb3;
	--RetroGreen: #4caf50;
	--PipBoyWhite: #f5f6f5;
	--VaultGray: #b0bec5;
	--CharcoalBlack: #263238;

}

/* Desktop Breakpoint: 1025px+ */
@media (min-width: 1025px){
	body .container{padding: 2rem;}
	header #title { font-size: clamp(3em, 4em, 4em);}
}

/* Tablet Breakpoint:  768-1024px */
@media (max-width:1024px) {
	
}

/* Mobile: up to 767px */
@media (max-width:767px){
	body .container {padding: 1rem;}
	header #title {font-size: clamp(2em, 3em, 3em);}
	main img {min-width: 80%;}
}

/* Anchor style rules */
a {
	color: black;
	font-weight: bolder;
	font-style: italic;
}

/* Text style rules */
h1, h2, h3, h4 {
	font-size: 3rem;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p {
	font-size: 1.5rem;
	font-family: 'Times New Roman', Times, serif
}

/* List style rules */
ul {
	list-style-position: inside;
}

ul li {
	font-family: 'Times New Roman', Times, serif
}

dl dt {
	font-size: clamp(30px, 30px, 40px);
	font-weight: bold;
	font-family: 'Times New Roman', Times, serif
}

dl dd {
	font-family: 'Times New Roman', Times, serif
}

/* Body style rules */
body {
	margin: 0;
	padding-top: 100px;
	background-color: var(--SoftAmber);
	display: flex;
	align-items: center;
	justify-content: center;
}

body .container {
	background-color: var(--SoftAmber);
	align-items: center;
	justify-content: center;
	width: 80%;
	max-width: 75rem;
	min-width: 320px;
	padding: 3rem;
}

/* Header style rules */
header {
	margin: 0;
	position: sticky;
	top:0;
	left: 0;
	right:0;
	width: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--VaultBlue);
	padding: 0.5rem 0;
}

header #title {
	font-size: clamp(4em, 5em, 5em);
	text-align: center;
	font-style: normal;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

header #logo {
	max-width: 105%;
	max-height: 105%;
}

/* Main style rules */
main {
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 24px;
}

main img {
	border: 5px solid #e6e7e8;
	min-width: 25%;
	min-height: 25%;
}

/* Footer style rules */
footer {
	background-color: var(--SteelBluue);

	text-align: center;
	padding: 1%;

	font-weight: bold;
}