* {font-family: Garamond, serif;}

body {
    background-color: #e2e2e2;
    margin: 0;
}

header {
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
    background-image: linear-gradient(rgba(79, 79, 255, 0.5), rgba(35, 35, 110, 0.5)), url("Pictures/Oregon/Wallowa/wallowa_lake_from_chief_joseph.JPG");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    padding-left: 100px;
}

.icon > img {
    padding: 15px;
    width: 50px;
    height: 50px;
}

.page_content {
    display: flex;
    flex-direction: row;
    margin-left: 10%;
    margin-right: 10%;
}

.text_section {
    text-align: left;
    max-width: 51%;
    font-size: 20px;
}

.text_block {
    background-color: rgb(203, 203, 255);
    min-width: fit-content;
    border-radius: 5px;
}

.text_block > p {
    padding: 10px;
}

/* Sidebar */
.sidebar_section {
    padding-top: 1.5%;
}

.sidebar {
    text-align: center;
    display: flex;
    position: sticky;
    top: 0;
    float: left;
    flex-direction: column;
}

.sidebar > a {
    padding: 15px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
    display: block;
    background-image: linear-gradient(to right, white, rgb(211, 211, 211));
    color: black;
    border: 3px solid black;
    border-radius: 5px;
}

.sidebar > a:hover {
    background-image: linear-gradient(to right, rgb(79, 79, 255), rgb(35, 35, 110));
    color: white;
}
/*
.on_page {
    background-image: linear-gradient(to right, rgb(112, 112, 190), rgb(79, 79, 135));
    color: white;
}
*/
.menu_sidebar {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

.menu_sidebar > img {
    width: 30px;
    padding: 5px;
    height: auto;
    cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* semi-transparent background */
  z-index: 2000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal a {
  color: white;
  font-size: 2em;
  margin: 15px;
  text-decoration: none;
}

.modal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 3em;
  color: white;
  cursor: pointer;
}

/* Picture Section */
.photo_grid_collection {
    margin-top: 1.5%;
    margin-bottom: 1.5%;
    text-align: center;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, 100%);
    border: 3px solid black;
    border-radius: 5px;
    background-image: linear-gradient(to right, rgb(176, 176, 228), rgb(129, 129, 204));
}

.photo_grid_collection > h2 {
    background-color: rgb(203, 203, 255);
}

.picture_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 0 auto;
    padding-top: 2%;
    justify-items: center;
}

.picture_section {
    margin-top: 1.5%;
    margin-bottom: 1.5%;
    padding: 1%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    border: 3px solid black;
    border-radius: 5px;
    background-image: linear-gradient(to right, rgb(176, 176, 228), rgb(129, 129, 204));
}

.picture_section > p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 10px;
}

.picture_grid > div {margin: 10px;}

.picture_grid > div > p {font-size: 15px;}

.picture_container_horizontal {
    width: 305px;
    height: 300px;
    /*aspect-ratio: 305 / 300;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.picture_container_vertical {
    width: 305px;
    height: 300px;
    /*aspect-ratio: 305 / 300;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.picture_container_horizontal > img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    padding: 15px;
    border: 1px solid black;
}

.picture_container_vertical > img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    padding: 15px;
    border: 1px solid black;
}

.full_image > img {
    max-width: 1000px;
    height: auto;
}

.image_content {
    text-align: center;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
    padding-bottom: 1.5%;
    width: 100%;
    border: 3px solid black;
    border-radius: 5px;
    background-image: linear-gradient(to right, rgb(176, 176, 228), rgb(129, 129, 204));
}

.image_content > p {
    padding-left: 20%;
    padding-right: 20%;
}

#fullImage {
    margin-top: 1.5%;
    max-width: 75%;
    max-height: 75%;
}

/* Slide Show on Home Page */

.w3-content {
    height: 465px;
    padding-left: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.w3-content > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.slides {
    width: 450px;
    max-height: 300px;
    animation: fadeInAnimation ease 7s;
}

/* Animation */

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.copyright {
    display: block;
    position: relative;
    bottom: 0;
    padding-left: 50%;
    z-index: 1000;
}

/* Size Changes */

@media only screen and (max-width: 1400px) {
    .icon {margin-left: 0%;}
    .picture_section {flex-direction: column; max-width: fit-content;}
    .text_section {min-width: 100%;}
}

@media only screen and (max-width: 1320px) {
    .picture_grid {grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 940px) {
    .picture_grid {grid-template-columns: repeat(1, 1fr);}
}

@media only screen and (max-width: 700px) {
    .page_content {flex-direction: column; align-items: center;}  
    .sidebar {display: none;}
    .menu_sidebar {display: block;}
    .icon {padding-left: 0px;}
    .icon > img {display: none;}
    .w3-content {padding-right: 1%; padding-bottom: 1%; height: 0%;}
    .picture_container_horizontal {width: 100%; height: auto;}
    .picture_container_vertical {width: 67.5%; height: auto;}
    .text_section {font-size: 85%;}
    .image_content {font-size: 75%;}
    .copyright {display: none;}
}

@media only screen and (max-width: 400px) {
    .image_content {font-size: 62.5%;}
}