@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
  body {
    font-family: 'Poppins', sans-serif !important;
    color: #101010;
  }
  a {text-underline-offset: 0.25em;}
  h1 {
    font-weight: 800 !important;
  }
  .hyperlink-clear, .hyperlink-clear:hover {
    text-decoration: none;
    color: black;
  }
  .fa-firefox {
    background: -webkit-linear-gradient(#fc334e, #ffb547);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .pick-card {
    min-height: 130px;
  }
  .fa-external-link-alt {
    font-size: 0.65em;
  }
  .underline{
    position: relative;
  }
  a{
    text-decoration: none !important;
    color: #0074D9;
  }
  .underline::before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #0074D9;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .underline:hover::before{
      left: 0;
      right: auto;
      width: 100%;
    }
  }
  .fa-opera {
    background-clip: text;
    background: -webkit-linear-gradient(90deg, rgba(255,75,75,1) 0%, rgba(173,2,22,1) 50%, rgba(255,75,75,1) 100%);
    background: -moz-linear-gradient(90deg, rgba(255,75,75,1) 0%, rgba(173,2,22,1) 50%, rgba(255,75,75,1) 100%);
    background: linear-gradient(90deg, rgba(255,75,75,1) 0%, rgba(173,2,22,1) 50%, rgba(255,75,75,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  }
  .fa-chrome {
    background:
    linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0%  /37% 30%,
    linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,

    radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
    linear-gradient( 47deg,        #34a853 42%,transparent 43%),
    linear-gradient(-72deg,        #fbbc05 42%,transparent 43%),
    linear-gradient(-199deg,       #ea4335 42%,transparent 43%);
    background-repeat:no-repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .fa-edge {
    background: -webkit-linear-gradient(to right, #43D159 0%, #047DD6 50%, #164286 100%);
    background: -moz-linear-gradient(to right, #43D159 0%, #047DD6 50%, #164286 100%);
    background: linear-gradient(to right, #43D159 0%, #047DD6 50%, #164286 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .preview-card {min-height: 410px;}
  .navbar-brand {font-family: 'Poppins', sans-serif !important; font-size: 1.6rem !important; font-weight: bolder;}
  .navbar-brand img { width: 50px; height: 50px;}
  .my-6 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important
  }
  .py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important
  }
  .stub {width: 20% !important; height: 7px !important; opacity: 1;}
  .bg-blue { background-color: #009cff;}
  .bg-lblue { background: #f6fafd;}
  .bg-lblue:hover {background: #daefff; border-color: #d2e8fd !important;}
  .cat {font-weight: 600;}
  .text-lime {color: #279c03;}
  .text-blue {color: #009cff;}
  .text-pink {color: #ff004e;}
  .important {
    font-weight: 700 !important;
  }
  .feather-sm {
    width: 18px;
    height: 18px;
  }
  .viewheight75 {
    height: 75vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 75));
  }
  /* . {
    margin-top: 5em;
    font-size: 1.3rem;
    font-weight: 700;
    color: #a3a9b0;
  } */
  .formkit-field {
    margin: 0 !important;
  }
  footer, footer a { color: white; }
  footer a:hover {color: #bdbdbd;}
  .hero {}
  .hero a {color: white; text-decoration: underline rgba(255,255,255,0.35);}
  .hero a:hover {
    text-decoration: underline rgba(255,255,255,1);
  }
  lottie-player {
      margin: 0 auto;
  }