body {
    font-family: 'Helvetica', sans-serif;

    min-width: 400px;
    align-content:center;
    color: white;
    /* background-color: green; */
    background-image: linear-gradient(to right, rgb(120, 221, 255),rgb(88, 201, 253));
    /* background-image: url(spacebg.jpg);
    background-size: auto;
    background-attachment:fixed;
    background-position: 50% 80%; */


}
header {
    margin-top: 5%;
    text-align: center;
}
/* .head-btns {
    margin:auto;
} */

.header-btn{
    margin: auto;
    border: none;
    border-right: 1px solid white; /* Remove borders */
    padding: 12px 16px; /* Some padding */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
    font-family: 'Helvetica', sans-serif;
    background-color: rgb(140, 211, 255);
    color: white;
  }

  .header-btn:hover{
    background-color: rgb(100, 193, 250);
  }

/* .container
{
    margin: auto;
    
} */

#name {
    margin-top: 20%;
    text-align: center;
    font-size:50pt;
    font-style: italic;
    position: relative;
    color: white;
}

.intro {
    margin-top: -10%;
    text-align: center;
    font-style: italic;
    font-weight: 500;

    /* border: 2px solid black;  */

}

/* h2{
    margin-left: 2%;
    font-size: 30pt;
    margin-bottom: 10px;
    font-style: italic;
    text-decoration: underline;
} */

#desc-cont{
    margin: auto;
    max-width: 40%;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    padding-top:1%;
    padding-bottom:1%;
}


p1 {
    text-align: center;
    position: relative;
    font-size: 15pt;
}

.section-head {
    margin:auto;
    margin-top: 20%;
    max-width: 80%;
}

/* ABOUT ME SECTION */
.about-me {

    /* border: 2px solid black;  */
    text-align:left;
    /* margin-bottom: 30%; */
}

.me-img{
    max-width: 45%; 
    float:left; 
    margin-right:15px; 
    margin-bottom: 5px;
    border-radius: 10px;
}

.section-name {
    /* margin-top: -9px; */
    font-style: italic;
    font-size: 3.4vw;
    font-weight: bold;
    /* border: 2px solid black; */
    
}

#abt-cont {
    /* border: 2px solid yellow; */
    font-size: 2.6vw;
    /* max-width: 40%; */
    overflow: hidden;
    padding: 2% 2% 2% 3%;
    border-radius: 10px;
    font-style: italic;
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}

/* PREVIOUS COOPS/TIMELINE SECTION */
.previous-coops {
    /* border: 2px solid black;  */
    text-align:center;
    margin-top: 30%;
}

.timeline {
    margin: auto;
    max-width: 100%;
    /* padding:25px; */
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
    /* border: 2px solid yellow;  */
}
.timeline_date-right {
    margin-right: 20px;
    font-size: 2.5vw;
}
.timeline_date-left {
    margin-left: 20px;
    font-size: 2.5vw
}
.timeline_component-bg {
    margin: 0 15px 15px 15px;
    padding: 1.5em;
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.timeline-middle {
    position: relative;
    background: white;

}
.timeline-point {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width:15px;
    height: 15px;
    background: white;
    border-radius: 50%;
}

.timeline-point-bottom {
    top: initial;
    bottom: 0;
}
.timeline-title-right {
   margin: 0; 
   font-size: 2.7vw;
   text-align: left;
}

.title-desc-right {
    font-size: 2.2vw;
    text-align: left;
}

.timeline-title-left {
    margin: 0; 
    font-size: 2.7vw;
    text-align: right;
 }

 .timeline_date-bottom {
    text-align: left;
    bottom: 0;
    position: absolute;
    /* border: 2px solid black; */
 }

.title-desc-left {
    font-size: 2.2vw;
    text-align: right;
}

.timeline-paragraph {
    line-height: 1.25;
    font-size: 1.9vw;
}

.timeline-paragraph li{
    margin-top: 15px;
    /* border:1px solid black; */
}

.timeline_component-bottom {
    margin-bottom: 0;
    position: relative;
}


/* PHOTOS SECTION */

.photos {
    text-align: center;
    max-width: 100%;
    /* border: 1px solid black; */
}

.media-scroller {
    padding: 1rem;
    padding-top: 0;
    width: 95%;
    margin: auto;
    /* border: 1px solid yellow; */
    height: 90%;
}
.media-scroller-2 {
    padding: 1rem;
    padding-top: 0;
    width: 95%;
    margin: auto;
    /* border: 1px solid yellow; */
    height: 90%;
}
.images-container {
    display: flex;
    gap: 4em;
    overflow-x: auto;
    /* scroll-snap-type: x mandatory; */
    height: 90%;
    align-content: center;
    /* padding-bottom: 25px; */
    
}

.img-fig {
    max-height: 60%;
    height:100%;
    max-width: 125%;
    margin:auto;
}
.images-container img, .images-container video {
    /* scroll-snap-align: center; */
    /* width: 100%; */
    max-height: 90%;
    height:100%;
    margin:auto;
    border-radius: 10px;
    margin-bottom: 0;
}    


.image-caption{
    width: 400px;
    margin: auto;
    margin-top: 10px;
    font-size: 2.9vh;
    /* border: 1px solid yellow; */
    padding: 0 0;
    font-style: italic;
}





/* CONTACT ME SECTION */
.contact-me {
    max-width: 100%;
    text-align: center;
}
.contact-me-boxes {
    display:flex;
}

.contact-cont-left {
    flex: 1;
    max-width: 60%;
    background: white;
    align-items: center;
    justify-content: center;
    color: rgb(140, 211, 255);
    /* border: 1px solid yellow; */
}

form {
    display: flex;
    flex-direction:column;
    padding: 2vw 4vw;
    width: 80%;
}

form h3 {
    margin-bottom: 20px;
    font-size: 1.5em;
}

form input, form textarea {
    border: none;
    margin: 2% 0;
    padding: 20px;
    outline: none;
    background: whitesmoke;
    font-size: 1.9vw;
    font-family: 'PT Sans', sans-serif;
}

#submit-btn {
    margin: 2% 0;
    background-color: rgb(140, 211, 255);
    font-size: 2.3vw;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    padding: 15px 25px; /* Some padding */
    cursor: pointer; /* Mouse pointer on hover */
    font-family:  'PT Sans', sans-serif;
    color: white;
    overflow: hidden;
    align-items: center;
}   

#submit-btn:hover {
    background-color: rgb(100, 193, 250);
}
.contact-cont-right {
    /* display: flex; */
    padding-left: 5%;
    padding-right: 5%;
    max-width: 40%;
    justify-content: center;
    padding: 2vw 2vw;
    width: 80%;
    /* display: flex; */
}

.contact-cont-right h3 {
    margin-bottom: 4vh;
    font-size: 1.5em;
    /* border: 1px solid yellow; */
}

.contact-docs {
    /* display: table-cell; */
    /* vertical-align:middle; */
    /* margin: auto; */
    align-items: center;
}
.docs-btn {
    margin-left: 9%;
    margin-right: 9%;
    margin-bottom: 6%;
    background-color: white;
    font-size: 2.3vw;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    padding: 15px 8%; 
    width:60%;
    /* text-align: center; */
    cursor: pointer; /* Mouse pointer on hover */
    font-family:  'PT Sans', sans-serif;
    color: rgb(140, 211, 255);
    overflow: hidden;
    display:inline-flex; 
    align-items: center;
    justify-content: center;
  }

.docs-btn:hover {
    background-color:rgb(100, 193, 250);
}