body {
  background-color: #f965A7; /* light pastel blue */
}

.page-title {
  text-align: center;                     /* center it */
  font-family: 'Zen Old Mincho', serif; /* custom font */
  font-size: 40px;                         /* size */
  font-weight: 300;                        /* boldness */
  color: #798246;                          /* pink */
             
  margin: 40px 0;                          /* spacing top/bottom */
}


.banner img {
  display: block;
  margin: 20px auto;   /* centers it */
  max-width: 800px;    /* controls max size */
  width: 100%;         /* makes it responsive */
  height: auto;        /* keeps proportions */
}

.search-box {
  width: 400px;
  padding: 15px; /* makes it taller */
  
<style>
/* container */
.atm-wrap{display:flex;justify-content:center;margin:30px 0;}
.atm{
  width: 340px; border:6px solid #ec008c; border-radius:20px; padding:16px;
  background:#F965A7; box-shadow: 6px 6px 20px rgba(0,0,0,.25);
  font-family:'Noto Sans JP',sans-serif;
}

/* header logo */
.atm-logo{
  display:block; max-width:280px; height:auto; margin:0 auto 12px auto;
}

/* body layout */
.atm-body{display:flex;flex-direction:column;gap:12px}

/* screen */
.atm-screen{
  background:#111; color:#00ffb7; border-radius:12px; padding:14px 12px; min-height:64px;
  font-family:'Mochiy Pop P One','Noto Sans JP',sans-serif;
}
.atm-screen .l1{font-size:16px}
.atm-screen .l2{font-size:13px; opacity:.85}

/* card slot */
.slot{
  align-self:center; width:80px; height:26px; border:0; border-radius:6px;
  background:#F52260; color:#fff; cursor:pointer; font-size:18px;
  font-family:'Mochiy Pop P One','Noto Sans JP',sans-serif;
}

/* keypad */
.pad{display:flex; gap:8px; justify-content:center; align-items:center}
.pin{
  width:110px; padding:8px 10px; border:2px solid #F52260; border-radius:8px; text-align:center; font-size:18px;
}
.btn{
  padding:8px 14px; border:0; border-radius:8px; cursor:pointer; font-weight:700;
  font-family:'Mochiy Pop P One','Noto Sans JP',sans-serif;
}
.btn:disabled{opacity:.4; cursor:not-allowed}
.ok{background:#5ad67d; color:#102a16}
.clear{background:#ffd166; color:#5a3b00}

/* amount label */
.amount{text-align:center; font-weight:700; color:#333}

/* dispenser */
.dispenser{
  height: 120px; border:3px solid #ec008c; border-radius:12px; background:#FFC2D6;
  position:relative; overflow:hidden;
}
.note{
  position:absolute; left:50%; transform:translateX(-50%) translateY(110%);
  width: 300px; max-width:none; image-rendering:auto;
}

/* slide animation */
.note.out{ animation: slideout 1.6s ease-in-out forwards; }
@keyframes slideout{
  0%   { transform:translateX(-50%) translateY(110%); }
  70%  { transform:translateX(-50%) translateY(0%); }
  100% { transform:translateX(-50%) translateY(10%); }
}

.dispense{
  background:#F52260; color:#fff; align-self:center; width:160px;
  box-shadow: 2px 2px 0 #800030;
}
</style>