/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html, body {
  max-width: 100%;
  overflow-x: hidden; /* Automatically cuts off any invisible horizontal overflow! */
}


.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

.lexend {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pinyon-script-regular {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
}

/* STYLE SECTIONING TAGS */

body {
 background-image: url("pinkbg.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 margin: 0px;
 padding: 0px;
} 
 

/*STYLE HEADER*/
.mainHeader {
  background-image: url("myheader.png");
  background-color: white;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  width: calc(100%-80px);
  margin: 40px auto 0 auto;
    max-width: 100%;
  height: 200px; 
  box-sizing: border-box;

}



/* STYLE NAV BAR */
.navBar {
  list-style-type: none;
  background: linear-gradient(white, #D492A4);
  overflow: hidden;
  padding: 10px;
  margin-top: 40px;
  margin-bottom: 0px;
  margin-left: 60px;
  margin-right: 60px;  
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  
  
}
.navButtons {
  display: inline;
}
  li a {
    text-decoration: none;
    color: black;
    font-size: 1em;
    padding: 2em;
  }
  li a:hover {
    background-color: #F9F1DB;
  }


/* flexxxx sections idk lol*/
.main-layout {
  display: flex;
  min-height: 80vh;
  gap: 20px;
  padding: 0px;
  }
  
/* entire content wrap*/
.content-wrapper {
  background-color: #FBECF3;
  margin-left: 60px;
  margin-right: 60px;
  padding: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

/*left sidebar styling!*/
.sidebar-left {
  flex: 1;
  max-width: 200px;
  background-color: white;
  padding: 1rem;
  margin-left: 20px;
  border-radius: 20px;
  border-color: #FBECF3;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
  overflow: hidden;

}

.sectors {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 200px;
  height: 200px;
  background-image: url("mainpg/sectorbg2.webp"); 
  background-size: cover;
  padding: 0;
  border: 2px solid hotpink;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px dimgray;
  margin-top:10px;
  margin-bottom:10px;
}

.longsectors {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 200px;
  height:250px;
  background-image: url("mainpg/sectorbg2.webp"); 
  background-size: cover;
  padding: 0;
  border: 2px solid hotpink;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px dimgray;
  margin-top:10px;
  margin-bottom:10px;
}
.sectorhead{
  background-image: url("mainpg/sector3.webp"); 
  background-size: cover;
  background-position: center;
  padding: 0px 11px;
  text-align: center;
  height: 30px;
  width: 90%;
  border-bottom: 2px solid hotpink;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


 
.middleHead {
  background-image: url("mainpg/head1.webp"); 
  background-size: cover;
  background-position: center;
  padding: 5px 10px;
  text-align: center;
  height: 50px;
  width: 95%;
  border: 5px solid white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/*middle space styling HELLLLLLLLLLLLLLLLLLLLLOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
.absicons-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background-color: #effcfb;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}
.bookshelf-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background-color: #f8effc;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}
.collections-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background-color: #f9fff2;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}
.guestbook-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background-color: #EEFAF6;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}
.index-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background: linear-gradient(white, #ffeff1);
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}
.creations-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background-color: white;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}
.quotes-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background-color: #fcc9da;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}
.closet-content {
  flex: 1; /* Makes this column grow to fill the middle space */
  width: 500px;
  background-color: #fbecf3;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
}



.mainspacer {
  width: 100%; 
  height: auto;
}

.bulletin {
  background-color: #FEF7EC;
  min-height: 200px;
  border: 2px inset pink;
  margin-left: 20px;
  margin-right: 20px;
}
.vocaroo-player {
  width: 100%;
  height: 60px;
  border: none;
  overflow: hidden;
  transform: scale(1); 
  transform-origin: center top;
  margin-top: 10px;
}
.vocaroo-player iframe {
  width: 300;
  height: 60px;
  border: none;
  transform: scale(0.75); 
  transform-origin: center top; 
  margin-left: -30px; 
  margin-right: -30px;
}

/*and finally the right sidebar*/
.sidebar-right {
  flex: 1;
  max-width: 200px;
  background-color: white;
  padding: 1rem;
  margin-right: 20px;
  border-radius: 20px;
  box-shadow: 0px 4px 12px rgba(239, 152, 180, 0.3);
  overflow: hidden;


}

/*but also the foooter!*/
.footr {
  background: linear-gradient(white, #D492A4);
  display: flex;
  overflow: hidden;
  padding: 10px;
  margin-top: 0;
  margin-bottom: 40px;
  margin-left: 60px;
  margin-right: 60px;  
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  }

.mainHeader {
  position: relative;
  width: 100%;
  display: inline-block;
}

.clapbutton {
  position: absolute;
  bottom: -30px;
  right: 50px;
  z-index: 10;
  transform: scale(1.5);
  transform-origin: bottom right;
 
  
}
/* STYLE TEXT */


h1 {
  color: #604d47;
  font-family: "VT323", serif;
  padding-top: 0;
  font-weight: 400;
}
.introTitle {
  color: pink;
  font-family: "Lexend", serif;
  padding-top: 0;
  font-weight: 700;
  margin-top: 0;
  text-shadow: 2px 2px 2px hotpink;
  
}  

.sectorheadtxt {
  color: #77d4d4;
  padding-top: 5px;
  font-size: 25px;
  text-align: center;
  margin-top: 0;
  text-shadow: 2px 2px 3px white;

}

.text-quotes {
  text-align: left;
  font-family: VT323, Monospace;
  color: #493b36;
  padding-left: 5px;
  padding-right: 5px;
}

.linktxt {
  margin: 1em;
 }
.linkcolor {
  color: deeppink;
}
p {
  font-family: "VT323", sans-serif;
  font-size: 15px;
  text-align: left;
  margin-left: 5%;
  margin-top: 2em;
}

.Intro{
  color: black;
  margin-top: 1em;
  font-size: 15px;
  margin-right: 5%;
  margin-left: 5%;
  }

.whyZee{
  color: #604d47;
  margin-top: 1em;
  font-size: 15px;
  margin-right: 5%;
  margin-left: 5%;
}

.likesList {
  text-align: left;
  font-family: VT323, Sans-Serif;
  color: #604d47;
  font-size: 18px;

}

.creationTitle {
  text-align: center;
}

/* STYLE IMAGES */

img {
  min-width: 20%;
  margin-bottom: 2em;
  }
  
.introImg {
  float: left;
  margin-right: 15px;    /* Prevents the text from touching the image */
  margin-bottom: 10px;   /* Pushes text away from the bottom of the image */
  width: 100px;
  max-width: 0;
  height: auto;
}

.visitcount {
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin-bottom: 0;

}
.visitcount img {
  width: 60%; /* Or set a fixed width like 150px */
  max-width: 60%;
  height: auto;
  display: inline-block;
  margin-bottom: 0;
}

.mlp {
  width: 90%;
  height: auto;
  padding: 0;
  margin-bottom: 0;
}

.disuser {
  width:100%;
  height:auto;
  padding: 0;
  margin:0;
}

.leftsbimg {
  width: 90%;
  height: auto;
  padding: 0;
  margin-bottom: 0;
}

.sideheaders {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.mycreations {
  display: grid;
  /* Automatically fits as many 150px-wide creation cards side-by-side as possible */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
  gap: 5px;
  align-items: flex-start;
}

.creationSections {
  width: 80%;
  height: auto;
}

.zeesegoLogo { display: flex; justify-content: center; align-items: center; height: 200px; }

.grayCat {
  justify-content: center;
  width: 40%;
  height: auto;
}


/* STYLE MAIN */
main {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;

}