/* Names: Max Werline
Date: 3/4/26*/


h1 {
    font-family: "dynapuff", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #fef7f7;
}
h2 {
	font-family: "dynapuff-condensed", sans-serif;
font-weight: 400;
font-style: normal;
	color: #fef7f7;

}
body {
    background-color: #7e181a;
     text-align: center;
}

main {
    text-align: center;
    font-size: 20px;
    color: #ebaf38;
    padding-left: 2em;
    padding-right: 2em;
    margin-bottom: 2em;
    margin-top: 2em;
    text-wrap: inherit;
    font-family: 'Arapey', sans-serif;
    display: inline-block;
    max-width: 80%;
    max-height: 80%;
}
header {
    font-size: 20px;
     color: #fef7f7;
     font-family: 'Gilda Display', sans-serif;
	padding-bottom: 40px;
}
p {
    text-align: center;
	font-family: "swing-king", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fef7f7;
}

li {
    color: #2B061E;
    font-size: 20px;
	text-align: center;
}

ul {
    margin-bottom: 2em;
    margin-top: 0%;
}
a {
 color: #2B061E;
 text-decoration: none; 
list-style-type: none;
}
nav {
    color:#786f6e;
    background-color: #f0f0f0;
    padding: auto;
	list-style-type: none;
	font-family: "swing-king", sans-serif;
	font-weight: 400;
	font-style: normal;
	width: 100%;
	text-align: center;
}

nav ul {
   display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    list-style-type: none;
    text-align: center;
	color:#786f6e;
	padding: 0;
	margin: 0;
}
nav li a {
	text-decoration: none; 
	list-style-type: none;
	  display: block;
  text-align: center;
  padding: 10px 3px;
  text-decoration: none;
	width: 100%;
	color:#786f6e;
	font-size: 40px;
}
form {
	background-color: #e61621;
	color: #fef7f7;
	font-family: "dynapuff", sans-serif;
}
submit {
	border-radius: 3px;
	width: 30%;
}
footer {
    font-family: 'Josefin Slab';
	font-size: 13px;
	padding-top: 100px;
}
.header-container {
  display: flex;         
  align-items: center;  
  gap: 20px;            
}

.header-image {
  max-width: 500px;  
  height: auto;
}
.header-text {
	text-align: center;
	font-size: 50px;
}
.menu{
	background-image: url("images/bgpamper2.jpeg");
}
.corgi {
	width: 500px;
}
.c {
	text-align: left;
	width: 30%;	
}

.fetch {
	display: inline-block;
	padding-right: 50px;
}
.bus {
	display: inline-block;
	padding-left: 50px;
}
.dog {
	display: block;
	margin: auto;
}
.logo {
	text-align: left;
	display: inline-block;
}
.pup {
	text-align: right;
	display: inline-block;
	font-size: 80px;
	padding-left: 200px;
}
.email {
	font-size: 15px;
}
.email2 {
	font-size: 1em;
}
.nav {
	text-decoration: none; 
	list-style-type: none;
}
.mutt {
	display: grid;
    grid-template-columns: auto auto auto;
	grid-gap: 20px;
	margin: auto;
}
.pon {
	 max-width: 30%;
    max-height: 30%;
}
.sub {
 color:#786f6e;
    background-color: #f0f0f0;
    padding: auto;
	list-style-type: none;
	font-family: "swing-king", sans-serif;
	font-weight: 400;
	font-style: normal;
	width: 100%;
	text-align: center;
}
.button {
	background-color: #e61621;
}
.links {
	font-size: 20px;
	color: #d33e3c;
}
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
	background-color: #d13b41;
}


/* Mobile-Specific Styles (Max-Width approach) */
@media screen and (max-width : 581px ){
  .container {
    flex-direction: column; /* Stack columns vertically on mobile */
  }
  header {
    font-size: 1.2em;
  }
	.mutt {
		display: block;
		max-width: 100%;
		margin: auto;
	}
	nav {
		text-align: center;
		display: block;
	}
	nav li a {
		font-size: 20px;
	}
	nav ul {
		display: grid;
		grid-template-columns: auto auto auto auto;
	}
	.pup {
		font-size: 2em;
		text-align: center;
		float: none;
	}
	.header-text {
		display: none;
	}
}