@import url('https://fonts.googleapis.com/css2?family=Neon+Lights&display=swap');



:root {
  --font-color-1: #d4a373; /* Warm Brown */
  --font-color-2: #f2c57c; /* Golden Yellow */
  --font-color-3: #a1c181; /* Soft Green */
  --font-color-4: #619b8a; /* Teal */
  --font-color-5: #e76f51; /* Coral Red */
  --font-color-6: #f4a261; /* Orange */
  --font-color-7: #e9c46a; /* Mustard Yellow */
  --font-color-8: #2a9d8f; /* Deep Turquoise */
  --font-color-9: #b5651d; /* Caramel Brown */
  --font-color-10: #ffd700; /* Gold */
  --font-color-11: #8b4513; /* Saddle Brown */
  --font-color-12: #cd5c5c; /* Indian Red */
  --font-color-13: #ff4500; /* Orange Red */
  --font-color-14: #daa520; /* Goldenrod */
  --font-color-15: #d2691e; /* Chocolate */
  --font-color-16: #bc261e; /* Sienna */
}

body {
  font-family: "Courier New", Courier, monospace; /* make a little more vintage!!*/
  background: linear-gradient(to right, #bc261e,#000000, #bc261e);
  color: var(--font-color-16);
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.neon-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-family: 'Neon Lights', sans-serif;
  color: #060606;
  text-decoration: none;
  background-color: var(--font-color-14);
  border: 2px solid #0ff;
  border-radius: 50px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}

.neon-button:hover {
  box-shadow: 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0ff;
}

button:hover {
  background-color: var(--font-color-12);
}


.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

p{
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-family: "Rye", cursive; /* Apply the RYE font */
}

header {
  background: url("./images/bigtop_top.png") no-repeat center center;
  background-size: cover;
  width: 100%; /* Ensure the header covers the full width */
  padding: 80px 10px; /* Increased padding for better visibility */
  color: white;
  z-index: 3;
  margin-bottom: -180px; /* Adjust this value to overlap the curtains */
}

header h2 {
  margin: 0;
  padding: 0;
  font-size: 5em;
  font-family: "Rye", cursive; /* Apply the RYE font */
  color: white; /* Set text color to white */
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
    2px 2px 0 #000; /* Black outline */
}

/*for all other h2 elements*/
h2 {
  font-size: 3em;
  font-family: "Rye", cursive; /* Apply the RYE font */
  color: var(--font-color-16); /* Set text color to white */
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
    2px 2px 0 #000; /* Black outline */
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center; /* Center the ul elements */
}

nav ul li {
  display: inline;
  margin: 0 10px;
}

nav ul li a {
  color: #add8e6; /* Light pale blue color */
  text-decoration: none;
  font-size: 1.2em;
}

nav ul li a:visited {
  color: #9ac0d6; /* Slightly darker pale blue for visited links */
}

a {
  color: var(--font-color-8); /* Deep Turquoise */
  text-decoration: none;
  font-size: 1.2em;
}


.rsvp-button {
  background-image: url('./images/Ticket_single.png'); /* Replace with the actual path to your image */
  background-size: contain; /* Ensures the entire image is visible and scales to fit the button */
  background-repeat: no-repeat; /* Prevents the background image from repeating */
  background-position: center; /* Centers the background image */
  width: 400px; /* Sets a fixed width for the button */
  height: 200px; /* Sets a fixed height for the button */
  margin-top: 50px;
  padding: 30px; /* Adds padding to ensure the text is not overlapping the image */
  text-align: center; /* Centers the text within the button */
  border: none; /* Removes the default button border */
  cursor: pointer; /* Changes the cursor to a pointer when hovering over the button */
  font-family: "Rye", cursive; /* Apply the RYE font */
  font-size: 3em; /* Sets the font size */
  background-color: transparent;
}


.curtain {
  position: absolute;
  top: 110px; /* Adjust this value based on the height of your header */
  width: 20%;
  height: calc(
    100% - 170px
  ); /* Adjust this value based on the height of your header */
  background-size: cover;
  z-index: 1;
}

.curtain.left {
  background: url("./images/bigtop_curtain_left.png") no-repeat left center;
  background-size: 100% 100%;
  left: 0;
}

.curtain.right {
  background: url("./images/bigtop_curtain_right.png") no-repeat right center;
  background-size: 100% 100%;
  right: 0;
}

main {
  position: relative;
  z-index: 2;
  padding: 150px 20px 20px; /* Increased padding-top value */
  flex: 1;
}

section {
  margin: 20px 0;
  display: flex;
  justify-content: center; /* Center the table horizontally */
}

.sectionHeader {
  text-align: center;
  margin-bottom: 20px; /* Add some space below the header */
  width: 100%; /* Ensure the header takes up the full width */
  display: block; /* Ensure the header is displayed as a block element */
}
table {
  background-image: url('./images/flyer2.jpg'); /* Replace with the actual path to your image */
  background-size: cover; /* Adjust as needed */
  background-position:top;  /*Adjust as needed */
  background-repeat: no-repeat; 
  width: 433px;
  height: 612px;
  border-collapse: collapse;
  margin: 0px;
  font-family: Arial, sans-serif;
  text-align: center;
}
th,
td {
  border: 1px solid #61afac;
  text-align: center;
  padding: 2px;
}

td:first-child {
  width: 30%; /* Adjust the width of the first column */
}

td:nth-child(2) {
  text-align: left; /* Left justify the text in the second column */
}

tbody tr:last-child {
  height: 30%; /* Ensures the last row height is not affected */
}


/*
th {
   throwing error because theres nothing here
}
*/
.panel {
  width: 100%; /* Ensure the panel takes up the full width */
  display: block; /* Ensure the panel is displayed as a block element */
  margin-bottom: 20px; /* Add some space between panels */
}

h4 {
  cursor: pointer;
  display: block; /* Ensure the header is displayed as a block element */
  width: 100%; /* Ensure the header takes up the full width */
}

.float-image {
  float: right;
  margin-left: -20px; /* Adjust this value to position the image */
  margin-bottom: 10px; /* Add some space below the image */
  width: 250px; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
}

footer {
  background: url("./images/bigtop_Bottom.png") no-repeat center center;
  background-size: cover;
  padding: 20px;
  color: rgb(0, 0, 0);
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin: 5px 0;
}

.button:hover {
  background-color: #0056b3;
}

/*BigBox centered div box thing*/

.bigbox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto; /* Centering the bigbox element */
  background: url("./images/starburst_1.jpg") no-repeat center center; /* Adding background image */
  background-size: cover; /* Covering the entire bigbox area */
  position: relative; /* Ensuring the background is behind the boxes */
  /*opacity: 0.5;  Making the background semi-transparent */
  z-index: 1; /* Setting z-index for bigbox */
}
.box {
  height: 100px; /* Adjust height as needed */
  margin: 10px; /* Adding margin */
  padding: 0px; /* Adding padding */
  display: flex;
  justify-content: center; /* Centering text horizontally */
  align-items: center; /* Centering text vertically */
  text-align: center; /* Centering text */
  z-index: 2; /*Setting z-index for boxes */
}
.box1 {
  flex: 1 1 10%;
  /* background-color: #007bff;*/
}

.box1 h2 {
  font-size: 3em;
  color: var(--font-color-1); /* Applying font color */
}

.box2 {
  flex: 1 1 30%;
  /* background-color:#2a9d8f; */
}

.box2 h2 {
  color: var(--font-color-2); /* Applying font color */
  font-size: 3em;
}

.box3 {
  flex: 1 1 50%;
  /* background-color:#4b0000; */
}

.box3 h2{  color: var(--font-color-3); /* Applying font color */
  font-size: 5em;}

.box4 {
  flex: 1 1 25%;
  /* background-color:#a1c181; */
}

.box4 h2{  color: var(--font-color-4); /* Applying font color */
  font-size: 3em;}

.box5 {
  flex: 1 1 25%;
  /* background-color: #cd5c5c; */
}

.box5 h2{ 
  color: var(--font-color-5); /* Applying font color */
  font-size: 2.5em;
}

.box6 { /*BARKER IMG */
  flex: 1 1 30%;
  /* background-color: #ebc32c;*/
}

.box6 h2 {
  color: var(--font-color-5); /* Applying font color */
  font-size: 3em;
  text-align: left;
}

.box7 {
  flex: 1 1 33%;
  color: hsl(0, 0%, 100%);
  font-size: 2em;
  /* background-color: aquamarine; */
}

.box7 h2{
  color: var(--font-color-6); /* Applying font color */
  font-size: 1.5em;
}

.box8 {
  flex: 1 1 33%;
  /* background-color: aqua; */
}

.box8 h2{
  color: var(--font-color-7); /* Applying font color */
  font-size: 3em;
}

.box9 {
  flex: 1 1 34%;
  /* background-color: blueviolet; */
}

.box9 h2 {
  color: var(--font-color-15); /* Applying font color */
  font-size: 3em;
}

#section3 {
  display: flex;
  flex-direction: column;
  height: 10vh; /* Adjust this value as needed */
}

#Sec3Top {
  flex: 0 0 80%; /* 80% height */
}

#Sec3Bottom {
  flex: 0 0 20%; /* 20% height */
}

/* Styles for mobile devices */
@media (max-width: 600px) {
  .rsvp-button {
    width: 200px; /* Adjusts the width for smaller screens */
    height: 70px; /* Adjusts the height for smaller screens */
    font-size: 16px; /* Adjusts the font size for smaller screens */
  }


  .curtain {
    width: 10%;
  }

  .box{
    font-size: .8em;
  }

  header {
    background: url("./images/bigtop_top.png") no-repeat center center;
    background-size: cover;
    width: 100%; /* Ensure the header covers the full width */
    padding: 80px 10px; /* Increased padding for better visibility */
    color: white;
    z-index: 3;
    margin-bottom: -180px; /* Adjust this value to overlap the curtains */
  }
  
  header h2 {
    margin: 0;
    padding: 0;
    font-size: 2em;
    font-family: "Rye", cursive; /* Apply the RYE font */
    color: white; /* Set text color to white */
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
      2px 2px 0 #000; /* Black outline */
  }
  
  /*for all other h2 elements*/
  h2 {
    font-size: 1em;
    font-family: "Rye", cursive; /* Apply the RYE font */
    color: var(--font-color-16); /* Set text color to white */
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
      2px 2px 0 #000; /* Black outline */
  }

  .float-image {
    float: right;
    margin-left: -20px; /* Adjust this value to position the image */
    margin-bottom: 10px; /* Add some space below the image */
    width: 150px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
  }
}  

/* Responsive Design */
@media (max-width: 768px) {
  .curtain {
    width: 30%;
  }

  nav ul li a {
    font-size: 1em;
  }
}

@media (max-width: 480px) {
  .curtain {
    width: 40%;
  }

  nav ul li a {
    font-size: 0.8em;
  }
}