html * {
  box-sizing: border-box;
  
}

/*events and behavior, general rules*/
.toplink {
  min-width: 10vh; 
}

ul.nav li {
  text-align: center; 
}

a:link {
  color: #000;
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: purple;
}

button {
  text-decoration: none;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
 
 
}
img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

header, main {
  width: 100%; 
  margin: 0 auto; 
}

/*just header things*/
header {
  max-height: fit-content;
  margin 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: top;
  background-color: rgb(139, 215, 253);
  width: 100%;
  border-radius: 20px;
  flex-wrap: wrap; 
}

.logo img{
  position: relative;
  border-radius: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;  
  flex-grow: 1;
  min-width: 141px;
  min-height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0;
  max-width: fit-content;
}

h1.bizname{
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5vw;
  border-radius: 20px;
  padding: 5vh;
  background-color: #fdb18b;
}

h2.biztag {
  min-height: 50px;
  border-radius: 20px;
  padding: 10vh;
  background-color: #addfad;
  height: fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  flex-grow: 1; 
  min-width: 200px; 
  margin: 0;
  align-content: center;
  margin-bottom: 0;
 
}


ul.nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  font-weight: bold;
  padding: 1vh;
  margin: 0;
}

ul.nav li {
  flex-grow: 1; /* Allow navigation links to grow and fill available space */
  text-align: center; /* Center text within navigation links */
  text-decoration: none;
  padding: 3vh;
  border-radius: 20px;
  background-color: #fdb18b;
  list-style: none;
  margin: 0.1vw;
  text-decoration: none;
}
ul.nav li:hover {
  
  background-color: #addfad;
  color: rgb(139, 215, 253);
  border-radius:20px;
}

.schedbox :hover {
  color: rgb(139, 215, 253);
  border-radius:20px;
}

.upstuff{
  margin: 0;
}

/*rules for main body of page*/

.pagetag
{
  text-align: center;
  max-width:fit-content;
  max-height: 10vh;
  margin: 0 auto;
  margin-bottom: 5vh;
	
}
.h4{
  text-align: center;
  
  /*more header stuff for some reason*/
}
.toplinks{
  border: solid black;
  border-width: 0 3px 3px 0;
  
}
li.toplinks.schedbox {
  background-color: #ffff00;
  text-decoration: none;
  text-shadow: 1px 1px 2px #fff;
}



.current {
  pointer-events: none;
  color: #333;
}

/*main body of page*/
main {
  border-radius: 20px;
  background-color: #fbeaea;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  
  
}


div.blurb{
  display:flex;
  flex-wrap: wrap;
  max-width: 95vw;
  margin: 0 auto; /* Center the blurb horizontally */
   min-width: 30vw;
   text-align: center;
   justify-content: center;
  

}

/*styles for images*/

figure {
  border-radius: 20px;
  max-width: 90%;
  height: auto; 
  background-color: #fdb18b;
  padding: 5vh;
align-content: center;
}
img.staffpic {
  object-fit: fill;
max-height: auto;}

div.mainimg{
  max-width: 90vw;
  align-content: center;
  border-radius: 20px;
  display: flex;
  flex-direction: column; /* I so badly want this to be row to display my photos side by side but row breaks it, why?*/
  flex-wrap:wrap
 width: 100%;
 height: auto;
 object-fit: cover;
 
}

figcaption
{
  font-weight: bold;
}

/*styles for videos*/
div.videos {
  min-width:40vw;
  min-height: auto;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  object-fit: fill;
}

.videos figure {
  
  max-width:fit-content; /* Set maximum width for each video */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Preserves aspect ratio while resizing */
  background-color: #fdb18b;
  margin: 0.5vw;
  padding: 3vh;
}
.videos figcaption {
  text-align: center;
  
  /*contact form things*/
}
fieldset {
	border-width: none;
  border-radius: 20px;
  color:#000;
	
}
div.contactform{
  border: solid black;
  border-width: 0 3px 3px 0;
  align-items: flex-end;
  display: flex;
  border-radius: 20px;
  background-color: #addfad;
  justify-content: flex-end;
}
.contactform button {
  background-color: rgb(114, 246, 19);
  border: solid black;
  border-width: 0 3px 3px 0;
}

/*styles for link buttons that go external and footer*/

div.outlinks {
  display:flex;
  align-content: center;
  max-width: 50vw;
  background-color: #addfad;
  border-radius: 20px;
  text-emphasis: bold;
  text-decoration: dashed;
  padding: 10px;
	  border: solid black;
	  border-width: 0 3px 3px 0;
}

.outlinks:hover {
  background-color: #fdb18b;
  color: rgb(139, 215, 253);
  border-radius:20px;
}

footer {
  clear: both;
  text-align: center;
  background-color: #addfad;
  border-radius: 20px;
}

/*embed stuff, video and map*/

.embed-container {
  
  position: relative;
  padding-bottom: 67%; /* Adjust padding-bottom value to resize the embed */
  height: 0;
  max-width: 100%;
  z-index: 1

} 
.embed-container iframe, 
.embed-container object, 
.embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px; }


@media (max-width: 856 px) {
  /* Responsive styles for screens smaller than or equal to 320px */


  header {
    flex-direction: column; /* Stack header elements vertically */
  }

  figure{
    padding: 1vh;
    width:fit-content;
    object-fit: cover;
  }
  div.mainimg{
    flex-direction: column;
    flex-wrap:wrap;
    width: fit-content;
    
  }
  h1.bizname,
  h2.biztag {
    margin: 0;
    padding: 0; /* Remove margins for better spacing on small screens */
  }

  .blurb {
    max-width: 90vw; /* Expand blurb to full width on small screens */
  }
  

}

@media (min-width: 1856px) /* I cannot freakin figure out how to keep the contact form from going to the side of the photo on large screens*/
{
div.contactform
{
max-height: 200px;
display:flex;
align-content: flex-end;
justify-content: baseline;

}

}