/* 
font-family: 'Great Vibes', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Tilt Prism', cursive;
COLORS
 navy blue #043d4d;
dark brown #5d3f04;
off-white #e0f2f8;
light blue #1884aa;
 */

 /* Utility Classes */
 header {
    background-color: #ffffffbe;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 4px 4px 6px #043d4da9;
    padding: 0 1rem;
}
header a {
    font-family: 'Great Vibes', cursive;
    color: #043d4d;
    font-size: 1.6rem;
}

h2 {
    text-transform: uppercase;
    font-family: 'Tilt Prism', cursive;
    font-size: 4.2rem;
    color:#043d4d;
    padding: 6rem 0 6rem 2rem;
}

.hero-bg h2 {
    color: #f3efd9;
    padding: 0;
}

.container {
    max-width: 1280px;
    margin: auto;
}

a {
    text-decoration: none;
    color:#e0f2f8;
}

h3{
    font-size: 1.2rem;
    color: #f3efd9;
    text-transform: uppercase;
}

.flex-md div {
    padding: 0.6rem 1rem;
    margin: 0.7rem 1rem;
    width: calc(100% - 2rem);
    display: inline-block;
    text-align: center;
    border-radius: 0.3rem;
    border: 2px solid #f3efd95b;
}
.flex-md div:hover {
    cursor: pointer;
    border: 2px solid #f3efd9;
    background-color: #e0f2f89f;
}

.flex-md div:hover h3,
.flex-md div:hover p a {
    color: #043d4d;
}

.flex-md div p {
    margin: auto;
    text-align: center;
}

.btn {
    font-size: 1.2rem;
    color: #1884aa;
    border-radius: 0.3rem;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    margin: 0.7rem 1rem;
    width: calc(100% - 2rem);
    display: inline-block;
    text-align: center;
}


.btn-outline {
    background-color: transparent;
    border: 2px solid #f3efd9;
    color: #f3efd9;
}

.btn-outline:hover {
    background-color: #e0f2f8d7;
    color: #043d4d;
}

/* STYLES */

/* hero banner */
.hero-bg {
    background: url('../img/background-birds.webp') center / cover  no-repeat fixed;
    padding: 9rem 1rem;
}

.hero-bg p {
    color: #e0f2f8;
    margin: 0.5rem 0 3rem 0;
    font-size: 1.2rem;
    max-width: 60ch;
}

/* Projects section */

/* cards */
.tile {
    min-width: 40rem;
    background-color: #e0f2f8;
}

.tile-bg {
    min-height: 30rem;
}
.poster-bg {
    min-height: 45rem;
}
.poster {
    min-width: 40rem;
    background-color: #e0f2f8;
}
.poster p {
    padding-bottom: 0.7rem;
    margin-left: 1rem;
    color: #043d4d;
}
.tile p {
    padding-bottom: 0.7rem;
    margin-left: 1rem;
    color: #043d4d;
}
/* Posters tiles */

.poster:first-child .poster-bg {
    background: url('../img/movie-poster.webp') center / cover no-repeat;
}
.poster:nth-child(2) .poster-bg {
    background: url('../img/botanical-illustration.webp') top / cover no-repeat;
}
.poster:first-child,
.poster:nth-child(2),
.poster:nth-child(3),
.poster:nth-child(4),
.poster:nth-child(5) {
    min-width: 30rem;
}
.poster:nth-child(6) {
    min-width: 30rem;
}
.poster:nth-child(7) {
    min-width: 40rem;
}
.poster:nth-child(8),
.poster:nth-child(9) {
    min-width: 35rem;
}
.poster:nth-child(3) .poster-bg {
    background: url('../img/tanzania-poster.webp') center / cover no-repeat;
}
.poster:nth-child(4) .poster-bg {
    background: url('../img/packaging-design.webp') center / cover no-repeat;
}
.poster:nth-child(5) .poster-bg {
    background: url('../img/cave-paintings-poster.webp') center / cover no-repeat;
}
.poster:nth-child(6) .poster-bg {
    background: url('../img/snails.webp') center / cover no-repeat;
}
.poster:nth-child(7) .poster-bg {
    background: url('../img/unsolicited-redesign.webp') center / cover no-repeat;
}
.poster:nth-child(8) .poster-bg {
    background: url('../img/menu-design.webp') center / cover no-repeat;
}
.poster:nth-child(9) .poster-bg {
    background: url('../img/hand-lettering-quote.webp') center / cover no-repeat;
}
/* Projects tiles */

.tile:first-child .tile-bg {
    background: url('../img/book-cover.webp') center / cover no-repeat;
}
.tile:nth-child(2) .tile-bg {
    background: url('../img/infographic.webp') top / cover no-repeat;
}
.tile:first-child,
.tile:nth-child(3),
.tile:nth-child(4) {
    min-width: 40rem;
}
.tile:nth-child(2),
.tile:nth-child(5) {
    min-width:50rem;
}
.tile:nth-child(3) .tile-bg {
    background: url('../img/brand-re-imagining.webp') center / cover no-repeat;
}
.tile:nth-child(4) .tile-bg {
    background: url('../img/greek-landscape-pen.webp') center / cover no-repeat;
}
.tile:nth-child(5) .tile-bg {
    background: url('../img/Edmonton-flag-design.webp') center / cover no-repeat;
}
/* .tile:nth-child(6) .tile-bg {
    background: url('../img/retouching.webp') center / cover no-repeat;
} */

/* Paintings tiles */
/* .paint {
    min-width: 30rem;
    background-color: #e0f2f8;
}

.paint-bg {
    min-height: 40rem;
}

.paint p {
    padding-bottom: 0.7rem;
    margin-left: 1rem;
    color: #043d4d;
}

.paint:first-child .paint-bg {
    background: url('../img/winter-bridge-painting.webp') center / cover no-repeat;
}
.paint:nth-child(2) .paint-bg {
    background: url('../img/ship-mirror-painting.webp') center / cover no-repeat;
}
.paint:nth-child(3) .paint-bg {
    background: url('../img/fish-in-the-sky-painting.webp') center / cover no-repeat;
}
.paint:nth-child(4) .paint-bg {
    background: url('../img/starflowers-painting.webp') center / cover no-repeat;
}
.paint:nth-child(5) .paint-bg {
    background: url('../img/trees-winter-painting.webp') center / cover no-repeat;
} */

/* Sketchbook tiles */
.sketch {
    min-width: 15rem;
    background-color: #e0f2f8;
}

.sketch-bg {
    min-height: 20rem;
}

.sketch p {
    padding-bottom: 0.7rem;
    margin-left: 1rem;
    color: #043d4d;
}

.sketch:first-child .sketch-bg {
    background: url('../img/owl-print.webp') center / cover no-repeat;
}
.sketch:nth-child(2) .sketch-bg {
    background: url('../img/haven-scratchboard.webp') center / cover no-repeat;
}
.sketch:nth-child(3) .sketch-bg {
    background: url('../img/spiderman-sketch.webp') center / cover no-repeat;
}
.sketch:nth-child(4) .sketch-bg {
    background: url('../img/yoda-sketch.webp') center / cover no-repeat;
}
.sketch:nth-child(5) .sketch-bg {
    background: url('../img/calligraphy.webp') center / cover no-repeat;
}
.sketch:nth-child(6) .sketch-bg {
    background: url('../img/skeleton.webp') center / cover no-repeat;
}
.sketch:nth-child(7) .sketch-bg {
    background: url('../img/ocelot.webp') center / cover no-repeat;
}
.sketch:nth-child(8) .sketch-bg {
    background: url('../img/car-sketch.webp') center / cover no-repeat;
}
.sketch:nth-child(9) .sketch-bg {
    background: url('../img/lady-pastel.webp') center / cover no-repeat;
}
.sketch:nth-child(10) .sketch-bg {
    
}
.row {
    display: flex;
    flex-wrap: nowrap;
}

.scroll-wrapper {
    overflow-x: scroll;
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
    scrollbar-color: #043d4d #e0f2f8;
    scrollbar-width: thin;
}

.scroll-wrapper::-webkit-scrollbar {
    background-color:  #e0f2f8;
    height: 0.5rem;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: #043d4d;
    border-radius: 2rem;
}

footer {
    background-color: #fff;
    padding: 2rem 1rem;
}

footer p {
    color: #043d4d;
}

footer h3 {
    color: #043d4d;
    text-transform: none;
}
/* Carousel */
.contains {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 500px;
  gap: 10px;
}
.contains > div {
  flex: 0 0 3rem;
  border-radius: 0.5rem;
  transition: 0.5s ease-in-out;
  box-shadow: 1px 5px 15px #043d4d;
  position: relative;
  overflow: hidden;
}
.contains > div:nth-of-type(1) {
  background: url("../img/winter-bridge-painting.webp") no-repeat 50%/cover;
}
.contains > div:nth-of-type(2) {
  background: url("../img/ship-mirror-painting.webp") no-repeat 50%/cover;
}
.contains > div:nth-of-type(3) {
  background: url("../img/fish-in-the-sky-painting.webp") no-repeat 50%/cover;
}
.contains > div:nth-of-type(4) {
  background: url("../img/starflowers-painting.webp") no-repeat 50%/cover;
}
.contains > div:nth-of-type(5) {
    background: url("../img/trees-winter-painting.webp") no-repeat 50%/cover;
  }
.contains > div .content {
  font-size: 1.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 15px;
  opacity: 0;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  background: #02022e;
  background: linear-gradient(0deg, rgba(2, 2, 46, 0.6755077031) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translatey(100%);
  transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
  visibility: hidden;
}
.contains > div .content span {
  display: block;
  margin-top: 5px;
  font-size: 1.2rem;
}
.contains > div:hover {
  flex: 0 0 20rem;
  box-shadow: 1px 3px 15px #043d4d;
  transform: translatey(-30px);
}
.contains > div:hover .content {
  opacity: 1;
  transform: translatey(0%);
  visibility: visible;
}
@media screen and (min-width: 760px) {
    .hero-bg {
        background: url('../img/background-birds-md.webp') center / cover  no-repeat fixed;
        padding: 9rem 2rem;
    } 
    .btn {
    width: calc(100% / 3 - 3rem);
    }
    .contains > div {
        flex: 0 0 7rem;
    }
}
@media screen and (min-width: 1362px) {
    .flex-md div {
        width: calc(100% / 3 - 3rem);
    }
    .contains > div {
        flex: 0 0 15rem;
    }
    .contains > div:hover {
        flex: 0 0 25rem;
        box-shadow: 1px 3px 15px #043d4d;
        transform: translatey(-30px);
      }
}