@font-face {
  font-family: 'crosshatcher';
  src: url('/assets/vendor/fonts/crosshatcher-font/Crosshatcher-vPOO.ttf');
}
@font-face {
  font-family: 'catpaws';
  src: url('/assets/vendor/fonts/cat-paw-font/CatPaw-zr0OG.otf') format("opentype");;
}
@font-face {
  font-family: 'catsym';
  src: url('/assets/vendor/fonts/meows-nepil-illustration-font/MeowsNepilIllustratioRegular-owjVq.ttf');
}
@font-face {
  font-family: 'feelfree';
  src: url('/assets/vendor/fonts/feelfree-font/FeelfreePersonalUseRegular-lg2Bw.ttf');
}


html,
body {
  height: 100%
}


.body-connect::after {
  content: "";
  background:url('/assets/images/background-connect.jpg');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.body-cat::after {
  content: "";
  background:url('/assets/images/background-cat2.avif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.card-connect {
    min-width: 380px;
    padding: 20px;
} 

.body-error::after {
  content: "";
  background: url('/assets/images/background-beach.jpg');
  background-size: cover;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.body-projects::after {
  content: "";
  background: url('/assets/images/background-projects.avif');
  background-size: cover;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.bg-nav {
  background: linear-gradient(180deg, rgba(225,231,228,1) 0%, rgba(179,182,181,1) 100%);
}

.bg-link {
  color: darkslategray !important;
} 

@media (max-width: 576px) { 
  .big-text {
    padding-top: 10px;
    padding-right: 20px;
    font-size: 3rem;
    max-width: 400px;
    display: block;
  }
  .ff-title {
    font-size: 2.5em;
  } 
  .ff-subtitle {
    font-size: 2em;
  } 
  .ff-text {
    font-size: 1.5em;
  } 
}

@media (min-width: 576px) { 
  .big-text {
    padding-top: 20px;
    padding-right: 20px;
    font-size: 4rem;
    max-width: 500px;
    display: block;
  }
  .ff-title {
    font-size: 2.75em;
  } 
  .ff-subtitle {
    font-size: 2.25em;
  } 
  .ff-text {
    font-size: 1.25em;
  } 
}

@media (min-width: 768px) { 
  .big-text {
    padding-top: 20px;
    padding-right: 20px;
    font-size: 5rem;
    max-width: 550px;
    display: block;
  }
  .ff-title {
    font-size: 3em;
  } 
  .ff-subtitle {
    font-size: 2.5em;
  } 
  .ff-text {
    font-size: 1.5em;
  } 
}

@media (min-width: 992px) {
  .big-text {
    padding-top: 20px;
    padding-right: 20px;
    font-size: 6.5rem;
    max-width: 800px;
    display: block;
  }
  .ff-title {
    font-size: 3.25em;
  } 
  .ff-subtitle {
    font-size: 2.75em;
  } 
  .ff-text {
    font-size: 1.75em;
  } 
}

@media (min-width: 1200px) { 
  .big-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 20px;
    font-size: 8rem;
    max-width: 1000px;
    display: block;
  }
  .ff-title {
    font-size: 3.5em;
  } 
  .ff-subtitle {
    font-size: 3em;
  } 
  .ff-text {
    font-size: 2em;
  } 
}

@media (min-width: 1400px) { 
  .big-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 20px;
    font-size: 10rem;
    max-width: 1200px;
    display: block;
  }
  .ff-title {
    font-size: 3.75em;
  } 
  .ff-subtitle {
    font-size: 3.25em;
  } 
  .ff-text {
    font-size: 2.25em;
  } 
}

@media (min-width: 1600px) { 
  .big-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 20px;
    font-size: 13rem;
    max-width: 1500px;
    display: block;
  }
  .ff-title {
    font-size: 4em;
  } 
  .ff-subtitle {
    font-size: 3.5em;
  } 
  .ff-text {
    font-size: 2.5em;
  } 
}

catsym {
  font-family: catsym;
  font-size: 2.5em;
}

catpaws {
  font-family: catpaws;
  font-size: 4.5em;
}

feelfree {
  font-family: feelfree;
}