@charset "utf-8";
/* Hex colors are: #CEB888 for gold; #000000 for black; #9D968D for light grey; #373A36 for dark grey */

/* --- CONSTANT FEATURES FOR EACH WEBPAGE (COPY OVER AS NEW PAGES ARE MADE) --- */

header {
    background-color: #000000; /* Black background for header */
    color: #CEB888; /* Light gold text color for header */
    text-align: center; /* Center align the header content */
    padding: 20px; /* Padding for spacing */
    margin-top: 0%; /* Margin at the top */
    position: relative; /* Allows for absolute positioning of the logo */
	font-weight: bolder;
}

.title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5em; /* Adjust the font size as needed */
}

.title img {
    height: 1em; /* Match the height of the text */
    width: auto; /* Maintain aspect ratio */
    margin: 0 10px; /* Add space between text and images */
}



h1 {
    font-size: 5em; /* Large font size */
    font-weight: bold; /* Bold font */
    color: #CEB888; /* Light Gold header color */
    margin: 0; /* Remove default margin */
}

.pagehead h2 {
    background-color: #373A36; /* Dark grey background */
    color: #FFFFFF; /* White text */
    font-size: 4em;
    padding: 20px; /* Padding for spacing */
    margin: 0; /* Remove margin */
    text-align: center; /* Center align the text */
	font-weight: bold;
}

nav ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin-top: 20px; /* Add margin for spacing */
}

nav ul li {
    display: inline; /* Display list items inline */
    margin: 0 15px; /* Space between links */
}

nav ul li a {
    text-decoration: none; /* Remove underline from links */
    color: #9D968D; /* Light grey link color */
    font-size: 1.2em; /* Font size for links */
}

nav ul li a:hover {
    color: #FFFFFF; /* White color on hover */
	cursor: pointer;
}

.pagefoot {
    background-color: #373A36; /* Dark grey background */
    padding: 20px; /* Padding for spacing */
    margin-top: 0; /* Remove top margin */
	}

	.pagefoot-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
	}

	.pagefoot p {
    margin: 0;
	}

	.left-logo {
    margin-left: auto;
	}

/* Mobile formatting */
@media (max-width:600px){
	
	.title {
        font-size: 2em; /* Adjust font size for mobile */
    }

    .title img {
        height: 2.5em; /* Adjust image height for mobile */
    }
	
	h1 {
    font-size: 1.5em; /* Smaller font size */
    font-weight: bold; /* Bold font */
    color: #CEB888; /* Light Gold header color */
    margin: 0; /* Remove default margin */
	}
	.pagehead {
		font-size: .55em; /* Smaller font size */
	}
	
	.pagefoot-content {
	display: flex;
	flex-wrap: wrap;
	}
}


/* ^^^ CONSTANT FEATURES FOR EACH WEBPAGE (COPY OVER AS NEW PAGES ARE MADE) ^^^ */

/* -------------McLuckey Mascots Page------------- */

body {
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.image-item {
    text-align: center;
}

.mascot-title {
    color: #CEB888;
    font-weight: bold;
	font-size:2.5em;
    margin-bottom: 10px;
}

.description {
    color: white;
}