styles.css

/*Overall Styles*/
@media screen and (min-width: 501px) {/*Shut off mobile version unless we are beneath 500px*/
  /* MOBILE VERSION */
  .mobile_version{
    display: none;
  }
}
/* Set body styles */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 0px; /* Add padding to the top to push the content down */
  padding-bottom: 40px;
  background-color: rgb(30,30,30);
}

/* Styles for the header */
.header {
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  position: fixed;
  background-color: rgb(20,50,100);
  padding: 20px 10px;
  z-index: 3;
}

.header a {
  top: 0;
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: rgb(80,180,80);
  color: white;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
}

.contacts{
  width: 30px;
}

/* Styles for fixed header and footer */
.fixed-header,
.fixed-footer {
  width: 100%;
  position: fixed;
  background: rgb(20,50,100);
  padding: 10px 0;
  color: rgb(80,180,80);
  a:visited {color: rgb(80,180,80)};
  z-index: 2;
}

.fixed-header {
  top: 0;
}

.fixed-footer {
  bottom: 0;
  height: 20px;
}

/* Container styles */
.container {
  width: 80%;
  margin: 0 auto; /* Center the container horizontally */
}

/* Styles for navigation links */
nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}

/*Hide mobile header on Desktop*/
.header-mobile {
  display: none;
}


/*HOME PAGE

-----------------------------------------------------------------------------------------------

*/

.background-container-index {
  margin-top: 90px;
  /*position: relative; /* To allow absolute positioning of the button inside this container */
  background-position: center; /*Ideally I'd like this centered 200px down too so it's less of the sky, but rn the image is being duplicated if I try this*/
  width: auto;
  height: calc(100vh - 130px); /* Set the desired height for the background image */
  background-image: url('images/san_pedro_de_atacama_2022_08_25.jpg');
  background-size: cover; /* Adjust the background image size to cover the container */
  z-index: 0;
}
/* Collapsible content styles */
.collapsible {
  background-color: rgb(200, 200, 200);
  color: black;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 30px;
}


.active,
.collapsible:hover {
  background-color: rgb(165, 165, 165);
}
.expand-button:hover {
  background-color: rgb(165, 165, 165);
}
.superimposed-button:hover {
  background-color: rgb(80,180,80);
  color:white;
}

.content {
  padding: 0 48px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: rgb(240, 240, 240);
}

.superimposed-content {
  padding: 0 32px;
  width: 204px; 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: rgb(240, 240, 240);
  z-index:2;
  position: absolute;
  top: 32.5%;
  left: 30%;
  z-index: 1;
  transform: translate(-134px, 0px);
}
.superimposed-button {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  font-size: 40px;
  background-color: rgb(255,255,255);
  color: black;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 2; /* Place the button on top of the background container */
}





/*ABOUT ME PAGE

-----------------------------------------------------------------------------------------------

*/


/* Additional styles for the first content section */
#first_content {
  margin-top: 90px;
  background-color: rgb(240, 240, 240);
  padding: 50px;
}

#first_content h2 {
  color: black;
}

#first_content h3 {
  color: black;
}

#first_content p {
  color: black;
}


.whole_width_content {
  margin-top: 90px;
  background-color: rgb(240, 240, 240);
  padding: 50px;
}

.whole_width_content h2 {
  color: black;
}

.whole_width_content h3 {
  color: black;
}

.whole_width_content p {
  color: black;
}

.photos_container {
  display:flex;
  gap:10%;
  max-width: 100%;
}

.landscape {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 50%;
}

.portrait {
  display: flex;
  align-items: center;
  max-width: 50%;
}

.landscape img, .portrait img {
  max-width: 100%;
  height:auto;
}

.zoomable_svg svg {
  width: 100%;
  height: 100%;
  cursor: grab;
}

/*RESEARCH AND RUNNING PAGES

-----------------------------------------------------------------------------------------------

*/


/* The left and right images have to be in divs so that the .img feature can be 100% wide, so that I don't mess with it and instead use more flexible and unique divs for each page*/
.left_side_image,
.right_side_image {
  width: 40%;
}

/*surprisingly, there are no side specifc rules needed atm!*/
/* .left_side_image {
  ;
}
.right_side_image {
  ;
} */


/* Styles for left and right buttons */
.left-button,
.right-button {
  width: 50%;
  background-color: rgb(200, 200, 200);
  color: black;
  cursor: pointer;
  border: none;
  text-align: center;
  outline: none;

}

.left-button {
  background-color: rgb(220, 220, 220);
  float: left;
}

.right-button {
  background-color: rgb(200, 200, 200);
  /* float: right; */
  transform:translateX(150%); /* This is just a test, should change & may have to add more spots. Also, the font being huge isn't due to it being on the right*/ 

}

/* Additional styles for the button content */
.left-button .content,
.right-button .content {
  padding: 10px;
  max-height: 0; /*Change this??*/ 
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: rgb(240, 240, 240);
}


/*
The following CSS code is for the buttons on the research and running pages.
They rest at the bottom of an image, expand upwards upon being clicked, and have a translucent content section.
*/

/* Styles for the image container */
.image-container {
  width: 92%;
  position: relative;
  display: flex;
  max-height: 40%; /*This line isn't doing anything to limit the height of the content. However, setting it to px flattens tall images*/
/* trying to find a setting to add the right amount of space between images */
  margin-bottom: 100px;
  justify-content: space-between;
}

img {
  width: 100%;
  height: auto;
}

/* Styles for the button and content container */
.button-container {
  position: absolute;
  bottom: 0;
  width: 40%;
  background-color: rgba(255, 255, 255, 0.9); /* Translucent white background */
  overflow: hidden;
}

/* Styles for the collapse/expand button */
.expand-button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: rgb(255, 255, 255);
  color: rgb(0,0,0);
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 30px;
}

/* Styles for the collapsed content */
.collapsed-content {
  text-align: center;
  padding: 20px;
  display: none;
  width: 95%;
  transition: max-height 0.2s ease-out;
}

/* Styles for the expanded content */
.expanded-content {
  max-height: 0px;
  padding-left: 20px;
  width: 95%;
  transition: max-height 0.2s ease-out;
}

/* Styles for the scrollable content */
.scrollable-content {
  max-height: 200px; /* Adjust this value as needed */
  overflow-y: auto;
  width: 100%;
  left: 50px;
  text-align: left;
}

/* Styles for the expanded header */
.expanded-content h2 {
  text-align: center;
  margin: 0;
}

/* Show expanded content when button is clicked */
.expand-button.clicked + .expanded-content {
  display: block;
}

/* Hide collapsed content when button is clicked */
.expand-button.clicked + .collapsed-content {
  display: block;
}

/* Create left button group for the buttons on the left side */
.left{
  left: 4%;
}
/* Likewise, create the right button group*/
.right{
  transform: translateX(57%);
}


/*404 PAGE

-----------------------------------------------------------------------------------------------

*/
.background-container-404 {
  background-position: center bottom; /* To allow absolute positioning of the button inside this container */
  width: auto;
  height: calc(100vh - 344px); /* header is 90px, message bar is 224px, and footer is 30px */
  background-image: url('/images/voluntown.jpg');
  background-size: cover; /* Adjust the background image size to cover the container */
  z-index: 0;
  /* Center the container horizontally */
}























































































/*MOBILE VERSION

-----------------------------------------------------------------------------------------------
 - Under 905px the header cuts off, so mobile size will need to be increased
*/

@media screen and (max-width: 500px) {
  /* MOBILE VERSION */

/*Overall Styles*/
.desktop_version{
  display: none;
}
/* Set body styles */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 0px; /* Add padding to the top to push the content down */
  padding-bottom: 40px;
  background-color: rgb(30,30,30);
}

/* Styles for the header */
.header {
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  position: fixed;
  background-color: rgb(20,50,100);
  padding: 20px 10px;
  z-index: 3;
}

.header a {
  top: 0;
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: rgb(80,180,80);
  color: white;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
}

.contacts{
  width: 30px;
}

/* Styles for fixed header and footer */
.fixed-header,
.fixed-footer {
  width: 100%;
  position: fixed;
  background: rgb(20,50,100);
  padding: 10px 0;
  color: rgb(80,180,80);
  a:visited {color: rgb(80,180,80)};
  z-index: 2;
}

.fixed-header {
  top: 0;
}

.fixed-footer {
  bottom: 0;
  height: 20px;
}

/* Container styles */
.container {
  width: 80%;
  margin: 0 auto; /* Center the container horizontally */
}

/* Styles for navigation links */
nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}
/**/
/*Hide desktop header on mobile*/
.header {
  display: none;
}
/*Show mobile header mobile*/
.header-mobile {
  display: block;
}
/*Allow for functionality of the menu button*/
.button-container.header-button {
  position: fixed;
  align-items: top;
  width: 100%;
  top: 0;
  z-index:100;
  height: 50px;
  overflow: hidden;
  background-color: rgb(20,50,100);
}
.button-container.header-button.collapsed-content{
  height:0;
}
.button-container.header-button.active{
/* .header-button.expand-button{
  height:20%;
} */
  /* height: auto; Expands to fit content */
  overflow: visible; /* Show all content when expanded */
  /* max-height: 600px; */ /*this setting isn't working right now. javascript keeps making it 228px. Front end looks OK without it though, so it's low priority.*/
  background-color: rgb(20,50,100);
}
.first-content{
  margin-top: 50px;
}
.header-button.expand-button{
  background-color: rgb(20,50,100);
  color: white;
}
.header-button.expand-button:hover{
  background-color: rgb(20,50,100);
  color: white;
}
.header-button.expanded-content{
  background-color: white;
  /* height:600px; */ /*this setting isn't working right now. javascript keeps making it 228px. Front end looks OK without it though, so it's low priority.*/
  /*transition: max-height 0.2s ease-out;*/ /*Currently it only moves the backgorund and not the headers inside so it's super ugly*/
  transition: max-height 0.0s ease-out; /*Actually, after having had the menu with no delay for so long I'm sure if I even like it with delay.
  It's important enough to where the user should access it immediately.*/
}


/*HOME PAGE

-----------------------------------------------------------------------------------------------

*/

.background-container-index {
  margin-top: 50px;
  /*position: relative; /* To allow absolute positioning of the button inside this container */
  background-position: center; /*Ideally I'd like this centered 200px down too so it's less of the sky, but rn the image is being duplicated if I try this*/
  width: auto;
  height: calc(100vh - 90px); /* Set the desired height for the background image */
  background-image: url('images/san_pedro_de_atacama_2022_08_25.jpg');
  background-size: cover; /* Adjust the background image size to cover the container */
  z-index: 0;
}
/* Collapsible content styles */
.collapsible {
  background-color: rgb(200, 200, 200);
  color: black;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 30px;
}

.active,
.collapsible:hover {
  background-color: rgb(165, 165, 165);
}
.expand-button:hover {
  background-color: rgb(165, 165, 165);
}

.superimposed-button:hover {
  background-color: rgb(80,180,80);
  color:white;
}

.superimposed-button {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  font-size: 40px;
  background-color: rgb(80,180,80);
  color:white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 2; /* Place the button on top of the background container */
}

.content {
  padding: 0 48px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: rgb(240, 240, 240);
}

.superimposed-content {
  padding: 0 2%;
  width: 46%; 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: rgb(240, 240, 240);
  z-index:2;
  position: absolute;
  top: 36.5%; /*Bumped down by one percent to fit small iPhones*/
  left: 50%;
  z-index: 1;
  transform: translate(-50%, 0px); /*Half of its width on mobile so it lines up with the button*/
}


/*ABOUT ME PAGE

-----------------------------------------------------------------------------------------------

*/


/* Additional styles for the first content section */
#first_content {
  margin-top: 50px;
  background-color: rgb(240, 240, 240);
  padding: 15px;
}

#first_content h2 {
  color: black;
}

#first_content h3 {
  color: black;
}

#first_content p {
  color: black;
}


.whole_width_content {
  margin-top: 90px;
  background-color: rgb(240, 240, 240);
  padding: 15px;
}

.whole_width_content h2 {
  color: black;
}

.whole_width_content h3 {
  color: black;
}

.whole_width_content p {
  color: black;
  text-align: justify;
}

.photos_container {
  display:flex;
  gap:10%;
  max-width: 100%;
  max-height: 80%;
}

.landscape {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 50%;
}

.portrait {
  display: flex;
  align-items: center;
  max-width: 50%;
}

.landscape img, .portrait img {
  max-width: 100%;
  height:auto;
}


/*In theory, these would allow for styling of the svg container and the box if people think it would look better with clear boundaries. Would also be needed on the desktop version*/
/* .zoomable_svg svg{ 
  width: 100% ;
  height: 50vh ;
  cursor: grab;
  display: block;
  border: 1px solid red; 
} 

#svg_placeholder {
  width: 100% ;
  height: 50vh ;
  background-color: rgba(0, 255, 0, 0.2) ;
} */

/*RESEARCH AND RUNNING PAGES

-----------------------------------------------------------------------------------------------

*/


/* The left and right images have to be in divs so that the .img feature can be 100% wide, so that I don't mess with it and instead use more flexible and unique divs for each page*/
.left_side_image,
.right_side_image {
  width: 90%;
  justify-content: center;
  left: 4%;
}

/*surprisingly, there are no side specifc rules needed atm!*/
/* .left_side_image {
  ;
}
.right_side_image {
  ;
} */


/* Styles for left and right buttons */
.left-button,
.right-button {
  width: 90%;
  background-color: rgb(200, 200, 200);
  color: black;
  cursor: pointer;
  border: none;
  text-align: center;
  outline: none;

}

.left-button {
  background-color: rgb(220, 220, 220);
  float: left;
}

.right-button {
  background-color: rgb(200, 200, 200);
  /* float: right; */
  transform:translateX(150%); /* This is just a test, should change & may have to add more spots. Also, the font being huge isn't due to it being on the right*/ 

}

/* Additional styles for the button content */
.left-button .content,
.right-button .content {
  padding: 10px;
  max-height: 0; /*Change this??*/ 
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: rgb(240, 240, 240);
}


/*
The following CSS code is for the buttons on the research and running pages.
They rest at the bottom of an image, expand upwards upon being clicked, and have a translucent content section.
*/

/* Styles for the image container */
.image-container {
  width: 92%;
  display: flex;
  max-height: 40%; /*This line isn't doing anything to limit the height of the content. However, setting it to px flattens tall images*/
/* trying to find a setting to add the right amount of space between images */
  margin-bottom: 100px;
  justify-content: center;
  left: 10%;
}

img {
  width: 100%;
  height: auto;
}

/* Styles for the button and content container */
.button-container {
  position: absolute;
  bottom: 0;
  width: 90%;
  background-color: rgba(255, 255, 255, 0.9); /* Translucent white background */
  overflow: hidden;
}

/* Styles for the collapse/expand button */
.expand-button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: rgb(255, 255, 255);
  color: rgb(0,0,0);
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 30px;
}

/* Styles for the collapsed content */
.collapsed-content {
  text-align: center;
  padding: 20px;
  display: none;
  width: 95%;
  transition: max-height 0.2s ease-out;
}

/* Styles for the expanded content */
.expanded-content {
  max-height: 0px;
  padding-left: 2.5%;
  width: 95%;
  padding-right: 2.5%;
  transition: max-height 0.2s ease-out;
}

/* Styles for the scrollable content */
.scrollable-content {
  max-height: 200px; /* Adjust this value as needed */
  overflow-y: auto;
  width: 100%;
  left: 50px;
  text-align: left;
}

/* Styles for the expanded header */
.expanded-content h2 {
  text-align: center;
  margin: 0;
}

/* Show expanded content when button is clicked */
.expand-button.clicked + .expanded-content {
  display: block;
}

/* Hide collapsed content when button is clicked */
.expand-button.clicked + .collapsed-content {
  display: block;
}

/* Create left button group for the buttons on the left side */
.left{
  left: 4%;
}
/* Likewise, create the right button group*/
.right{
  left: 4%;
  transform: translateX(0%);
}


/*404 PAGE

-----------------------------------------------------------------------------------------------

*/
.background-container-404 {
  background-position: center bottom; /* To allow absolute positioning of the button inside this container */
  width: auto;
  height: calc(100vh - 304px); /* header is 50px on mobile, message bar is 224px (in theory, this would be good to change someday since it gets taller on narrower devices), and footer is 30px */
  /*Actually, the height of the message bar can change, so this is not always accurate. But it's not that big of a deal because search engine headers compensate.*/
  background-image: url('/images/voluntown.jpg');
  background-size: cover; /* Adjust the background image size to cover the container */
  z-index: 0;
  /* Center the container horizontally */
}
}