*{
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color: black;
  line-height: 1.5;
}

body{
  background-color: #F4F3F2;
}
#logo{
  margin: 5px;
}
/* Navigation */
header{
  display: flex;
  width: 100%;
  height: 20%;
}
a, .back-button {
  opacity: 50%;
}
a:hover, .back-button:hover{
  opacity: 100%;
  cursor: pointer;
}
a:active, .back-button:active{
  opacity: 100%;
  cursor: pointer;
}
nav {
  z-index: 2000;
  background: rgba(255, 255, 255, 1);
  width: 100%;
  align-items: center;
  justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.025);
}
.nav {
  width: 90%;
    border-bottom: 1px solid rgb(216, 216, 216);
}

.nav1 {
  width: 80%;
  height: 40px;
}
.nav1, .nav {
   display: flex;
    top:3%;
    font-size: 17px;
    text-decoration: none;
    align-items: center;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
  }

.nav-text {
  text-decoration: none;
  opacity: 50%;
  padding: 6px;
}
.nav-text:hover {
  border-bottom: 2.5px solid black;
}
.nav-text-active{
  font-weight: bold;
  text-decoration: none;
  opacity: 100%;
  border-bottom: 2.5px solid black;
  padding: 6px;
}

.back-button{
  width: 60px;
  height: 60px;
  background: #FFFFFF;
  float: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  position: fixed;
  left: 20px;
  bottom: 20px;
  box-shadow: 0 0px 4px 0 rgba(0,0,0,.5);
}


/* Gallery */
.container{
  max-width: 1224px;
  width:90%;
  margin: auto;
  padding: 40px 0;
  animation: 0.6s ease 0s 1 slideInFromLeft;
}
@keyframes slideInFromLeft {
  0% {
      opacity: 85%;
      height:88%;
      width: 88%;
  }
  100% {
      opacity: 100%;
      height: 90%;
      width: 90%;
  }
}

.gallery{
  display: flex;
  gap: 20px;
}

.column{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
  flex-wrap: wrap;
}

.photo img, .photo1 img, .profile{
  width: 100%;
  object-fit: contain;
}
.photo img{
  border-radius: 10px;
}
.photo1 img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  animation: 0.6s ease 0s 1 slideInFromLeft2;
}
/* .profile img {
  width: 400px;
  height: 400px;
  padding: 40px;
  object-fit: cover;
  border-radius: 50%;
} */

@keyframes slideInFromLeft2 {
  0% {
      opacity: 85%;
      width: 97%;
      height:97%;
  }
  100% {
      opacity: 100%;
      width: 100%;
      height:100%;
  }
}

:fullscreen, ::backdrop {
  background-color: rgba(0,0,0,0.66);
}
footer{
  padding: 3%;
  font-size: 12px;
  text-align: center;
  color: #8EA5EB;
}

.image{
  opacity: 100%;
}
.image:hover{
  opacity: 50%;
  cursor: pointer;
}
figcaption{
  margin-top: -15px;
  margin-bottom: 5px;
}
/* Project */
.project{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 80%;
}

.project-image{
  width: 100%;
  gap: 0px;
  margin: 0px;
  padding: 0px;
  display: block; 
  animation: 0.6s ease 0s 1 slideInFromLeft3;
}

@keyframes slideInFromLeft3 {
  0% {
      opacity: 85%;
      width: 95%;
  }
  100% {
      opacity: 100%;
      width: 100%;
  }
}

.project-video{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* About */
.about-text{
  text-align: left;
}
.social {
  display: flex;
}

@media(max-width:768px){
  .gallery{
    flex-direction: column;
  }
  .nav1, .nav {
    display: inline-block;
     top:3%;
     font-size: 17px;
     text-decoration: none;
     align-items: center;
     justify-content: space-around;
     margin-left: auto;
     margin-right: auto;
   }
   .nav-text-active, .nav-text{
    padding: 0;
  }
   .video{
    width: 100vw;
   }
}