@font-face {
  font-family: "pixel";
  src: url("fonts/pixel.otf"),
    url("fonts/pixel.ttf")
      format("opentype");
}

@font-face {
  font-family: "stolzl";
  src: url("fonts/stolzl.otf"),
    url("fonts/stolzl.otf")
      format("opentype");
}

@font-face {
  font-family: "regular";
  src: url("fonts/regular.otf"),
    url("fonts/regular.otf")
      format("opentype");
}


* {cursor: url(https://cur.cursors-4u.net/symbols/sym-6/sym549.ani), url(https://cur.cursors-4u.net/symbols/sym-6/sym549.png), auto !important;}

body {
  margin: 0;
  background-color: #EFF0ED;



}

.topnav {
  overflow: hidden;
  background-color: #BD969E;
  border-bottom: 1px solid #E1D0DA;
  font-family: "pixel";
  display: flex;

}

.topnav a {
  float: left;
  color: #EFF0ED;
  text-align: center;
  padding: 9px 30px;
  text-decoration: none;
  font-size: 17px;
  border-right: 1px solid #E1D0DA;

}

.topnav a:hover {
  background-color: #E9BCAC;
  color: #EFF0ED;
}

.topnav a.active {
  background-color: #E9BCAC;
  color: EFF0ED;

}



.right-nav a {
  color: #BD969E;
  text-align: center;
  background-color: #EFF0ED;
  border-radius: 50px;
  font-size: 22px;
  padding: 1px 0;
  margin-top: 5px;
  margin-right: 100px;
  padding-left: 10%;
  padding-right: 35%;
}

.right-nav a:hover{

  background-color: #EFF0ED;
  color: #BD969E;
}


.left-nav {
  flex: 1 1 200px;;
}


.control-buttons {
  word-spacing: 10px;
  padding: 10px;
  float: left;
  width: 100px;

}

.control {
  height: 15px;
  width: 15px;
  background-color: #EFF0ED;
  border-radius: 50%;
  border: none;
  display: inline-block;

}


/* thumbnail */

.responsive {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 0% 0%;

}


#adjust{
  object-position: 20% 20%;
}

#adjust_2{
  object-position: 20% 20%;
}

#adjust_3{
  object-position: 55% 55%;
}

/*overlay image*/

.shadow {
  position: relative;

}

.shadow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 


}

.shadow:hover::before{
  background-color: transparent;


}

.shadow .title:hover{
  color: #E9BCAC;
  -webkit-text-stroke: 1px #BD969E;
}


.title {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-family: "stolzl";
  color: #E1D0DA;
  font-size: 60px;
  text-decoration: none;
}


/*scrollbar*/

/* width */
::-webkit-scrollbar {
  width: 25px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-left: 1px solid #BD969E;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #E1D0DA;
  border-left: 1px solid #BD969E;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #E9BCAC; 
}

/*footer*/


.footer {
  background-color: #BD969E;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0px;


}

.footer a {
  float: right;
  color: #EFF0ED;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: "pixel";
  border-right: 1px solid #E1D0DA;


}

.footer a:hover {
  background: #E9BCAC;
  color: white;
}

.footer-left {
  display: flex;
  position: fixed;

}

.logo{
  vertical-align: middle; 
  margin-right: 10px; 
}

.no-link a:hover {
  background: transparent;
}


.dropdown {
  position: relative;
  display: inline-block;

}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  z-index: 1;
  bottom: 100%;



}

.dropdown-content a {
  color: black;
  padding: 9px 16px;
  text-decoration: none;
  display: block;
  background-color: #E9DDE6;
  min-width: 160px;

}



.dropdown:hover .dropdown-content {
  display: block;

}


/* works page */

.works{
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 0% 0%;

}

h1{
  font-family: "stolzl";
  color: #BD969E;
  font-size: 30px;
}

h2{
  font-family: "stolzl";
  color: #BD969E;
  flex: 1;
  padding: 2%;

}

p{
  font-family: "regular";
  color: #BD969E;
  line-height: 2;


}

p a{
  text-decoration: none;
  color: #BD969E;
  font-family: "stolzl";
}

p a:hover{
  color: #E9BCAC;
}

.content {
  display: flex;
}

#left-content {
  flex: 1;
  padding: 2%;
}

#right-content {
  flex: 0.5;
  padding: 2%;
  text-align: right;
}

#right-content p{
  line-height: 1;
}

hr{
  border-top: 1px dotted #BD969E;

}



.image-grid {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  flex: 1 36rem;
  padding: 2em;
}

.grid-florashing {
  flex: 1 18rem;
  padding: 2em;
}


/* Media query for smaller screens */
@media (max-width: 600px) {
    .content  {
        display: flex;
        flex-direction: column;
    }
}


#butterfly-height {
height: 99%;
}

#credit {
  text-decoration: none;
}

.video-center{
    display: flex;
    justify-content: center;
}

iframe {
    aspect-ratio: 16 / 9;
    width: 80% !important;
}

/*portfolio navigation*/

#left-image {
  flex: 1;

}

#right-image {
  flex: 1;

}

#adjust_4{
  object-position: 65% 65%;
}

.zoom {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: 0% 0%;

}

#adjust_5{
object-position: 30% 30%;
}

#adjust_6{
object-position: 20% 20%;
}

#adjust_7{
  object-position: 65% 65%;
}

.shadow .text:hover{
  color: #E9BCAC;
  -webkit-text-stroke: 1px #BD969E;
}


.text{
  position: absolute;
  bottom: 30px;
  left: 16px;
  font-family: "stolzl";
  color: #E1D0DA;
  font-size: 30px;
  text-decoration: none;
}

/*orchid tea room palette*/

.palette{
display: flex;
float: right;

}

.ot-palette-1 {
  height: 30px;
  width: 30px;
  background-color: #CABAE2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.ot-palette-2 {
  height: 30px;
  width: 30px;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.ot-palette-3 {
  height: 30px;
  width: 30px;
  background-color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.ot-palette-4 {
  height: 30px;
  width: 30px;
  background-color: #EAB4B0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.ot-palette-5 {
  height: 30px;
  width: 30px;
  background-color: #F6EFF7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.ot-palette-6 {
  height: 30px;
  width: 30px;
  background-color: #D2E1E4;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}



/*butterfly shower palette*/

.bs-palette-1 {
  height: 30px;
  width: 30px;
  background-color: #A0942A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.bs-palette-2 {
  height: 30px;
  width: 30px;
  background-color: #FFD054;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.bs-palette-3 {
  height: 30px;
  width: 30px;
  background-color: #C3887A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.bs-palette-4 {
  height: 30px;
  width: 30px;
  background-color: #54979D;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.bs-palette-5 {
  height: 30px;
  width: 30px;
  background-color: #A2BCF5;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.bs-palette-6 {
  height: 30px;
  width: 30px;
  background-color: #ACACB4;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.bs-palette-7 {
  height: 30px;
  width: 30px;
  background-color: #F1EDE5;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.bs-palette-8 {
  height: 30px;
  width: 30px;
  background-color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}


/*florashing life palette*/

.fl-palette-1 {
  height: 30px;
  width: 30px;
  background-color: #DF9D9C;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.fl-palette-2 {
  height: 30px;
  width: 30px;
  background-color: #F3DBBD;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.fl-palette-3 {
  height: 30px;
  width: 30px;
  background-color: #A7BEB0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.fl-palette-4 {
  height: 30px;
  width: 30px;
  background-color: #E4E3DE;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.fl-palette-5 {
  height: 30px;
  width: 30px;
  background-color: #59908B;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.fl-palette-6 {
  height: 30px;
  width: 30px;
  background-color: #266D67;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}


/*not enough love palette*/

.nel-palette-1 {
  height: 30px;
  width: 30px;
  background-color: #C88D91;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.nel-palette-2 {
  height: 30px;
  width: 30px;
  background-color: #C25C66;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.nel-palette-3 {
  height: 30px;
  width: 30px;
  background-color: #742733;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.nel-palette-4 {
  height: 30px;
  width: 30px;
  background-color: #979797;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.nel-palette-5 {
  height: 30px;
  width: 30px;
  background-color: #D3D3D3;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.nel-palette-6 {
  height: 30px;
  width: 30px;
  background-color: #CFA2AF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}

/*monthly palette calendar palette*/

.mpc-palette-1 {
  height: 30px;
  width: 30px;
  background-color: #F0EEE8;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.mpc-palette-2 {
  height: 30px;
  width: 30px;
  background-color: #C1887A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.mpc-palette-3 {
  height: 30px;
  width: 30px;
  background-color: #BF570B;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}
.mpc-palette-4 {
  height: 30px;
  width: 30px;
  background-color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 0.3em;
}

/*about*/

.about{
  font-size: 35px;
  padding-left: 3%;
  margin-bottom: 0;
}

.line {
  border-top: 1px solid #BD969E;
  margin-bottom: 0px;
  margin-top: 0px;
  border-bottom-width: 0px;


}

#about-left-content {
  flex: 1;
  padding: 2%;
}

#about-right-content {
  flex: 1;
  padding: 2%;
  display: inline-block;
  height: 570px;
  overflow: hidden;
  overflow-y: scroll;
  direction: rtl;
}

.about-para{
  font-size: 25px;
  text-align: left;
  direction: ltr;
  height: 470px;
}


.profile img{
  width: 70%;
  height: auto;
  object-fit: cover;
  object-position: 0% 0%;
  display: block;
  margin: auto;

}


.download {
text-align: center;
font-family: "pixel";
font-size: 23px;
text-decoration: underline;
}

.download:hover {
color: #E9BCAC;
}


/*scroll horizontally*/

.mynews {
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  white-space: nowrap;
  animation: mynews 20s linear infinite;
  margin-bottom: 0px;
  margin-top: 0px;
  display: flex;


}

.mynews p {
  display: flex;
  color: #000000;
  background-color: #E1D0DA;
  font-family: "pixel";
  margin-top: 0px;
  margin-bottom: 0px




}

@keyframes mynews {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}


.invisible {
  color: transparent;
}


/* page transition */

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.5s, visibility 1.5s;
  background-image:  linear-gradient(#BD969E 1px, transparent 1px), 
  linear-gradient(to right, #BD969E 1px, #E1D0DA 1px);
  background-size: 50px 50px;
  z-index: 10;



}

.loader--hidden {
  opacity: 1;
  visibility: hidden;
}

:root {
  --color-primary: #CEB1B7;
  --color-secondary: #BA919A;
  --color-tertiary: #A6727D;
  --color-quaternary: #8D5963;
  --color-quinary: #6E454D;
}

.text-shadows {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
  9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: "pixel";
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(2rem + 5vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  animation: shadows 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    transform: translate(-3px, -3px);
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    transform: translate(-6px, -6px);
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  30% {
    transform: translate(-9px, -9px);
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    transform: translate(-12px, -12px);
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  50% {
    transform: translate(-12px, -12px);
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}