* {
  box-sizing: border-box;
}


/* Set the font family and default styles */
body {
  font-family: Arial, sans-serif;
  color: #f2f2f2;
  background-color: #000;
}

/* Style the navigation bar */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 35px;
  background-color: #000;
  z-index: 1; /* set the z-index to 1 */
}

nav ul {
  display: flex; /* Use flexbox to display the list horizontally */
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

nav li {
  margin: 0 25px; /* Add spacing between the list items */
}

/* Style the links in the navigation bar */
nav a {
  text-decoration: none;
  color: #fff;
}

/* Style the visited links in the navigation bar */
nav a:visited {
  color: #d3d3d3;
}

/* Style the links in the navigation bar on hover */
nav a:hover {
  color: #000;
  background-color: #d3d3d3;
}


/* Style the links in the body */
main a {
  text-decoration: none;
  color: #fff;
}

/* Style the visited links in the body */
main a:visited {
  color: #d3d3d3;
}

/* Style the links in the body */
main a:hover {
  color: #000;
  background-color: #d3d3d3;
}



  /* Style Images */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 800px;
  border-radius: 15px;
  filter: sepia(60%);
}
  
img:hover {
  filter: sepia(0%);
}

/* Span styles for enlarging text */
.large {
font-size: 1.35em;
}

.larger {
font-size: 1.75em;
}



/* Styles for screens 800px and under */
@media (max-width: 800px) {

/* Style the header for small screens */
header {
  background-color: #000;
  background-image: url('coffinwoodheadersm.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 170px;
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 1; /* set the z-index to 1 */
}

/* Style the main content area for small screens */
main {
  margin-top: 200px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

  /* Description box - outer wrapper  for small screens */
  .description-box {
    margin-top: 0px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 10px;
    display: flex;
    width: calc(0.9 * 100vw);
    height: calc(1.8 * 100vw);
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    background-color: #000000;
    background-image: url('coffinbg.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}



  /* Tour Box - Tour Name Container for small screens */
   .description-head {
    margin: 0 auto;
    margin-top: 15vw;
    margin-bottom: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.55 * 100vw);
    box-sizing: border-box;
}

  /* Tour Box - Coffinwood ONLY */
   .description-head1 {
    margin: 0 auto;
    margin-top: 40vw;
    margin-bottom: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.7 * 100vw);
    box-sizing: border-box;
}


  /* Tour Box - Summary Box for small screens */
   .description-sum {
    margin: 0 auto;
    margin-top: 4vw;
    margin-bottom: 0;
    padding: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    width: calc(0.75 * 100vw);
    box-sizing: border-box;
}

  /* Tour Box - text description upper */
   .description-text1 {
    margin: 0 auto;
    margin-top: 5vw;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    width: 58vw;
    box-sizing: border-box;
}


  /* Tour Box - text description lower */
   .description-text2 {
    margin: 0 auto;
    margin-top: 1vw;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    width: 44vw;
    box-sizing: border-box;
}

  /* Tour Box - Information block lower for small screens */
   .description-info {
    margin: 0 auto;
    margin-top: 3vw;
    margin-bottom: 3vw;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: 44vw;
    box-sizing: border-box;
}


  /* Tour Box - List Box upper half for small screens */
   .description-list1 {
    margin: 0 auto;
    margin-top: 0vw;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    width: 73vw;
    box-sizing: border-box;
}

  /* Tour Box - list box lower half for small screens */
   .description-list2 {
    margin: 0 auto;
    margin-top: 1vw;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    width: 44vw;
    box-sizing: border-box;
    border: 2px solid pink;
}


  /* Headings for small screens */
h1 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: 6.75vw;
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

h2 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: 5vw;
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

h3 {
  margin: 0 auto;
  padding: 1vw 0 0 0;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: 4.5vw;
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}



  /* Tour Blurb for small screens */

.blurb {
  margin: 0 auto;
  text-align: center;
  color: #f2f2f2;
  font-size: 3vw;
  font-style: italic;
  text-shadow: 0 0 2px #272727;
}

  /* Tour Info for small screens */

.info {
  margin: 0 auto;
  text-align: center;
  color: #f2f2f2;
  font-size: 3.25vw;
  font-style: normal;
  font-weight: bolder;
  line-height: 4vw;
  text-shadow: 0 0 2px #272727;
}


  /* Description List for small screens */
main ul {
  padding: 0;
  margin-left: 0 auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  font-size: 3.5vw;
  text-align: center;
  box-sizing: border-box;
}

main li {
  line-height: 1.5;
  text-shadow: 0 0 1px #272727;
  text-align: center;
}


  /* Reverse the order of the columns for small screens */
  .column-image {
    order: 2;
  }
  
  .column-text {
    order: 1;
  }
  
  /* Move the images below the text for small screens */
  .column-image img {
    margin-top: 10px;
  }
  
  /* Add padding to the text column */
  .column-text {
    padding-top: 10px;
    margin: 0 auto;
    text-align: center;
  }

}

/* Styles for screens between 801px and 1050px */
@media (min-width: 801px) and (max-width: 1050px) {

/* Style the fixed header for med screens */
header {
  background-color: #000;
  background-image: url('coffinwoodheader.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 250px;
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 1; /* set the z-index to 1 */
}


/* Style the main content area for med screens */
main {
  display: flex;
  margin-top: 285px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1050px;
  padding-top: 20px;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}


  /* Tour Box - outer wrapper for med screens */
  .description-box {
    margin-top: 0px;
    margin-left: 2vw;
    margin-right: 2vw;
    padding: 0;
    display: flex;
    width: calc(0.9 * 54vw);
    height: calc(1.8 * 54vw);
    flex-direction: column;
    align-items: flex-start;
    background-color: #000000;
    background-image: url('coffinbg.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

  /* Tour Box - header box for med screens */
   .description-head {
    margin: 0 auto;
    margin-top: 9vw;
    margin-bottom: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.55 * 54vw);
    box-sizing: border-box;
}

  /* Tour Box - Coffinwood ONLY for med screens */
   .description-head1 {
    margin: 0 auto;
    margin-top: calc(0.55 * 40vw);
    margin-bottom: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.55 * (0.7 * 100vw));
    box-sizing: border-box;
}



  /* Tour Box - description box for med screens */
   .description-sum {
    margin: 0 auto;
    margin-top: 2vw;
    margin-bottom: 0;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.75 * 54vw);
    box-sizing: border-box;
}

  /* Tour Box - text description upper for med screens */
   .description-text1 {
    margin: 0 auto;
    margin-top: calc(.55 * 4vw);
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.55 * 56vw);
    box-sizing: border-box;
}


  /* Tour Box - text description lower for med screens */
   .description-text2 {
    margin: 0 auto;
    margin-top: 1vw;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.55 * 44vw);
    box-sizing: border-box;
}

  /* Tour Box - Information block lower for med screens */
   .description-info {
    margin: 0 auto;
    margin-top: calc(.5 * 3vw);
    margin-bottom: calc(.5 * 3vw);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.55 * 44vw);
    box-sizing: border-box;
}



  /* Tour Box - list box upper half for med screens */
   .description-list1 {
    margin: 0 auto;
    margin-top: 0vw;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.75 * 54vw);
    box-sizing: border-box;
}

  /* Tour Box - list box lower half for med screens */
   .description-list2 {
    margin: 0 auto;
    padding: calc(.3 * 3vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.5 * 54vw);
    box-sizing: border-box;
}


  /* Headings for med screens */
h1 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(0.54 * 6.75vw);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

h2 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(0.54 * 5vw);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

h3 {
  margin: 0 auto;
  padding: 1vw 0 0 0;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(0.54 * 4.5vw);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}


  /* Tour Blurb for med screens */
.blurb {
  margin: 0 auto;
  text-align: center;
  color: #f2f2f2;
  font-size: calc(0.54 * 3vw);
  font-style: italic;
  text-shadow: 0 0 2px #272727;
}

  /* Tour Info for med screens */
.info {
  margin: 0 auto;
  text-align: center;
  color: #f2f2f2;
  font-size: calc(0.54 * 3.25vw);
  font-style: normal;
  font-weight: bolder;
  line-height: calc(0.54 * 4vw);
  text-shadow: 0 0 2px #272727;
}



  /* Description List for med screens */
main ul {
  padding: 0;
  margin: 1vw auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  font-size: calc(0.54 * 3vw);
  text-align: center;
  box-sizing: border-box;
}

main li {
  line-height: 1.5;
  text-shadow: 0 0 1px #272727;
}

  /* Style Images for med screens */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0; 
  margin-bottom: 6vw; 
  width: 95%;
  max-width: 800px;
  border-radius: 15px;
  filter: sepia(60%);
}



/* Style the image column for med screens */
.column-image {
  display: flex;
  min-width: 40vw;
  max-width: 45vw;
  margin-left: 2vw;
  margin-right: 0vw;
  margin-top: 2vw;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Style the text column for med screens */
.column-text {
  display: flex;
  min-width: 52vw;
  max-width: 54vw;
  margin-left: 2vw;
  margin-right: 0;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  text-align: center;
  box-sizing: border-box;
}

  /* Set the order of the columns for med screens */
  .column-image {
    order: 1;
  }
  
  .column-text {
    order: 2;
  }

}


/* Media query for screens above 1050px */
@media screen and (min-width: 1051px) {


/* Style the fixed header for large screens */
header {
  background-color: #000;
  background-image: url('coffinwoodheader.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 250px;
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 1; /* set the z-index to 1 */
}


/* Style the main content area for large screens */
main {
  display: flex;
  margin-top: 285px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1800px;
  padding-top: 20px;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}


  /* Tour Box - outer wrapper  for large screens */
  .description-box {
    margin-top: 0px;
    margin-left: 5vw;
    margin-right: 10vw;
    padding: 0;
    display: flex;
    width: calc(0.9 * 40vw);
    height: calc(1.8 * 40vw);
    flex-direction: column;
    align-items: flex-start;
    background-color: #000000;
    background-image: url('coffinbg.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

  /* Tour Box - header box for large screens */
   .description-head {
    margin: 0 auto;
    margin-top: calc(0.4 * 15vw);
    margin-bottom: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.55 * 40vw);
    box-sizing: border-box;
}

 /* Tour Box - Coffinwood ONLY for large screens */
   .description-head1 {
    margin: 0 auto;
    margin-top: calc(0.55 * 30vw);
    margin-bottom: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.7 * 40vw);
    box-sizing: border-box;
}


  /* Tour Box - description box for large screens */
   .description-sum {
    margin: 0 auto;
    margin-top: 1.5vw;
    margin-bottom: 0;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.75 * 40vw);
    box-sizing: border-box;
}

 /* Tour Box - text description upper for large screens */
   .description-text1 {
    margin: 0 auto;
    margin-top: calc(.4 * 1vw);
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.55 * 40vw);
    box-sizing: border-box;
}


  /* Tour Box - text description lower for large screens */
   .description-text2 {
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.45 * 40vw);
    box-sizing: border-box;
}


  /* Tour Box - Information block lower for large screens */
   .description-info {
    margin: 0 auto;
    margin-top: calc(.4 * 3vw);
    margin-bottom: calc(.4 * 3vw);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(.45 * 40vw);
    box-sizing: border-box;
}


  /* Tour Box - list box upper half for large screens */
   .description-list1{
    margin: 1vw auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.75 * 40vw);
    box-sizing: border-box;
}
  /* Tour Box - list box lower half for large screens */
   .description-list2{
    margin: 0 auto;
    padding: calc(.2 * 3vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    width: calc(0.5 * 40vw);
    box-sizing: border-box;
}


  /* Headings for large screens */
h1 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(0.35 * 6.75vw);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

h2 {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(0.4 * 5vw);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

h3 {
  margin: 0 auto;
  padding: 1vw 0 0 0;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-size: calc(0.4 * 4.5vw);
  font-weight: bold;
  text-shadow: 1.5vw 1.5vw 2vw #000000;
}

  /* Tour Blurb for large screens */

.blurb {
  margin: 0 auto;
  text-align: center;
  color: #f2f2f2;
  font-size: calc(0.4 * 3vw);
  font-style: italic;
  text-shadow: 0 0 2px #272727;
}


  /* Tour Info for large screens */

.info {
  margin: 0 auto;
  text-align: center;
  color: #f2f2f2;
  font-size: calc(0.4 * 3.5vw);
  font-style: normal;
  font-weight: bolder;
  line-height: calc(0.4 * 4vw);
  text-shadow: 0 0 2px #272727;
}


  /* Description List for large screens */
main ul {
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  font-size: calc(0.4 * 3vw);
  text-align: center;
  box-sizing: border-box;
}

main li {
  line-height: 1.5;
  text-shadow: 0 0 1px #272727;
}

  /* Style Images for large screens */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0; 
  margin-bottom: 1vw; 
  width: 80%;
  max-width: 800px;
  border-radius: 15px;
  filter: sepia(60%);
}



/* Style the image column for large screens */
.column-image {
  display: flex;
  min-width: 40vw;
  max-width: 50vw;
  margin-left: 5vw;
  margin-right: 0vw;
  margin-top: 2vw;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Style the text column for large screens */
.column-text {
  display: flex;
  max-width: 40vw;
  margin-left: 3vw;
  margin-right: 3vw;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

  /* Set the order of the columns for large screens */
  .column-image {
    order: 1;
  }
  
  .column-text {
    order: 2;
  }