@import url('https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&display=swap');

:root {
   --primary-color-white: white;
   --primary-color-black: black;
   --dark-gray: hsl(0, 0%, 55%);
   --very-dark: hsl(0, 0%, 41%);
}

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

body {
   font-family: 'Alata', sans-serif;   font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Josefin Sans', sans-serif;
   text-transform: uppercase;
   font-weight: 500;
}

header, section {
   animation: close-mobile-menu 1.2s ease-in;
}

@keyframes close-mobile-menu {
   0% {
      opacity: 0.7;
   }

   100% {
      opacity: 1;
   }
}

.attribution { 
   font-size: 11px; text-align: center; 
   background-color: var(--primary-color-black);
   color: var(--primary-color-white);
   padding-bottom: 10px;
   padding-top: 10px;
   border-top: .5px solid var(--very-dark);
}
.attribution a {
   color: hsl(228, 45%, 44%);
}

.container {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
}

.header {
   position: absolute;
   top: 40px;
   width: 100%;
}

.header > .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nav-list {
   list-style-type: none;
   align-self: center;
}

.nav-items, .footer-nav-items {
   display: inline;
   color: var(--primary-color-white);
   font-size: .8rem;
   margin-right: 24px;
}

.mobile-menu {
   display: none;
   cursor: pointer;
}

.logo {
   width: 120px;
   height: auto;
}

.mobile-block {
   width: 100%;
   height: 100vh;
   background-color: var(--primary-color-black);
   padding: 16px 24px 24px 24px;
   display: none;
   animation: mobile-menu-transition 1.2s ease-in;
}

@keyframes mobile-menu-transition {
   0% {
      opacity: 0.7;
   }
   100% {
      opacity: 1;
      display: block;
   }
}

.logo-close {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 120px;
}

.logo-close > .logo {
   width: 150px;
   height: auto;
}

.mobile-block > div {
   margin-top: 30px;
}

.mobile-nav-items {
   color: var(--primary-color-white);
   text-transform: uppercase;
   font-size: 1.8rem;
   margin-bottom: 24px;
   display: block;
   font-weight: 500;
   font-family: "Josefin Sans", sans-serif;
}

.hero {
   width: 100%;
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/desktop/image-hero.jpg");
   background-position: left;
   background-size: cover;
   background-repeat: no-repeat;
   height: 65vh;
   padding-top: 40px;
}

.hero > .container {
   height: 100%;
   display: flex;
   align-items: center;
}

.hero-text {
   color: white;
   font-size: 2.2rem;
   font-weight: 500;
}

.hero-text-block {
   width: 300px;
   position: relative;
   border: 2px solid var(--dark-gray);
   padding: 18px;
}

.about {
   padding-top: 120px;
   padding-bottom: 120px;
}

.about > .container {
   display: flex;
}

.about-img {
   margin-right: 100px;
}

.about-img > img{
   width: 600px;
   height: auto;
}

.about-text {
   width: 400px;
   /* height: 250px; */
   align-self: center;
}

.about-text > h2 {
   font-weight: 500;
   color: var(--primary-color-black);
   font-size: 1.8rem;
   margin-bottom: 30px;
}

.about-text > p {
   font-size: 0.8rem;
   color: var(--very-dark);
   line-height: 2;
}

.creations {
   margin-bottom: 80px;
}

.creation-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 70px;
}

.creation-heading > h2{
   font-size: 1.5rem;
}

.btn-see-all-desktop {
   color: var(--primary-color-black);
   text-decoration: none;
   border: 1.5px solid var(--dark-gray);
   padding: 1px 24px;
   text-transform: uppercase;
   font-weight: 200;
   letter-spacing: 1.2px;
}

.btn-see-all-mobile {
   display: none;
}

.btn-see-all-desktop:hover, .btn-see-all-mobile:hover {
   transition: background 0.5s, color 0.5s, all 0.5s ease-in-out;
}

.btn-see-all-desktop:hover, .btn-see-all-mobile:hover {
   background: var(--primary-color-black);
   color: var(--primary-color-white);
}

.creation-heading {
   width: 100%;
}

.creation-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 24px;
   width: 100%;
}

.grid-items, .grid-items-mobile {
   background: black;
   height: auto;
   color: var(--primary-color-white);
   transition: background 1s, color 1s, all 1s ease-in-out;
}

.grid-items:hover, .grid-items-mobile:hover {
   color: var(--primary-color-black);
   background: var(--primary-color-white);
}

.grid-items > img {
   object-fit: fill;
   opacity: 0.5;
   width: 100%;
   height: 100%;
}

.grid-items-mobile > img {
   object-fit: fill;
   opacity: 0.5;
   height: 100%;
}

.grid-items-text {
   height: 0;
   font-size: 1.2rem;
   width: 120px;
   position: relative;
   top: -80px;
   margin-left: 30px;
   /* color: var(--primary-color-white); */
}

.footer {
   background-color: var(--primary-color-black);
   color: var(--primary-color-white);
   padding: 50px;
}

.footer > .container {
   display: flex;
   justify-content: space-between;
}

.footer-nav-items {
   font-size: .8rem;
}

.logo-nav-item > img {
   width: 100px;
   height: auto;
   padding-bottom: 10px;
}

.social-icons {
   text-align: right;
}

.social-icons > a {
   width: 10px;
   margin-left: 12px;
   text-decoration: none;
   padding-bottom: 2px;
}

.copyright {
   font-size: .6rem;
   color: var(--dark-gray);
   word-spacing: 1.2px;
   letter-spacing: 1px;
   margin-top: 10px;
}

.nav-items > a:hover, .footer-nav-items > a:hover, .social-icons > a:hover {
   border-bottom: 1px solid var(--primary-color-white);
}

.mobile-nav-items > a, .nav-items > a, .footer-nav-items > a {
   text-decoration: none;
   color: var(--primary-color-white);
}

@media (min-width: 769px) and (max-width: 1200px) {
   .container {
      width: 90%;
   }

   .creation-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 12px;
   }

   .about-img > img {
      width: 450px;
   }
}

@media(max-width: 768px) {
  nav > ul {
     display: none;
  }

  .mobile-menu {
     display: block;
  }

  .hero {
     height: 75vh;
     background-position: center;
  }
  
  .container {
     padding-left: 24px;
     padding-right: 24px;
     margin: auto;
  }

  .about {
     padding-top: 80px;
     padding-bottom: 80px;
  }

  .about > .container {
     display: block;
  }

  .about-img {
     margin-right: 0;
  }

  .about-img > img, .about-text {
      width: 100%;
      height: auto;
  }

  .about-text {
     margin-top: 50px;
     text-align: center;
  }

  .about-text > h2 {
     margin-bottom: 20px;
  }

  .creation-heading > h2 {
     margin: auto;
  }

  .btn-see-all-mobile {
      display: block;
      text-align: center;
      color: var(--primary-color-black);
      text-decoration: none;
      border: 1.5px solid var(--dark-gray);
      padding: 1px 24px;
      text-transform: uppercase;
      font-weight: 200;
      letter-spacing: 1.2px;
      width: 110px;
      margin: auto;
   }

   .btn-see-all-desktop {
      display: none;
   }

  .footer > .container {
     display: block;
  }

  .footer-nav-items {
     display: block;
     text-align: center;
     margin-bottom: 16px;
  }

  .footer-nav-list {
     margin-top: 24px;
     margin-bottom: 30px;
     margin-left: 16px;
  }

  .footer {
     text-align: center;
  }

  .social-icons {
     text-align: center;
  }

  .social-icons > img {
     width: 20px;
     margin-left: 16px;
  }

  .logo-nav-item {
     text-align: center;
  }
}