html, body {
  touch-action: pan-x pan-y; 
}


.input-overlay{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  
  left: clamp(120px, 36%, 190px);
  right: clamp(14px, 4%, 22px);

  height: 34px;

  border: none;
  outline: none;
  background: transparent;

  font-size: 16px;
  font-weight: 700;
  color: #000;
}



@media (max-width: 380px){
  .input-overlay{
    left: 175px;
    right: 18px;
    font-size: 15px;
  }
}

/* ========== RUDDY FONT ========== */

@font-face {
  font-family: "Ruddy";
  src: url("./font/Ruddy Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ruddy";
  src: url("./font/Ruddy Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ruddy";
  src: url("./font/Ruddy Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ruddy";
  src: url("./font/Ruddy Light Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ruddy";
  src: url("./font/Ruddy Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ruddy";
  src: url("./font/Ruddy Bold Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ruddy";
  src: url("./font/Ruddy Black Italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

.ruddy-font {
  font-family: "Ruddy", sans-serif;
}