/*marquee styles */
/*reference source - Ryan Mulligan, CSS marquee examples codepen*/
.marquee {
    --gap: 1rem;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
}

.marquee__content {
    animation: scroll 50s linear infinite;
}

.marquee__content>* {
    flex: 0 0 auto;
    color: black;
    background: none;
    margin: 2px;
    padding: 1rem 2rem;
    border-radius: 0.25rem;
    text-align: center;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

/* pause on hover */

@media (prefers-reduced-motion: reduce) {
    .marquee__content {
        animation-play-state: paused !important;
    }
}

.marquee--hover-pause:hover .marquee__content {
    animation-play-state: paused;
}

/* general css */

*,
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-image: url('../Assets/Images/dried tulips.JPG');
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

@font-face {
    font-family: Narly OT;
    src: url(Assets/Fonts/Narly\ Regular/Narly_Regular.otf);
}

.marquee-container ul {
    list-style-type: none;
    font-family: Narly OT;
    font-size: 76px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #EF4041;
}

html {

    /* background-color: #AABBBC; */
    background-color: #e2dfd6;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}



h1 {
    font-family: "nitti-typewriter-cameo", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    /* -webkit-text-fill-color: #EF4041; */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #EF4041;
    letter-spacing: 5px;
    color: transparent;
}

h1>a {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #EF4041;
    transition: .6s ease-in-out;
    text-decoration: none;
}

h1>a:hover {
    /* -webkit-text-fill-color: #82B8BF; */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #82B8BF;

}


h2 {
    font-family: "nitti-typewriter-open", sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    padding: 2rem;
    color: #EF4041;
}

h2>a {
    text-decoration: none;
    color: #EF4041;
    transition: .6s ease-in-out;
}

h2>a:hover {
    text-decoration: none;
    color: #82B8BF;
}

p{
    font-family: "nitti-typewriter-normal", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
}


/* excerpt text */

.excerpt>h2 {
    color: #82B8BF;
    font-size: 15px;
    padding: 0px 12px;
    position: absolute;
    bottom: 300px;
    width: 100%;
    text-align: left;
    font-family: "nitti-typewriter-cameo", sans-serif;


}


.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}


/* navigation bar */


.navigation-header {
    background-color: transparent;
    padding: 0 15px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}


nav {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    padding-left: 15px;
    padding-right: 15px;
}

/* nav-bar-top */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1.5rem;
  }
  .topnav button {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    cursor: pointer;
  }


  @media (width >= 40em) {
    .topnav button {
      display: none;
    }
  }
  .topnav__open[aria-expanded=true] + .topnav__menu {
    translate: 0;
  }
  @media (prefers-reduced-motion) {
    .topnav__open[aria-expanded=true] + .topnav__menu {
      opacity: 1;
    }
  }
  .topnav__close {
    display: block;
    margin-inline-start: auto;
    margin-block-end: 8rem;
    position: relative;
  }

  /* aligning logo to top left corner */
/* 
  .menu-ham-logo{
    po
    padding-right: 60vh;
  } */

  @media (width < 40em) {
    .topnav__menu {
      position: fixed;
      inset: 0;
      padding: 15px 15px;
      background-image: url('../Assets/Images/dried tulips.JPG');
      background-repeat: no-repeat;
      background-size: cover;
      translate: 100vw 0;
      transition: translate 0.5s ease-in-out;
      z-index: 5;
    }
  }
  @media (width < 40em) and (prefers-reduced-motion) {
    .topnav__menu {
      translate: 0;
      opacity: 0;
      transition: opacity 500ms ease-in-out;
    }

  }
  .topnav__links {
    display: flex;
    gap: 40px;
    align-items: center;
    margin: 0;
    padding: 0;
  }


  @media (width < 40em) {
    .topnav__links {
      flex-direction: column;
    }
  }
  .topnav__item {
    list-style-type: none;
   
  }/*# sourceMappingURL=style.css.map */

  .topnav__item>a{
    font-family: "nitti-typewriter-open", sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    padding: 0rem;
    color: #EF4041;
    text-decoration: none;
    transition: .6s ease-in-out;
  }

  .topnav__item>a:hover{
    text-decoration: none;
    color: #82B8BF;
  }

  .wrapper {
    width: min(100% - 3rem, 56.25rem);
    margin-inline: auto;
    background-color: transparent;
    padding: 0 15px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }


/* logo */

.logo-container>a {
    color: #82B8BF;
    text-decoration: none;
    font-weight: 700;
    font-size: 26px;
    display: flex;
}

.logo-container>a:hover {
    cursor: pointer;
}

.logo-container>a .hover-logo {
    position: absolute;
    opacity: 0;
    transition: .6s ease-in-out;
}

.logo-container>a:hover .hover-logo {
    opacity: 1;
}

/* nav items */

.navigation-items {
    display: flex;
    gap: 40px;
}

.navigation-items>a {
    color: #EF4041;
    text-decoration: none;
    font-family: "nitti-typewriter-open", sans-serif;
    font-weight: 500;
    font-size: 15px;
    transition: .6s ease-in-out;
}

.navigation-items>a:hover {
    color: #82B8BF;
    cursor: pointer;
}

/* dropdown menu */

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 18px;
    padding: 14px 16px;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: #EF4041;
    text-align: center;
}

/* navigation bar adapted for smaller screens */

.hamburger {
    display: none;
    font-size: 30px;
    font-weight: 50;
    color: #EF4041;
    cursor: pointer;
}

@media screen and (max-width: 768px) {

    .hamburger {
        display: flex;
        cursor: pointer;
    }

    .hamburger #closeHam {
        display: none;
    }

    .navigation-items {
        display: none;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 0;
        top: 58px;
        background-color: transparent;
        width: 100%;
        height: clac(100vh - 58px);
        padding-top: 60px;
        gap: 10vh;
    }

}

.main-img-container {
    display: flex;
    justify-content: center;
    width: 700px;
    height: 700px;
    max-width: 800px;
    z-index: 1;
    margin: auto;
    left: 50%;
    padding: 50px;
    filter: blur(25px) brightness(80%);

}

.main-media {
    width: 100%;
    height: 100%;
    position: relative;
}

.marquee-container {
    display: flex;
    justify-content: center;

    top: 50%;
    z-index: 1;

}


/* CONTACT PAGE STYLES */

.info-container {
    margin: auto;
    display: flex;
    position: relative;
    height: 90%;
    width: 550px;
    justify-content: center;
    overflow-y: hidden;

}

.info-container div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}

.content{
    text-align: center;
    max-width: 600px;
    width: 100%;
}

/* ABOUT PAGE STYLES */

.about-text{
    color: #82B8BF;
    text-align: center;
    margin: auto;
    display: flex;
    position: relative;
    justify-content: center;
    max-height: fit-content;
}

.about-text p{
    color: #82B8BF;
    text-align: left;
}





/* IMAGE GALLERY */

.gallery-parent-container {
    padding: 2rem 6%;
}

.gallery-parent-container .gallery-container {
    columns: 15rem 3;
    gap: 1.4rem;
}

.gallery-parent-container .gallery-container img {
    width: 100%;
    margin-bottom: 1rem;
}

.gallery-parent-container .gallery-container div {
    width: 100%;
    margin-bottom: 1rem;
}



/* SLIDESHOW STYLES */

.slideshow-container {
    max-width: 800px;
    max-height: fit-content;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    justify-content: center;
    display: block;
}

.slideshow-container img {
    filter: brightness(30%);
}




/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    /* color: #a51e14; */
    color: #EF4041;
    font-weight: thin;
    font-size: 15px;
    transition: 0.6s ease;
    border-radius: 0;
    user-select: none;
    font-family: "nitti-typewriter-open", sans-serif;
    text-decoration: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    color: #82B8BF;
}


/* Caption text */
.text {
    color: #EF4041;
    font-size: 15px;
    margin: auto;
    position: absolute;
    top: 50%;
    bottom: 50%;
    width: 100%;
    text-align: center;
    font-family: "nitti-typewriter-open", sans-serif;

}

/* work title */

.work-title {
    z-index: 2;
    padding: 8px 12px;
}


/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {

    .prev,
    .next,
    .text {
        font-size: 11px
    }
}

/* PARALLAX EFFECT */

.parallax-wrap {
    position: relative;
    width: 100%;
    height: 600px;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-wrap h2 {
    position: relative;
    text-align: left;
}

.parallax-wrap h2>a {
    position: relative;
    text-align: left;
    text-decoration: none;
    color: #EF4041;
    transition: .6s ease-in-out;
}

.parallax-wrap h2>a:hover {
    transition: .6s ease-in-out;
    position: relative;
    text-align: left;
    text-decoration: none;
    color: #82B8BF;
}

.parallax-wrap .overlay-img {
    position: relative;
    text-align: left;
    width: 600px;
    height: 600px;
}

.parallax-wrap span {
    position: absolute;
    height: fit-content;
    width: fit-content;
}

.parallax-wrap span .slides {
    top: 70%;
    left: 50%;
    z-index: 3;
}

.parallax-wrap span:nth-child(1) {
    top: 70%;
    left: 50%;
    z-index: 3;
}

.parallax-wrap span:nth-child(2) {
    top: 24%;
    left: 50%;
    z-index: 3;
}

.parallax-wrap span:nth-child(3) {
    top: 40%;
    left: 28%;
    z-index: 3;
}

.parallax-wrap span:nth-child(4) {
    top: 6%;
    left: 30%;
    z-index: 2;
}