/* 
    Created on : Feb 18, 2025, 2:46:12 PM
    Author     : Darion
*/

/* Imported Fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

/* Global Settings */

*{
    margin: 0;
    padding: 0;
}

/* Style body */
body {
    background-color: rgba(255, 236, 228, 1);
    width: 100vw;
    margin: 0;
}

/* Header styling */
header {
    background-color: rgba(122, 35, 35, 1);
    width: auto;
    max-width: 100vw;
    filter: drop-shadow(0px 2px 1px gray);
}

/* Header text styling */

.pageTitle {
    font-size: 6vw;
    font-family: "EB Garamond";
    text-align: center;
    color: rgba(255, 255, 255, 1);
    position: relative;
    margin-top: 1%;
    filter: drop-shadow(1px 1px 1px black);
    display: block;
    width: auto;
}

/* Style navigation box */
.navBox {
    padding-top: 2%;
    display: flex;
    width: auto;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: auto;
    
}

/* Add a background color to the top navigation */
.topnav {
  background-color: rgba(255, 236, 228, 1);
  overflow: hidden;
  position: relative;
  border-radius: 50px;
  font-family: "Courier Prime";
  font-weight: bold;
  box-shadow: 0px 0px 5px 1px inset;
  width: 40vw;
  display:flex;
  justify-content: center;
  text-align: center;
  padding: 0.5%;
  
}

.nav-divider{
    font-size: 1vw;
    padding-top: 0.5vw;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 1%;
  text-decoration: none;
  color: black;
  margin: 0.5%;
  font-size: 1vw;
  display: flex;
  justify-content: center;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  border-radius: 50px;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: rgba(122, 35, 35, .7);
  color: white;
  border-radius: 30px;
  text-shadow: 1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000;
}
 /* Social links */
 
 .socials{
     padding-bottom: 0.5vw;
     margin-left: 1vw;
 }
 
 .socials-footer{
     padding-top: 1vw;
 }
 
.socials a,
.socials-footer a {
    font-size: 1.2vw;        /* Size of the icons */
    margin: 0.5vw;         /* Space between icons */
    color: black;         /* Match your theme */
    text-decoration: none;
    transition: color 0.3s;
    padding: 0.75vw;
}

.socials a:hover,
.socials-footer a:hover {
    color: white;         /* Hover color */
}

 
/* Style all font icons */
.fa-brands {
  text-align: center;
  text-decoration: none;
  margin: 0.5vw;
  justify-content: center;
  align-items: center;
  border-radius: 10vw;
  background-color: white;
  padding: 1vw;
}

.fa-brands:hover {
  opacity: 0.7;
}

/* Set a specific color and background for each brand */
.fa-youtube, .fa-facebook, .fa-instagram, .fa-tiktok {
  color: black;
}

.tagline{
    font-family: "Courier Prime";
    text-align: center;
    padding-top: 1vw;
    color: white;
    font-weight: bold;
}

.footer {
  position: relative;
  background-color: red;
  color: white;
  background-color: rgba(122, 35, 35, 1);
  width: auto;
  display: block;
  min-height: 50vh;
  max-height: 50vh;
  box-shadow: 0px 0px 4px 1px black;
  text-align: center;
}

.footer p{
    font-family: "Courier Prime";
    text-align: center;
    padding-top: 2%;
    font-size: 1vw;
    width: auto;
}

/* Create three equal columns that float next to each other */
.home-content {
  display:grid;
  padding: 1vw;
  padding-left: 2vw;
  grid-template-columns: 30vw 15vw 45vw;
  grid-template-rows: auto;
  text-align: center;
  margin-top: 2vw;
  height: auto;
  margin-bottom: -4vw;
}

.headshot {
    width: 30vw;
    height: 40vw;
    border: 1px solid black;
    border-radius: 20px;
    margin: auto;
    padding: auto;
}

.home-image-strip{
    width: auto;
    height: auto;
    display: grid;
    flex-direction: column;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    padding-bottom: 9vw;
    margin: auto;
}

.home-strip-images{
    width: 9vw;
    height: 13vw;
    border: 2.5px solid black;
}

.home-image-strip-divider {
    display:none;
}

.bio-text {
    text-align: center;
    font-size: 1.80vw;
    align-content: center;
    font-family: "Diplomata";
    padding: auto;
    margin: auto;
}
.button-links{
    background-color: rgba(122, 35, 35, 1);
    border-radius: 0.5vw;
    font-family: "Courier Prime";
    font-size: 1vw;
    color: white;
    height: auto;
    width: auto;
    padding: 1vw;
    text-align: center;
}

.news {
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    background: rgba(122, 35, 35, 1);
    justify-content: center;
}

.news > a > img {
    border: solid black 0.2vw;
    padding: 0vw;
    margin: 1vw;
    border-radius: 1vw;
}

h2 {
    font-family: "Diplomata";
    font-size: 2vw;
}

.home-contact {
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    margin-bottom: 2vw;
}


.home-contact div:first-child{
    font-size: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}


.home-contact div:last-child{
    border: 0.2vw solid black;
    padding-bottom: -1vw;
    padding-top: 1vw;
    border-radius: 1vw;
    height: fit-content;
    padding-right: 0vw;
    text-align: center;
    width: 80%;
    margin: auto;
}

.contact {
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    margin-bottom: 2vw;
}

.contact > div{
    background-color: rgba(122, 35, 35, 1);
}

button.submit-contact{
    background-color: rgba(255, 236, 228, 1);
    color: black;
}

.contact div:first-child{
    font-size: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}


.contact div:last-child{
    border: 0.2vw solid black;
    padding-bottom: -1vw;
    padding-top: 1vw;
    border-radius: 1vw;
    height: fit-content;
    padding-right: 0vw;
    text-align: center;
    width: 80%;
    margin: auto;
}

.contact-text {
    font-size: 0.9vw;
    font-family: "Courier Prime";
}

.hr_hidden_contact{
    display: none;
}

form{
  font-size: 1vw;
  margin: 1vw;
  height: auto;
}

input{
    font-size: 1vw;
    border-radius: 20px;
    max-height: 20vw;
    max-width: 20vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    text-align: center;
}

textarea{
    font-size: 0.75vw;
    border-radius: 5px;
    width: 30vw;
    height: 5vw;
    max-width: 30vw; 
    max-height: 7vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.5vw;
}

.submit-contact{
    background-color: rgba(122, 35, 35, 1);
    padding: 0.5vw;
    border-radius: 0.5vw;
    font-family: "Courier Prime";
    font-size: 0.75vw;
    width: 10vw;
    color: white;
}

/* About Me Styling */

.aboutme-content{
    display: grid;
    grid-template-columns: 35vw 50vw;
    grid-template-rows: auto;
    padding-left: 5vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    margin: auto;
}

.aboutme-biopic{
    width: 28vw;
    height: 40vw;
    padding: auto;
    margin: auto;
    border: 5px solid black;
}

.aboutme-bio-text{
    text-align: center;
    font-family: "ABeeZee";
    line-height: 2vw;
    font-size: 1.3vw;
    padding: auto;
    margin: auto;
}

.signature{
    font-family: "Dancing Script";
    font-size: 3vw;
    text-align: center;
}

/* Headshots & Resume Page */

.headshot-resume-content{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
    padding: auto;
    margin: auto;
    width: 100%;
    text-align: center;
}

.headshot-resume-content > div:first-child{
    text-align: center;
    align-content: center;
}


.headshot-resume-content > div:last-child{
    margin-top: 8vw;
}

.headshots-divider {
    border-top: 8px solid rgba(122, 35, 35, 1);
    border-radius: 5px;
    margin: auto;
    width: 50vw;
}

.resume{
    width: 30vw;
    height:40vw;
    padding: auto;
    margin: 2vw;
    border: 2px solid black;
}

.resume-container{
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto auto;
    padding-right: 5vw;
}

.resume-container > div:last-child{
    padding-bottom: 4vw;
}

.headshots-container{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-auto-rows: auto;
}

.headshots-container > div> img.headshots-download-images{
    border-radius: 2vw;
    filter: drop-shadow(1px 1px 1px black);
}

.headshots-download-images{
    display: grid;
    flex-direction: row;
    width: 15vw;
    height: 20vw;
    text-align: center;
    align-content: center;
    justify-content: center;
    margin: auto;
    padding: 1vw;
}

/* Style buttons */
.btn {
  background-color: Orange;
  border: 1px solid brown;
  color: white;
  padding: auto;
  margin: 1vw;
  cursor: pointer;
  font-size: 1vw;
  text-align: center;
  border-radius: 1vw;
  filter: drop-shadow(1px 1px 1px black);
  font-family: "ABeeZee";
  width: 10vw;
  height: 2vw;
}

.btn:disabled{
  background-color: gray;
  border: 1px solid brown;
  color: white;
  padding: auto;
  margin: 1vw;
  cursor: pointer;
  font-size: 1vw;
  text-align: center;
  border-radius: 1vw;
  filter: drop-shadow(1px 1px 1px black);
  font-family: "ABeeZee";
  width: 10vw;
  height: 2vw;
}

.headshot-button{
    margin: auto;
    padding: auto;
    color: #DF8A02;
}

.resume-button{
    margin: auto;
    padding-right: auto;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: graytext;
}

/* Contact Me Page */
.contactme-content{
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-rows: auto;
    padding-top: 2vw;
    padding-right: 4vw;
    margin-bottom: 2vw;
}

.upcomingProjects-container{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
}


.upcomingProjects-text{
    font-family: "Diplomata";
    text-align: center;
    font-size: 2.5vw;
}

.upcomingProject-images{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    padding-top: 1vw;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

.upcomingProject-images > img{
    width: 12vw;
    height: 20vw;
    border: 1px solid black;
    padding: 0vw;
    margin: 1vw;
}

/* Gallery Styling */

.gallery-content {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    width: 100vw;
    height: auto;
}

.carousel-text{
    font-family: "ABeeZee";
    font-size: 1.5vw;
}

.gallery {
  background: none;
  width: 100vw;
}

.gallery-cell-header{
    font-family: "EB Garamond";
    font-size: 3vw;
}

.gallery-cell {
  width: 70%;
  margin-right: 10px;
  background: #ddd;
  counter-increment: gallery-cell;
  border-radius: 1vw;
  padding: 2vw;
  margin: 2vw;
  border: 0.150vw solid maroon;
  height: 25vw;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: none;
  line-height: 200px;
  font-size: 2vw;
  color: black;
}

.gallery-images{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    grid-template-rows: auto auto;
    padding: 0vw;
    margin: 5vw;
    margin-top: 0vw;
    border: 0.2vw solid black;
    cursor: pointer;
    
}

.gallery-images > div > img{
    width: 100%;
    height: 100%;
    margin: 0vw;
    padding: 0vw;
    object-fit: cover;
    cursor: pointer;
}


/* Mobile Sizing */

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
    
    
 .pageTitle {
    font-size: 12vw;
    font-family: "EB Garamond";
    text-align: center;
    color: rgba(255, 255, 255, 1);
    position: relative;
    margin-top: 1%;
    filter: drop-shadow(1px 1px 1px black);
    display: block;
    width: auto;
}
    /* Home Screen */
.home-content {
    float: left;
    display:flex;
    flex-direction: column;
    padding: auto;
    margin: auto;
    grid-template-columns: 30vw 10vw 50vw;
    grid-template-rows: auto;
    text-align: center;
    height: auto;
    padding-bottom: 40vw;
    width: auto;
    align-items: center;
    justify-content: center;
}

.home-image-strip{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    text-align: center;
    align-items: center;
    align-content: center;
    margin-bottom: -5vw;
    padding-top: 2vw;
    border: none;
}

.home-image-strip-divider{
    width: 40vw;
    margin: auto;
    border-top: 1px solid rgba(122, 35, 35, 1);
    display: block;
}

.home-strip-images{
    width: 20vw;
    height: 30vw;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    border: none;
    filter: drop-shadow(1px 1px 1px black);
    
}

.headshot{
    width: 70vw;
    height: 90vw;
    border: 1px solid black;
    border-radius: 20px;
    margin: auto;
    padding: auto;
    }
    
.bio-text {
    text-align: center;
    font-size: 4vw;
    align-content: center;
    font-family: "Diplomata";
    padding-top: 2vw;
    margin: auto;
}

.home-contact {
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    margin: auto;
}

.home-contact div:first-child{
    padding:auto;
}

.home-contact div:nth-child(1){
}


.home-contact div:last-child{
    border: 0.1vw solid black;
    padding: auto;
    border-radius: 1vw;
    height: fit-content;
    text-align: center;
    width: 90vw;
    margin: auto;
    margin-top: 2vw;
}

.contact {
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    margin-bottom: 2vw;
}

.contact > div{
    background-color: rgba(122, 35, 35, 1);
}

.contact > div > h2{
    padding-top: 2vw;
}

button.submit-contact{
    background-color: rgba(255, 236, 228, 1);
    color: black;
    border-radius: 1vw;
}

.contact div:first-child{
    font-size: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}


.contact div:last-child{
    border: 0.2vw solid black;
    padding-bottom: -1vw;
    padding-top: 1vw;
    border-radius: 1vw;
    height: fit-content;
    padding-right: 0vw;
    text-align: center;
    width: 80%;
    margin: auto;
}

.contact-text {
    font-size: 2vw;
    font-family: "Courier Prime";
}

form{
  font-size: 2vw;
  margin: auto;
  height: auto;
}

input{
    font-size: 3vw;
    border-radius: 20px;
    max-height: 20vw;
    max-width: 90vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

textarea{
    font-size: 2vw;
    border-radius: 5px;
    width: 40vw;
    height: 10vw;
    max-width: 50vw; 
    max-height: 10vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.5vw;
}

.submit-contact{
    background-color: rgba(122, 35, 35, 1);
    padding: 0.5vw;
    border-radius: 0.5vw;
    font-family: "Courier Prime";
    font-size: 3vw;
    width: 10vw;
    color: white;
    padding: auto;
    margin-bottom: 2vw;
}
h2 {
    font-size: 5vw;
}

.hr_hidden_contact{
    width: 80vw;
    margin: auto;
    border-top: 1px solid black;
    display: block;
    margin-top: 1vw;
}

.fa {
  font-size: 10px;
  text-align: center;
  text-decoration: none;
  background-color: white;
  margin: 1%;
  display:flex;
  border-radius: 50%;
  padding: 1%;
  width: auto;
}

/* Style navigation box container*/
.navBox {
    padding-top: 2%;
    display: flex;
    width: auto;
    padding: auto;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: auto;
    
}

/* Add a style to the top navigation */
.topnav {
  background-color: rgba(255, 236, 228, 1);
  overflow: hidden;
  position: relative;
  border-radius: 30px;
  font-family: "Courier Prime";
  font-weight: bold;
  box-shadow: 0px 0px 5px 1px inset;
  width: fit-content;
  max-width: 100vw;
  height: auto;
  display:flex;
  justify-content: center;
  text-align: center;
  padding: 2vw;
  margin-left: -20vw;
  margin-right: -20vw;
  
}

.nav-divider{
    font-size: 1vw;
    padding-top: 0.5vw;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: auto;
  text-decoration: none;
  color: black;
  margin: auto;
  font-size: 2.2vw;
  display: flex;
  justify-content: center;
}

.nav-divider{
    font-size: 5vw;
    padding-top: auto;
    margin: auto;
    font-weight: normal;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  border-radius: 50px;
}

/* Add a color to the active/current link */
.topnav a.active { 
  background-color: rgba(122, 35, 35, .7);
  color: white;
  border-radius: 30px;
  text-shadow: 1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000;
}
 /* Social links */
 .socials {
     text-align: center;
     padding-bottom: 2vw;
     width: auto;
     filter: drop-shadow(1px 1px 1px black);
 }
 
 .socials a{
     font-size: 5vw;
 }
 
 .socials-footer {
     text-align: center;
     padding: 0.5%;
     width: 50vw;
     height: auto;
     font-size: 2vw;
     margin: auto;
     margin-left: 25vw;
     display: flex;
     justify-content: center;
     filter: drop-shadow(1px 1px 1px black);
 }

 .socials-footer a{
     font-size: 4vw;
 }
 
/* Style all font icons */
 .fa {
    font-size: 5vw; /* Increase icon size for mobile */
    width: 10vw;   /* Increase width for mobile */
    height: 10vw;  /* Increase height for mobile */
  }


/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

.button-links{
    background-color: rgba(122, 35, 35, 1);
    border-radius: 1vw;
    font-family: "Courier Prime";
    font-size: 4vw;
    color: white;
    height: auto;
    width: auto;
    padding: 1vw;
    text-align: center;
    margin: 1vw;
}

.news {
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    background: rgba(122, 35, 35, 1);
    justify-content: center;
}

.news > a > img {
    border-style: solid solid;
    border-color: black;
    padding: 0vw;
    margin: 1vw;
    width: 40vw;
    height: 65vw;
}

.footer {
  position: fixed;
  background-color: red;
  color: white;
  background-color: rgba(122, 35, 35, 1);
  min-height: 1vh;
  margin-top: 5vw;
  font-size: 5vw;
  width: auto;
  display:block;
  bottom:0;
}

.footer p{
    font-family: "Courier Prime";
    text-align: center;
    padding-top: 2%;
    padding-bottom: 2vw;
    font-size: 2vw;
}

header {
    background-color: rgba(122, 35, 35, 1);
    width: 100vw;
}

.aboutme-content{
    float: left;
    display:flex;
    flex-direction: column;
    padding: auto;
    margin: auto;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    text-align: center;
    height: auto;
    padding-bottom: 35vw;
    width: auto;
    align-items: center;
    justify-content: center;
    padding-left: 10%;
}

.aboutme-biopic{
    width: 60vw;
    height: 80vw;
    padding: auto;
    margin: auto;
    border: 2px solid black;
    text-align: center;
}

.aboutme-bio-text{
    text-align: center;
    padding-top: 3vw;
    font-family: "ABeeZee";
    line-height: 4vw;
    font-size: 3.5vw;
    width: 80vw;
}

.signature{
    font-family: "Dancing Script";
    font-size: 5vw;
    text-align: center;
}

/*Resume & Headshot Sizing*/

.headshot-resume-content{
    display: flex;
    float: left;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40vw;
    justify-items: center;
    align-content: center;
    margin-top: 8vw;
}

.headshot-resume-content > div:first-child{
    text-align: center;
    align-content: center;
}


.headshot-resume-content > div:last-child{
    margin-top: 2vw;
}

.headshots-divider {
    border-top: 8px solid rgba(122, 35, 35, 1);
    border-radius: 5px;
    margin: auto;
    width: 90vw;
}

.resume{
    width: 70vw;
    height: 90vw;
    padding: auto;
    margin: auto;
}

.resume-container{
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto auto;
    justify-items: center;
    padding: 1vw;
    align-content: center;
}

.resume-container > div:last-child{
    padding-bottom: auto;
}

.headshots-container{
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto auto auto;
}

.headshots-container > div> img.headshots-download-images{
    border-radius: 4vw;
    filter: drop-shadow(1px 1px 1px 1px black);
}

.headshots-download-images{
    display: grid;
    flex-direction: row;
    width: 45vw;
    height: 60vw;
    text-align: center;
    align-content: center;
    justify-content: center;
    margin: auto;
    padding: 1vw;
}

/* Style buttons */
.btn {
  background-color: Orange;
  border: 1px solid brown;
  color: white;
  padding: auto;
  margin: 1vw;
  cursor: pointer;
  font-size: 4vw;
  text-align: center;
  border-radius: 1vw;
  filter: drop-shadow(1px 1px 1px black);
  font-family: "ABeeZee";
  width: 40vw;
  height: 10vw;
  margin-bottom: 10vw;
}

.headshot-button{
    margin: auto;
    padding: auto;
    color: #DF8A02;
}

.resume-button{
    margin: auto;
    padding: auto;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: graytext;
}

/* Contact Me Page */
.contactme-content{
    display: flex;
    float: left;
    flex-direction: column;
    margin-bottom: 30vw;
    max-width: 100vw;
    padding: 1vw;
    margin-top: 6vw;
}

.upcomingProjects-container{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}

.upcomingProjects-text{
    font-family: "Diplomata";
    text-align: center;
    font-size: 7vw;
}

.upcomingProject-images{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    padding: auto;
    margin: auto;
    width: fit-content;
    height: fit-content;
    padding-top: 4vw;
    padding-bottom: 2vw;
}

.upcomingProject-images button{
    width: 30vw;
    font-size: 3vw;
    margin-bottom: -1.5vw;
}

.upcomingProject-images > img{
    width: 30vw;
    height: 50vw;
    border: 1px solid black;
    padding: 0vw;
    margin: 1vw;
}

.btn:disabled{
  background-color: gray;
  border: 1px solid brown;
  color: white;
  padding: auto;
  margin: 1vw;
  cursor: pointer;
  font-size: 3vw;
  text-align: center;
  border-radius: 1vw;
  filter: drop-shadow(1px 1px 1px black);
  font-family: "ABeeZee";
  width: 30vw;
  height: 10vw;
}

/* Gallery */

.gallery-content {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    width: 100%;
    height: auto;
    margin-bottom: 45vw;
}

.carousel-text{
    font-family: "ABeeZee";
    font-size: 3vw;
    margin: 0.75vw;
}

.gallery {
  background: none;
  width: 100vw;
}

.gallery-cell-header{
    font-family: "EB Garamond";
    font-size: 10vw;
}

.gallery-cell {
  width: 70%;
  margin-right: 10px;
  background: #ddd;
  counter-increment: gallery-cell;
  border-radius: 1vw;
  padding: 2vw;
  margin: 2vw;
  margin-bottom: 4vw;
  border: 0.150vw solid maroon;
  height: 90vw;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: none;
  line-height: 200px;
  font-size: 2vw;
  color: black;
}

.gallery-images{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto auto auto auto auto auto;
    padding: 0vw;
    margin: 2vw;
    margin-top: 4vw;
    border: 0.2vw solid black;
    width: auto;
}

.gallery-images > div > img{
    width: 100%;
    height: 100%;
    margin: 0vw;
    padding: 0vw;
    object-fit: cover;
}

}