@font-face {
    font-family: 'Product Sans';
    src: url('./font/Product Sans Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  :root{
      --yellow:#FCB03F;
      --grey:#707070;
      --black:#050505;
      --marginpercent:18%; 
      --margin:390px; 
      --pname-fs:max(1.3vw,29px);
      --pname-fh:max(1.1vw,17px);
  }
  .margin390{
    margin: 0px min(var(--margin),var(--marginpercent));
  }
  *{
      margin: 0px;
      box-sizing: border-box;
      font-family: Product Sans;
    }
    a,
    a:hover,
    a:visited,
    .underline{
        font-family: "Product Sans";
        -webkit-text-decoration: none;
        text-decoration: none;
        background-image: linear-gradient(to top, var(--yellow), var(--yellow));
        background-position: 100% 100%;
        background-size: 100% 25%;
        background-repeat: no-repeat;
        color: inherit;
        -webkit-transition: background-size .15s ease-out;
        transition: background-size .15s ease-out;
        outline: none;
    }
    a.nobg{
        background: none;
        text-decoration: underline;
    }
    .prodtitle{
        font-family: "Product Sans";
        font-weight: bold;
        font-size: 40px;
        line-height: 49px;
        text-align: left;
        color: var(--black);
    }
    .proddesc{
        font-family: "Product Sans";
        font-weight: normal;
        font-size: 23px;
        line-height: 38px;
        text-align: left;
        color: var(--black);
    }
    .otherp{
        font-family: "Product Sans";
font-weight: bold;
font-size: 21px;
line-height: 25px;
color: #050505;
    }

  @media (max-width: 40em) { 
    :root{
        --margin:36px;
    }
    .proddesc{
      width: 317px;
    }
  }