.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      
    .logo
    {
      width: 32px;
      height: 32px;
    }
    .icon
    {
        width: 48px;
        height: 48px;
        margin-top: -8px;
    }


    .card:hover {
      background-color: #ffffff;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .col-md-3{
       margin-bottom: 1em;
    }
    .card{
        box-shadow: 0 0 5px 0 rgba(22, 22, 26, .25);
    }

    .square{
      width: 250px;
      height: 250px;
      object-fit: cover;
      object-position: 0 100% ;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 10px;
    }

    .rectangle{
      margin-top: 10px;
      max-height: 150px;
    }


    .card-image-link{
      background-color: #e9ecef; padding: 15px;
    }

    .btn-block {
      display: block;
      width: 100%;
  }




  

    .card:hover {
      background-color: #ffffff;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .col-md-3{
       margin-bottom: 1em;
    }
    .card{
        box-shadow: 0 0 5px 0 rgba(22, 22, 26, .25);
    }

    .card-image-link{
      background-color: #e9ecef; padding: 15px;
    }

    .screenshot{
            width: 500px;
      height: 500px;
      object-fit: cover;
      object-position: 0 100% ;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 10px;
    }

    .more{
      margin-top: 15px;
    }
    .download-btn{
      margin:  15px 0 15px 0;
    }

    .ttf_screenshot{
          border-radius: 3px;
    border: 1px solid #7d64bb;
    margin-bottom: 15px;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
    margin-bottom: 20px;
    }




      #input{
        border: 3px solid #a452a6;
      }
      #preview{
        border: 1px dotted gray;
        border-radius: 5px;
        padding: 10px;
        margin-top: 10px;
        min-height: 50px;
        background-color: aliceblue;
        font-family: MyWebFont;
        font-size: 40px;

      }

      .navbar{
        background-position: left center;
        background-image: url(https://www.fontstube.com/images/bg.png), linear-gradient(45deg, #ee5d54, #ffb88c);
        color: white;
        border-radius: 0px;
      }
      #header{
        background-position: left center;
        background-image: url(https://www.fontstube.com/images/bg.png), linear-gradient(45deg, #ee5d54, #ffb88c);
        color: white;
        border-radius: 0px;
      }