@import url("https://use.typekit.net/uen4mzg.css");

   body {
    background: #e8e8e8;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 2%, rgba(237, 235, 235, 1) 34%, rgba(138, 138, 138, 1) 100%);
    background-attachment: fixed;
   }

   .only {
    font-family: "cairo", sans-serif;
    font-weight: 400;
    font-style: normal;
   }

   h1 {
    font-family: "area-extended", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 4em;
    color: #fff;
    text-shadow: 3px 3px 3px #4b4b4b;
   }

   h2 {
    text-shadow: -3px 3px 0px #fff;
    font-family: "ofelia-display", sans-serif;
    font-weight: 700;
    font-style: normal;
   }

   #about-section h2 {
      color: #999!important;
      font-family: "area-normal", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

   h3 {
    font-size: 2em;
    color: #fff;
    text-shadow: 2px 2px 4px #000;
   }

   h5 {
    font-size: 1em;
   }

  p {
    padding: 20px;
    background-color: #fff;
    border-radius: 28px;
    box-shadow: 15px 14px 0px #f1f1f1;
    margin-bottom: 32px;
    text-shadow: -1px 14px 10px #999;
    font-size: 0.9em;
    border: 2px solid #ececec;
   }

  p.quick-glance {
    padding: 10px;
    background-color: yellow;
    border-radius: 1px;
    box-shadow: 15px 14px 0px #f1f1f1;
    margin-bottom: 32px;
    text-shadow: none;
    border: none;
  }

   body {
    font-family: "ofelia-text", sans-serif;
    font-weight: 400;
    font-style: normal;
   }

   .shadow {
    box-shadow: 3px 5px 9px #000!important;
    border-radius: 25px;
    width: 90%;
   }

   .btn-primary {
    background-color: #adadab;
    border: 1px solid #eee;
    box-shadow: 2px 3px 5px #000;
    border-radius: 5px;
    width: 100%;
    padding: 5px;
    margin-bottom: 8px;
    font-size: 1em;
    color: #fff;
   }

   .btn-primary:hover {
     background-color: #000;
     text-shadow: none;
     border: 1px solid yellow;
   }

   .bar {
    background: #833AB4;
    background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    height: 20px;
    width: 100%;
    box-shadow: 11px 10px 0px #fff;
   }

   .hide {
    display: none;
    font-size: 2em;
    padding-top: 20px;
   }

    .hide2 {
      display: inline-block!important;
      font-size: 2em;
   }

  .hide3 {
      display: block!important;
   }

   footer {
    font-size: 14px;
    margin-top: 50px;
    margin-bottom: 50px;
   }

@media only screen and (max-width: 540px) { 

    h3 {
      font-size: 2em;
    }

    h2 {
      font-size: 2em;
    }

    .hide {
      display: inline-block!important;
   }

    .hide2 {
      display: none!important;
      text-align: center;
   }

    .hide3 {
        display: none!important;
     }

   .btn-primary {
    background-color: #e7e7e7;
    color: #000;
    border: 1px solid #c9c9c9;
    box-shadow: 2px 3px 5px #a9a9a9;
    border-radius: 13px;
    width: 100%;
    padding: 7px;
    font-size: 1em;
    margin-bottom: 8px;
   }

}

.zoom-container {
  --zoom-scale: 1.1;        /* Zoom amount */
  --zoom-speed: 0.4s;       /* Transition speed */
  --zoom-ease: ease;        /* Animation easing */
  --zoom-origin: center;    /* Transform origin */
  display: inline-block;
}

.zoom-container .zoom-img {
  transition: transform var(--zoom-speed) var(--zoom-ease);
  transform-origin: var(--zoom-origin);
  height: auto;
  display: block;
}

.zoom-container:hover .zoom-img {
  transform: scale(var(--zoom-scale));
}