@font-face {
  font-family: 'Lexend';
  src: url('./fonts/Lexend-Regular.eot');
  src: url('./fonts/Lexend-Regular.eot?#iefix') format('embedded-opentype'),
      url('./fonts/Lexend-Regular.woff2') format('woff2'),
      url('./fonts/Lexend-Regular.woff') format('woff'),
      url('./fonts/Lexend-Regular.svg#Lexend-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('./fonts/Lexend-Bold.eot');
  src: url('./fonts/Lexend-Bold.eot?#iefix') format('embedded-opentype'),
      url('./fonts/Lexend-Bold.woff2') format('woff2'),
      url('./fonts/Lexend-Bold.woff') format('woff'),
      url('./fonts/Lexend-Bold.svg#Lexend-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


:root {
  --patina: #608a91;
  --iceberg: #e4f4f7;
  --black-squeeze: #f0fafa;
  --botticelli: #cce6e6;
  --outer-space: #2d3233;
  --hippie-blue: #55a7b5;
  --neon-carrot: #ff9e3f;
  --persimmon: #ff6f46;
  --purple: #820298;
  --malibu: #52daff;

}

html {
  font-family: 'Lexend', sans-serif;
  font-size: 62.5%;
}

body {
  background-blend-mode: soft-light;
  background-color: var(--patina);
  background-image:
    linear-gradient(0deg, var(--patina) 10%, var(--hippie-blue) 50%),
    url('./images/watercolour-3.jpg');
  background-size: cover;

  font-size: 1.6rem;
  line-height: 1.4;
  padding: 8rem 2rem;
}
/* iOS browsers */
@supports(font:-apple-system-body) and (-webkit-touch-callout:default){
  body {
    background-blend-mode: hard-light;
  }
}
 
/* Desktop Safari */
@supports(font:-apple-system-body) and (not(-webkit-touch-callout:default)){
  body {
    background-blend-mode: hard-light;
  }
}


main {
  background-blend-mode: multiply, multiply, normal;
  background-color: var(--botticelli);
  background-image:
    url('./images/birds-tree-silhouette.jpg'),
    linear-gradient(0deg, var(--purple) 0%, var(--persimmon) 8%, var(--neon-carrot) 16%, var(--malibu) 24%, var(--black-squeeze) 32%),
    url('./images/paper.jpg');
  background-position: left bottom;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: contain, auto, auto;
  border-radius: 2px;
  box-shadow: 0 5px 14px rgba(45,50,51,.7);
  color: var(--outer-space);
  margin: auto;
  padding-top: 3rem;
  padding-inline: min(3rem, 5vw);
  padding-bottom: 66vw;
  position:relative;
}

main::before,
main::after {
  background-blend-mode: multiply;
  background: var(--botticelli);
  background-image:
  linear-gradient(0deg, var(--purple) 0%, var(--persimmon) 8%, var(--neon-carrot) 16%, var(--malibu) 24%, var(--black-squeeze) 32%);
  content: '';
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 14px rgba(45,50,51,.7);
  z-index: -1;
}

main::before {
  right: -3px;
  transform: rotate(-1deg);
}

main::after {
  right: -3px;
  top: 14px;
}

.bird {
  position: absolute;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.7;
  width: 50px;
}

.lark {
  right: 10rem;
  transform: scaleX(-1);
  top: 5rem;
}

.swallow {
  right: -2rem;
  top: 22rem;
}


.tern {
  right: -2rem;
  top: 40%;
}

@media all and (min-width: 400px) {
  .tern {
    right: 4rem;
    top: 42rem;
  }
}

@media all and (min-width: 620px) {
  body {
    font-size: 2rem;
    padding: 8rem;
  }

  main {
    background-blend-mode: multiply, multiply, normal;
    background-color: var(--botticelli);
    background-image:
      url('./images/birds-tree-silhouette.jpg'),
      linear-gradient(0deg, var(--purple) 0%, var(--persimmon) 8%, var(--neon-carrot) 16%, var(--malibu) 24%, var(--black-squeeze) 32%),
      url('./images/paper.jpg');
    background-position: left bottom;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: contain, auto, auto;
    max-width: 700px;
    padding: 6rem;
    padding-bottom: min(58vw, 550px);
  }

  main::before {
    right: -5px;
    transform: rotate(-3deg);
  }
  
  main::after {
    right: -5px;
    transform: rotate(-5deg);
    top: 0px;
  }
}

@media all and (min-width: 750px){
  .bird {
    width: 100px;
  }

  .lark {
    right: 10rem;
    top: 5rem;
  
  }
  
  .swallow {
    right: -2rem;
    top: 32rem;
  }
  
  .tern {
    right: 4rem;
    top: 60rem;
  }
}

h1 {
  font-size: 3rem;
  margin-top: 0;
  padding: 0 0 2rem 0;
}