body {
  background-color:#372554;
  font-family:monospace;
}

* {
  box-sizing: border-box;
}

footer{
  color:white;
  font-family: 'Jaldi', sans-serif;
  font-size: 100%;
  text-align: center;
}

body.gallery{
animation-name: backgroundtransition;
animation-duration: 0.7s;
animation-fill-mode: forwards;
}

html {
  scroll-behavior: smooth;
}

@keyframes backgroundtransition {
  from {background-color: #372554;}
  to {background-color: #000000;}
}

#featuredprojects {
  scroll-margin-top: 50px; /* adjust this to your desired offset */
}

h1,h2,p,ul {
  color:white;
  /* font-family: 'Jaldi', sans-serif; --> */
  /* font-family: 'Noto Serif', serif; */
  font-family: 'Fira Sans', sans-serif;
  font-size: 400%;
  font-weight: 400; /* Normal */
}

p.project,ul.project{
  font-size: 100%;
}

.fira-sans-thin {
  font-family: "Fira Sans", sans-serif;
  font-weight: 100;
  font-style: normal;
}

h1.gallery{
  animation-name: gallerytransition;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes gallerytransition {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.button {
  background-color: #52528C; /* Purple Navy */
  border: none;
  color: white;

  padding: 10% 33.333%;
  padding: 30px 64px;

  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 32px;
  font-family: monospace;
  margin: 100px 2px;
  border-radius: 10px;
  cursor: pointer;
  transition-duration: 0.4s;

  max-width: 100%;
}
.button#projectbutton {
  padding: 10% 20%;
  font-size: 120%;
  max-width: 100%;
}

.button:hover {
  background-color: #231123;
  color: white;
}

.topnav {
  overflow: hidden;
  background-color: #372554;
  position: static;
  top: 0;

}

.topnavgallery {
  animation-name: backgroundtransition;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;

}

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 27px;
  font-family:monospace;
  transition-duration: 0.4s;
}

.topnav a:hover {
  background-color: #231123;
  color: white;
}

.topnav a.name {
  font-size: 37px;
  padding: 14px 20px;

}

.topnav a.name:hover {
  background-color: #372554;
  color: white;
}

.topnav a.active {
  background-color: #7C9EB2;
  color: white;
}

.treeimg {
  margin:auto;
  width:792px;
  height:999px;
  position: relative;
  top: -600px;
  left: 950px;
  border: 3px solid #FFF;
}

span.container{
  max-width: 100%;
  height:auto;
  float: right;
  margin-left: -10%;
  position: relative;
  top: -200px;
  margin-bottom: -10%;


}

div.gallery {
  border: 3px solid #FFF;
  border-radius: 5px;
  width: 85%;
  opacity: 0;
  transition-duration: 0.4s;
  animation-name: gallerytransition;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-delay: 1.0s;
 }


div.gallery:hover {
   border: 3px solid #7C9EB2;
 }

div.description{
   padding: 15px;
   text-align: center;
   color:white;
   font-family: 'Jaldi', sans-serif;
   font-size: 200%;
 }

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

.responsive{
  /*outline: thin dashed green;*/
  padding: 0% 1% 0% 6.5%;
  float: left;
  width: 33.33333%;
 }

.responsive2{
  padding: 0% 1% 5% 5.0%;
}

.responsive3{
  width: 100%;
  padding: 0% 0% 5% 11.5%;
}

img.treeimg2{
  max-width:82.5%;
  height: auto;
  /*float:right;*/
  margin: 0% 0% 10% 15%;
}

/*The following code for the animated arrow is not mine. Credit to Joshua McDonald*/
.arrow,
.arrow:before{
  position: absolute;
  left: 50%;
  clear:both;
}

.arrow {
  width: 80px;
  height: 80px;
  top: 50%;
  margin: -20px 0 0 -20px;
  -webkit-transform: rotate(45deg);
  border-left: none;
  border-top: none;
  border-right: 2px #fff solid;
  border-bottom: 2px #fff solid;
}

.arrow:before{
  content: '';
  width: 40px;
  height: 40px;
  top: 50%;
  margin: -10px 0 0 -10px;
  border-left: none;
  border-top: none;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: arrow;
}

@keyframes arrow {
  0% {opacity: 1;}
  100% {opacity: 0;}
  {transform: translate(-10px, -10px);}
}
/*end of code created by someone else*/

/*From w3 schools*/
#albumcontainer {

  overflow:hidden;
  height:auto;
  margin: 0% 3% 0% 3%;
  /*border: 1px solid #FFF;*/
}


@media only screen and (max-width: 1892px) {
    span.container{
      max-width:45%;
      height: auto;
    }
}
@media only screen and (max-width: 1350px) {
  span.container{
    display: none;
    }
  .arrow:before{
    display: none;
    }
  .arrow {
    display: none;
    }
}


/*needs to be in chronological order*/
@media only screen and (max-width: 1900px) {
}

@media only screen and (max-width: 1919px) {
}

.galleryspaces{
  padding: 5% 0% 5% 0%
}

/* chatgpt */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #575757;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}