@font-face {
    font-family: 'Ladna';
    src:  url('Resources/Fonts/Ladna-Regular.woff2') format('woff2'),
          url('Resources/Fonts/Ladna-Regular.woff') format('woff');
  }

@font-face {
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
"wdth" 100;
  }

body {
    font-family: 'Ladna', sans-serif;
    font-size: 20pt;
    line-height: 25pt;
    margin: 25px;
    cursor: grab;
  }

p {
    max-width: 1000px;
}

a {
    color: inherit;
    text-decoration: inherit;
  }

.tiny {
    font-family: Courier;
    font-weight: bold;
    font-size: 10pt;
}

.big {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20pt;
}

.image-1 {
    background-color:rgb(0, 244, 205);
    background-size: cover;
    background-position: center;
    height: 580px;
    max-width: 1000px;
    color: rgb(0, 244, 205);
    display: flex;
    align-items: flex-end;
    margin-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
}

.image-2 {
    background-color:rgb(0, 244, 205);
    background-size: cover;
    background-position: center;
    height: 580px;
    max-width: 800px;
    color: rgb(0, 244, 205);
    display: flex;
    align-items: flex-end;
    margin-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
}

.image-3 {
    background-color:rgb(0, 244, 205);
    background-size: cover;
    background-position: center;
    height: 580px;
    max-width: 1000px;
    min-width: 200px;
    color: rgb(0, 244, 205);
    display: flex;
    align-items: flex-end;
    margin-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
  }

  .image-4 {
    background-color:rgb(0, 244, 205);
    background-size: cover;
    background-position: center;
    height: 380px;
    width: 380px;
    color: rgb(0, 244, 205);
    position: fixed;
    bottom: 25px;
    right: 25px;
    border-radius: 15px;
  }

  .image-5 {
    background-color:rgb(0, 244, 205);
    background-size: cover;
    background-position: center;
    height: 580px;
    max-width: 800px;
    color: rgb(0, 244, 205);
    display: flex;
    align-items: flex-end;
    margin-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
}

  .image-6 {
    background-color:rgb(0, 244, 205);
    background-size: cover;
    background-position: center;
    color: rgb(0, 244, 205);
    display: flex;
    align-items: flex-end;
    margin-top: 25px;
    padding-left: 20px;
    border-radius: 15px;
}

  .image-7 {
    background-color:rgb(0, 244, 205);
    background-size: cover;
    background-position: center;
    width: 180px;
    height: 180px;
    color: rgb(0, 244, 205);
    display: flex;
    align-items: flex-end;
    margin-top: 25px;
    border-radius: 15px;
}



  /*|| XXS */
@media screen and (min-width: 0px){

  body {
      font-size: 15pt;
      line-height: 19pt;
      margin: 19px;
              margin-top: 26px;
              margin-bottom: 26px;
    }

  .image-1 {
    height: 380px;
    }
  
  .image-2 {
    height: 280px;

    }

  .image-3 {
    height: 380px;
    }
  
  .image-4 {
    height: 100px;
    width: 100px;
    background-size: 200%;
    }

  .image-5 {
    height: 380px;
    }

      .image-6 {
    height: 230px;
    }

  } 

/*|| XS */
@media screen and (min-width: 480px){

  body {
      font-size: 15pt;
      line-height: 19pt;
      margin: 19px;
             margin-top: 26px;
             margin-bottom: 26px;
    }

  .image-1 {
    height: 580px;
    }
  
  .image-2 {
    height: 580px;
    }

  .image-3 {
    height: 580px;
    }
  
  .image-4 {
    height: 150px;
    width: 150px;
    background-size: 150%;
    }

  .image-5 {
    height: 580px;
    }

           .image-6 {
    height: 230px;
    }

  } 

/*|| Small */
@media screen and (min-width: 648px){

  body {
      font-size: 20pt;
      line-height: 25pt;
      margin: 25px;
    }

  .image-4 {
    height: 200px;
    width: 200px;
    background-size: 136%;
    }

    .image-6 {
    height: 380px;
    width: 480px;
    }

    .big {

}

  }



/*|| Medium */
@media screen and (min-width: 768px){

  body {
      font-size: 20pt;
      line-height: 25pt;
      margin: 25px;
    }

    .image-4 {
    height: 250px;
    width: 250px;
    background-size: 124%;
    }

        .image-6 {
    height: 380px;
    width: 480px;
    }

        .big {

}

  }

/*|| Large */
@media screen and (min-width: 1032px){


  body {
      font-size: 20pt;
      line-height: 25pt;
      margin: 25px;
    }

  .image-4 {
      height: 300px;
      width: 300px;
      background-size: 112%;
      }

          .image-6 {
    height: 380px;
    width: 480px;
    }

        .big {

}

  }