@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/*Discover*/
html {
   --nav-background: #f5f2f2;
   --black-font: #5c5c5c;
   --radius: 0.4em;
   --header-height: 50px;
   --nav-height: 63px;
   --main-color: #230013;
   --featured-color: #2e4756;
   font-size: 62.5%;
}

body {
   --gap: 0.4em;
   --scroll-shadow: 18vh;
   margin: 0;
   color: var(--black-font);
   font-size: 1.4rem;
   background-color: var(--nav-background);
   font-family: 'Lora', serif;
}

header {
   position: relative;
   display: flex;
   height: var(--header-height);
   z-index: 2;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   background-color: var(--nav-background);
   box-shadow: 0 1px 9px rgba(35, 0, 19, 0.3);
}

header a {
   display: flex;
   align-items: center;
}

.search {
   height: 24px;
   margin: 2px 18px 0 0;
}

nav {
   display: flex;
   flex-direction: row;
   align-items: center;
   height: var(--nav-height);
   position: fixed;
   top: auto;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
   padding-left: 6%;
   padding-right: 6%;
   border-top: 1px solid #c3c3c3;
   background-color: var(--nav-background);
   box-sizing: border-box;
}

nav ul {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
   height: inherit;
   justify-content: space-evenly;
   margin: 0;
   padding: 0;
}

nav ul li {
   list-style: none;
}

nav ul li a {
   display: block;
}

nav a img {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   padding-bottom: 0.15rem;
   height: 18px;
}

nav a {
   font-size: 0.8em;
   color: var(--main-color);
   text-decoration: none;
}

.menu_ico {
   filter: opacity(60%);
}

.ico_sel {
   filter: none;
}

.search_bar {
   border: 1px solid #c3c3c3;
   border-radius: 1.2em;
   border-style: solid;
   min-width: 54vw;
   min-height: 2.1em;
   outline: none;
   background-image: url('images/search.png');
   background-size: 1.2em;
   background-repeat: no-repeat;
   background-position: 12px center;
   padding-left: 2.4em;
   color: #331324;
}

.search_bar::placeholder {
   color: rgba(51, 19, 36, 0.3);
}

.search_bar::-webkit-search-cancel-button {
   -webkit-appearance: none;
   background-image: url('images/remove.png');
   background-size: 1em;
   background-repeat: no-repeat;
   background-position: center center;
   height: 15px;
   width: 15px;
   filter: opacity(54%);
}

.searching {
   position: relative;
   z-index: 1;
   top: -51px;
   display: flex;
   height: 51px;
   align-items: center;
   justify-content: center;
   background-color: #f5f2f2;
   transition: top 0.2s ease-in;
}

.searching.active {
   top: 0;
}

.contentWrapper {
   position: relative;
   margin: 0 3vw calc(3vw + 3em);
   top: -51px;
   transition: top 0.2s ease-in;
}

.scrollShadow {
   position: sticky;
   top: 0;
   height: var(--scroll-shadow);
   background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 72%));
   pointer-events: none;
}

.imagesWrapper {
   margin-top: calc(var(--scroll-shadow) * -1);
}

.img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.catalogue {
   display: grid;
   grid-template: repeat(2, 30vw) 53vw 42vw 24vw 15vw / repeat(8, 1fr);
   gap: var(--gap);
}

.item {
   border-radius: var(--radius);
   background-size: cover;
   background-position: center;
   overflow: hidden;
}

.img.a {
   object-position: 0 -1em;
}

.item:nth-of-type(1) {
   grid-column-start: 1;
   grid-column-end: 9;
   grid-row-start: 1;
   grid-row-end: 3;
}

.item:nth-of-type(2) {
   grid-column-start: 1;
   grid-column-end: 5;
}

.item:nth-of-type(3) {
   grid-column-start: 5;
   grid-column-end: 9;
}

.item:nth-of-type(4) {
   grid-column-start: 1;
   grid-column-end: 3;
}

.item:nth-of-type(5) {
   grid-column-start: 3;
   grid-column-end: 7;
}

.item:nth-of-type(6) {
   grid-column-start: 7;
   grid-column-end: 9;
}

.item:nth-of-type(7) {
   grid-column-start: 1;
   grid-column-end: 9;
}

.sub-catalogue {
   display: grid;
   grid-template-columns: repeat(2, 1fr) 30% repeat(2, 1fr);
   height: 100%;
   gap: var(--gap);
}

.sub-item {
   border-radius: var(--radius);
   height: 100%;
   overflow: hidden;
}

.bioCard {
   display: block;
   margin: 1.8em 0;
   text-align: center;
   font-size: 2.7em;
   color: var(--main-color);
   font-family: 'Raleway', sans-serif;
}

.bioCard h1 {
   margin: 0.6em 12vw;
   width: auto;
   line-height: 0.9em;
   background-color: transparent;
}

button {
   font-family: 'Lora', serif;
}

.button {
   border: 1px solid;
   padding: 0.6em 0.9em;
   text-decoration: none;
   font-size: 0.6em;
   color: inherit;
   text-transform: uppercase;
   border-radius: var(--radius);
}

.lightbox {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   background-color: rgba(7, 0, 5, 96%);
   width: 100%;
   height: 100%;
}

.dark-close {
   display: flex;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
}

.close-lightbox {
   position: absolute;
   top: 1.5rem;
   left: 1.5rem;
   background-image: url('images/closegallery.png');
   background-size: cover;
   background-position: center;
   background-color: transparent;
   height: 2.3rem;
   width: 2.3rem;
   filter: opacity(30%);
}

.close-lightbox:active,
.nav-lightbox:active {
   filter: opacity(100%);
}

figure {
   position: relative;
   width: fit-content;
   height: fit-content;
   margin: auto;
}

figure img {
   position: relative;
   display: block;
   max-height: 78vh;
   max-width: 78vw;
   margin: auto;
}

.nav-lightbox {
   position: absolute;
   bottom: 0;
   height: 2.3rem;
   width: 2.3rem;
   filter: opacity(30%);
}

.nav-lightbox.previous {
   left: calc(50% - 3rem - 4vh);
   padding: 4vh 0 3vh 4vh;
}

.nav-lightbox.next {
   right: calc(50% - 3rem - 4vh);
   padding: 4vh 4vh 3vh 0;
}

/*Index*/

.contentWrapper.index {
   margin: 0;
   overflow: hidden;
}

.contentWrapper.index > h1 {
   letter-spacing: -0.03rem;
   text-align: center;
   margin: 1.8em 6vw 1.4em;
   color: var(--main-color);
   font-size: 3em;
   font-family: 'Raleway', sans-serif;
}

.contentWrapper.index > p {
   margin: 0 12vw 5em;
   text-align: center;
}

.featured-wrapper {
   height: 48vh;
   margin-bottom: 6em;
}

.featured-content {
   display: flex;
   height: 100%;
   margin: 0.6em 0;
   padding: 0 3vw;
   color: var(--featured-color);
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.featured-content h1 {
   margin: 0;
   font-size: 1.5em;
   text-transform: uppercase;
   word-wrap: wrap;
}

.featured-content h6 {
   margin: 0;
}

.featured-content p {
   text-align: center;
   padding-bottom: 0;
}

.featured {
   height: 100%;
   min-width: 60vw;
   background-size: cover;
   border-radius: var(--radius);
   box-shadow: inset 0 0 1px #000000, 0px 5px 7px #999999;
}

.featured.left {
   margin-left: -6%;
   float: left;
   background-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0),
         rgba(0, 0, 0, 0),
         rgba(0, 0, 0, 72%)
      ),
      url('images/umbrellas-1886.jpg');
}

.featured.right {
   margin-right: -6%;
   float: right;
   background-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0),
         rgba(0, 0, 0, 0),
         rgba(0, 0, 0, 72%)
      ),
      url('images/a-girl-1.jpg');
   background-position-y: 24%;
}

.contact {
   padding: 2.4em;
   background-color: #7283a6;
}

.contact-form {
   text-align: center;
}

.contact-form input {
   margin-top: 0.6em;
   display: inline-block;
   background-color: var(--nav-background);
   border: none;
   outline: none;
   border-bottom: 1px solid #c3c3c3;
   height: 1.8em;
}

.contact-form input::placeholder {
   font-size: 0.9em;
}

.contact-form button {
   display: inline-block;
   border: none;
   border-radius: var(--radius);
   margin-bottom: 4.8em;
   padding: 0 1.5em;
   font-size: 0.9em;
   height: 1.8em;
   color: var(--nav-background);
   background-color: var(--main-color);
}

.bio-content p {
   margin: 0.3em 0;
}

.bio-content em {
   display: block;
   color: #7a7a7a;
   font-size: 0.9em;
   text-align: right;
}

/* About */

.banner {
   position: relative;
   height: 60vw;
   overflow: hidden;
   border-bottom-left-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
}

.banner a {
   height: inherit;
}

.banner-bg {
   position: absolute;
   height: inherit;
   width: 100%;
   background-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0),
         rgba(0, 0, 0, 60%)
      ),
      url('images/two-sisters-on-terrace.jpg');
   background-size: cover;
   background-position-y: 66%;
   transform: scale(1);
}

.aside {
   padding: 2.4em;
}

.extend {
   height: 0;
   overflow: hidden;
}

.see-more-less {
   display: flex;
   float: right;
}

.see-more-less a {
   display: block;
   margin: auto 0;
   text-decoration: none;
   color: var(--main-color);
}

.see-more-less img {
   display: inline-block;
   padding-left: 0.3em;
   margin: 0;
   vertical-align: middle;
   height: 6px;
}

input {
   font-family: 'Lora', serif;
}

@media (orientation: landscape) {
   .featured-wrapper {
      height: 160vh;
   }
}

@media screen and (min-width: 768px) {
   body {
      font-size: 1.6rem;
   }

   .catalogue {
      display: grid;
      grid-template: repeat(2, 24vw) 36vw 24vw 15vw / repeat(8, 1fr);
      gap: var(--gap);
   }

   .item:nth-of-type(1) {
      grid-column-start: 1;
      grid-column-end: 6;
   }

   .item:nth-of-type(2) {
      grid-column-start: 6;
      grid-column-end: 9;
      grid-row-start: 1;
      grid-row-end: 2;
   }

   .item:nth-of-type(3) {
      grid-column-start: 6;
      grid-column-end: 9;
   }

   .close-lightbox {
      top: 2.4em;
      left: 2.4em;
      width: 1.8en;
      height: 1.8en;
   }

   /* Index */

   .contentWrapper.index {
      margin-bottom: 1vw;
   }

   .featured-wrapper {
      height: 154vh;
      margin-bottom: 7.2em;
   }
}
/** 
 * Could not write on search bar input because of z-index was <1.
 * All icons were designed by me. All rights deserved. 
 */