/*--------------------------GENERAL---------------------------*/
* {
  box-sizing: border-box;
}

body{
	background-color: black;
	margin: 0;
	padding: 0;
	font-family: "Anonymous Pro", sans-serif;
	font-size: 20px;
	color: white;
	overflow-x: hidden;
}

h1 {
	color: white;
	font-family: 'DM Serif Display', serif;
	font-weight: normal;
	font-weight: 400;
}
@media only screen and (max-width: 800px) {
  h2 {
    font-size: 54px;
  }
}
h2 {
	font-size: 64px;
	color: white;
	font-family: "DM Serif Display", sans-serif;
	font-weight: 400;
}

h3{
	font-size: 40px;
	color: white;
	font-family: "DM Serif Display", sans-serif;
	text-align: center;
	margin: 0rem;
}

h4{
	font-family: "Aoboshi One", sans-serif;
	font-size: 23px;
	color: white;
	text-align: center;
}

a {
	color: black;
	text-decoration: none;
}

nav img{
	width: 250px;
	height: auto;
}

nav a{
	display: inline-block;
	font-family: 'DM Serif Display', serif;
	color: white;
	font-size: 1.5rem;
	text-decoration: none;
/*	top and bottom, left and right*/
	padding: 0.25em 0.45em;
}

/*--------------------------NAVIGATION BAR---------------------------*/

 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a.close-icon {
  display: none;
}

a.icon {
  display: none;
}

li {
  display: inline;
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0; /* Adjust top and bottom padding to control the height */
	position: fixed; /* Add this to make the navigation bar sticky */
	top: 0; /* Add this to position the navigation bar at the top */
	left: 0; /* Add this to align the navigation bar to the left */
	right: 0; /* Add this to align the navigation bar to the right */
	background-color: black; /* Optional: Add a background color to the navigation bar */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow effect for the navigation bar */
	height: 90px; /* Set a fixed height for the navigation bar background */
	 z-index: 9999; /* Set a high z-index value */
}


	.nav-container .icon {
  	display: none;
	}

.logo img {
	margin-right: 20px; /* Optional: Add some right margin to separate logo from nav links */
	width: 200px;
	height: auto;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 20px;
}

ul.nav-links {
	list-style-type: none;
	margin: 0;
	padding: 0;
/*	font-size: 4rem;*/
	display: flex; /* Optional: Display the nav links as flexbox */
	margin-right: 20px;
}

ul.nav-links li {
	margin-left: 10px; /* Optional: Add some left margin between nav links */
	padding-right: 35px;
}

.goodforum:hover a{
    color: #75E8F6;
}

.badforum:hover a{
    color: #51DA22;
}
.fanforum:hover a{
    color: #9D26B0;
}


.tickets button {
  /* Remove background-color to have no filled-in color */
  background-color: transparent;
  border: 2.6px solid #75E8F6; /* Add a blue border around the button */
  border-radius: 30px;
  width: 170px;
  outline: none; /* Remove outline on focus */
}

.tickets button:hover a {
  color: black; /* Change the text color to black on hover */
}

.tickets button:hover {
  background-color: #75E8F6; /* Add a background color on hover */
  color: black; /* Change the text color to black on hover */
}

/*--------------------------HERO MESSAGE---------------------------*/

/*.hero {
  position: relative; 
  margin-top: 90px; 
  padding: 0;
}

.hero img {
	width: 100%;
	height: auto;
	padding: 0;
}*/
.hero {
	background-image:url("../img/glinda-hero.png");
	height: 100vh;
	background-size: cover;
	background-position: center;

  position: relative; /* Change 'position: 0;' to 'position: relative;' */
  margin-top: 90px; /* Add some top margin to create space between hero photo and nav bar */
  padding: 0;
}

.hero-text {
	color: white;
	position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 1;
   display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-text h2 {
  font-size: 2.85rem; /* Increase font size for "Welcome to the" */
  margin-bottom: -10px;
}

.hero-text h1 {
  font-size: 5rem;
  margin-top: 0px;
/*  font-size: 55px;*/
}


.cta-text {
	
	margin: 0;
	position: absolute;
  top: 69%; 
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block; 
}

.cta-text p {
	font-family: 'Aoboshi One', serif;
	font-size: 1.3rem;
}

.hero-text .cta-text {
  margin: 0; /* Adjust the margin to control the space between texts */
}

.cta-button {

  position: absolute;
  top: 78%; 
  left: 50%;
  transform: translate(-50%, -50%);

}

.hero button {
	background-color: #75E8F6;
	border-radius: 45px;
	width: 200px;
	height: 60px;
/*	font-weight: bold;*/
	font-family: 'DM Serif Display', serif;
/*	font-size: 25px;*/
	border: none;
	outline: none;
	font-size: 1.3rem;
}

.hero button:hover {
	background-color: #fff;
}

/*--------------------------THE GOOD ONE---------------------------*/

/*#the-good-one {
padding-top: 120px;
}*/
/*@media screen and (max-width: 1200px){
	figure1{
		margin: 0;
		max-width: 50vw;
		height: auto;

		position: relative;
		right: 16vw;
		top: -10vh;
	}
}

@media screen and (min-width: 1200px){
	figure1{
		margin: 0;
		width: 100%;
		height: auto;
		max-width: 100vw;
		position: relative;
		top: 15vh;
		right: -40vh;
	}
}*/

/*intro start*/
.good-pic img{
	width: 675px;
	height: auto;
	padding-top: 90px;
}
.good-pic{
	display: flex;
  justify-content: flex-end; 
}

/* Align content to the right with flex-end*/

.good > div {
	height: 100%;
	width: 868px;
}
.good{
	display: flex;
	justify-content: center;
}
.good-text-title{
	text-align: center;
	padding-top: 10rem;
}
.good-text-body{
	padding-left: 10rem;
	padding-right: 7rem;
	text-align: left;
	    line-height: 1.5;

}

.text-color{
	color: #75E8F6;
}

/*--------------------------WARDROBE GALLERY---------------------------*/
.responsive-wardrobe {
  margin: 20px 0;
}

.responsive-wardrobe h2 {
/*	font-size: 2.75rem;*/
	font-size: 50px;
	text-align: center;
	margin-bottom: 15px;
	padding-top: 40px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wardrobe {
  flex-basis: calc(33% - 0px); /* Adjust the width of each image container */
  margin-bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  text-align: center;
}

.wardrobe img {
  max-height: 450px; /* Limit the height of the images */
  width: auto;
  border: 3.5px solid #75E8F6; /* Add border for images */
  border-radius: 30px; /* Add border radius to make the images slightly rounded */
  cursor: pointer; /* Change cursor to a pointer on hover to indicate the images are clickable */
  transition: 0.3s; /* Add smooth transition on hover */
  opacity: 0.6;
}

.gallery img:hover {
  opacity: 1; /* Set full opacity for the image being hovered */
}

.wardrobe img:hover {
  opacity: 1; /* Set full opacity for the image being hovered */
}

/* Styling for the image descriptions */
.wardrobe .desc {
	flex-basis: calc(33% - 0px); 
  color: white;
  font-family: "Anonymous Pro";
  margin-top: 15px;
  max-width: 350px;
}

/*--------------------------QUOTE---------------------------*/
.quote-pic img {
	width: 630px;
	height: auto;
	padding-bottom: 90px;
}

.quote-pic {
	float: left;
}

/*.quote > div {
	
	width: 650px;
	height: auto;
}*/

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

.quote-text-body{
	text-align: center;
}

.quote-text-name{
	text-align: right;
}

.quote-text{
/*	padding: 0;*/
	margin: 0;
	padding-right: 110px;
	padding-bottom: 8px;
}

/*-----------------------HER SIDE OF THE STORY------------------------*/

/*.story-text-title {
	text-align: left;
	padding-bottom: 0.5rem;
	padding-left: 5rem;
}*/

.story-text-title h2 {
	margin-bottom: 0;
	font-size: 50px;
}

.story img{
/*	float: right;*/
	padding-left: 2rem;
	padding-right: 1rem;
	width: 850px;
	height: auto;
	padding-top: -1rem;
	padding-bottom: 90px;
}
/*.story-text-body{
	float: left;
	width: 530px;
	padding-bottom: 5rem;
	padding-left: 8px;
}

.story-text-body p {
	margin-left: 5rem;
	margin-top: 1rem;
}

.img-body {
	padding-top: 10rem;
}*/


.story{
	display: flex;
	justify-content: center;
	align-items: center; 
}

.story-text-title{
	text-align: center;
	padding-top: 0rem;
}
.story-text-body{
	padding-left: 6rem;
	padding-right: 4rem;
	text-align: left;
	line-height: 1.2;
}

/*--------------------------THE OTHER SIDE---------------------------*/

/*section.other{
	position: relative;
	text-align: center;
	margin-bottom: -90px;
}

section.other img {
	width: 100%;
	height: auto;
	margin-bottom: 0;
}*/

.other {
	background-image:url("../img/good-other.png");
	height: 80vh;
	background-size: cover;
	background-position: center;

  position: relative; /* Change 'position: 0;' to 'position: relative;' */
  margin-top: 40px; /* Add some top margin to create space between hero photo and nav bar */
  padding: 0;
}

.button2 a{
	display: inline-block;
	width: 280px;
	height: 70px;
	margin: 0.5rem;
	padding: 20px 45px;
	font-size: 1.5rem;
	color: black;
	text-decoration: none;
	font-family: "DM Serif Display", sans-serif;
	background-color: #51DA22;
	border-radius: 3rem;
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: none;
	outline: none;

}

/*--------------------------FOOTER---------------------------*/

.footer {
	background-color: black;
	height: 170px;
	margin: 0;
	padding: 0;
}

.citations-button a{
	color: white;
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
		font-size: 1.5rem;
}

.mockups-button a{
	color: white;
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
		font-size: 1.5rem;
}

 /*.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }*/

  .first-line {
  	margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    opacity: 0.9;
  }

  .first-line img {
  	max-width: 33px;
  }

  /*.first-line h2 {
    margin: 0 10px; 
  }*/

  .first-line a {
    display: inline-block;
  	margin: 20px 30px; 
  }

  /*.second-line {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
  }*/

  .second-line {
  	display: flex;
  justify-content: center;
  margin-top: 35px;
  }

  .second-line p {
/*  	padding-top: ;*/
    display: inline-block;
  	margin: 0 45px; 
  	font-size: 0.9rem;
  	opacity: 0.7;
  }

/*.footer h2 {
	font-size: 1.5rem;
}*/

/*--------------------------MEDIA QUERIES---------------------------*/

@media only screen and (max-width: 768px) {

/*--------------------------GENERAL---------------------------*/
  
  /* Adjust the font size for better readability on small screens */
  body {
    font-size: 16px;
  }

  h2 {
  	font-size: 50px;
  }

/*--------------------------NAVIGATION BAR---------------------------*/

  /* Modify the navigation bar to stack the links vertically */
  .nav-container {
    flex-direction: column;
    height: 110px;
    padding: 5px 0; /* Adjust the top and bottom padding */
  }

  .nav-container ul.nav-links {
    display: none;
  }
  
  /* Show the icon on mobile */
  .nav-container a.icon {
    float: right;
    display: block;
  }

  /* Add styles for the mobile navigation menu */
  .nav-container.active ul.nav-links {
    display: flex;
    flex-direction: column;
  }

  .nav-container ul.nav-links.active {
 	 display: flex;
 	 flex-direction: column;
	}

.logo {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-left: 5rem;
}

.nav-container .icon {
  display: none;
  margin-left: 25px; /* Adjust the spacing between the logo and the icon */
  font-size: 40px;
}

  .logo img {
    margin-right: 1px; /* Remove the right margin */
    margin-bottom: 10px;
    margin-top: 10px; /* Adjust the top margin */
  }

  ul.nav-links {
    display: flex;
    flex-direction: column; /* Stack the nav links vertically */
    margin-right: 0; /* Remove the right margin */
  }

  ul.nav-links li {
    margin-left: 0; /* Remove the left margin */
    padding-right: 0; /* Remove the right padding */
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    background-color: black; /* Change the background color as per your design */
    width: 100%;
    height: 100vh;
    text-align: center; /* Align the navigation links to the left */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a shadow effect for better visibility */
}
.nav-container a.close-icon {
  display: none;
  font-size: 20px; 
  color: white; 
  padding: 5px 1px; 
  cursor: pointer;
  position: absolute;
/*  top: 10px;*/
  right: 60px; /* Adjust the right distance as per your preference */
}

.nav-container .close-icon {
/*	padding-left: 50px;*/
}

.close-icon {
	color: white;
/*	padding-left: 10px;*/
}

:target {
  padding-top: 90px; /* Adjust the padding as needed */
  margin-top: -90px; /* Adjust the margin as needed */
}

/*--------------------------HERO MESSAGE---------------------------*/
	/*.hero-container {
		top: 30%;
	}*/
	.hero img {
    width: 1500px;
    height: auto; /* Adjust the height for better visibility on small screens */ 	
  }

  /* Adjust the hero text position for better visibility on small screens */
  .hero-text {
    top: 55%;
    margin: 0;
    padding: 0;
  }

  .hero-text h2 {
  	font-size: 25px;
  	white-space: nowrap;
    margin-bottom: -20px;
  }

  .hero-text h1 {
  	padding-top: 10px;
  	font-size: 57px;
  	white-space: nowrap;
  }

  .cta-text p {
    font-size: 17px; /* Adjust the font size for the CTA text */
  	white-space: nowrap;
  	padding-top: 5rem;
   
  }

  .cta-text {
      top: 61%; 
  }

  .cta-button {
  	padding-top: 7rem;
    top: 67%; 
  }

/*--------------------------THE GOOD ONE---------------------------*/
/*.good-pic {
    float: none;  
    width: 100vw; 
    margin: 0;    
  }

  
  .good-pic img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }*/

  .good {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .good-text {
    flex: 1;
    padding-right: 20px; 
    padding-top: -15px;
  }

  .good-text-title{
	text-align: center;
	padding-top: 1rem;
}

  .good-pic {
    /*flex: 1;
    text-align: right; */
    display: none;
  }

  /*.good-pic img {
  	width: 100%;
    height: auto;
  }*/

/*  .good {
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  }

  .good-pic img {
  	width: 100vw;
    height: auto;
    padding: 0;
    /*width: 100vw;
    padding-left: 0;*/

    /*height: 500px;
    width: auto;
    padding-top: 50px; */
/*  }*/

  /* Adjust the padding and text alignment for the good-text-body on small screens */
  .good-text-body {
    padding-left: 16rem;
    padding-right: 15rem;
    text-align: left;
    line-height: 1.5;
  }

/*--------------------------WARDROBE---------------------------*/

  /* Make the wardrobe gallery responsive */
  .responsive-wardrobe h2 {
    font-size: 36px; /* Adjust the font size for the wardrobe gallery heading */
  }

  .gallery {
    flex-direction: column; /* Stack the wardrobe items vertically */
    align-items: center; /* Center the wardrobe items horizontally */
  }

  .gallery img {
  opacity: 1; /* Set full opacity for the image being hovered */
}

  .wardrobe {
    flex-basis: 100%; /* Take up the full width of the container */
    margin-bottom: 40px; /* Adjust the bottom margin */
  }

  .wardrobe img {
    max-height: 400px; /* Adjust the maximum height of wardrobe images */
  }

/*--------------------------QUOTE---------------------------*/

  /* Make the quote-pic image responsive */
  .quote-pic img {
    width: 100%;
    height: auto;
    padding-bottom: 30px; /* Adjust the bottom padding */
  }

  /* Adjust the padding and text alignment for the quote-text on small screens */
  .quote-text {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .quote-text h3 {
  	font-size: 1.5rem;
  }

  .quote-text h4 {
  	font-size: 1rem;
  }

  .quote {
  	flex-direction: column;
  	align-items: center;
  }

/*--------------------------HER SIDE OF THE STORY---------------------------*/

  .story {
  	flex-direction: column;
  	align-items: center;
  }

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

  /* Adjust the padding and text alignment for the story-text-body on small screens */
  .story-text-body {
    padding-left: 2rem;
    padding-right: 2.6rem;
    padding-top: 1rem;
    text-align: left;
    padding-bottom: 1rem;
        line-height: 1.5;

  }

/*--------------------------OTHER SIDE---------------------------*/
	section.other img {
		width: 200%;
	}

	.footer {
		height: 140px;
	}

  .button2 a {
  	font-size: 1.5rem;
  	width: 17.5rem;
  	height: 65px;
  }
}

@media screen and (max-width: 1200px){
	.citations-button a{
		color: white;
		font-family: 'DM Serif Display', serif;
		font-weight: 400;
		font-size: 1rem;
	}

	.mockups-button a{
		color: white;
		font-family: 'DM Serif Display', serif;
		font-weight: 400;
			font-size: 1rem;
	}
}

@media screen and (max-width: 1200px){
	.first-line {
		padding-top: 25px;
	}
  .first-line a {
    display: inline-block;
  	margin: 0 20px; 

  	position: relative;
 	  top: -3vh;
  }
}

@media screen and (max-width: 1200px){
  .second-line p {
/*  	padding-top: ;*/
    display: inline-block;
  	margin: 0 15px; 
  	font-size: 0.58rem;
  	opacity: 0.7;
  	padding-top: -50px;
  }
}