.search {
  width: 100%;
  max-width: 300px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.search:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 5px rgba(38, 38, 38, 1);
}
    div.okpa {
      --glow-color: rgb(217, 176, 255);
      --glow-spread-color: rgba(191, 123, 255, 0.781);
      --enhanced-glow-color: rgb(231, 206, 255);
      --btn-color: rgb(100, 61, 136);
      border: 0.25em solid var(--glow-color);
      padding: 1em 3em;
      color: var(--glow-color);
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      background-color: var(--btn-color);
      border-radius: 1em;
      outline: none;
      box-shadow: 0 0 1em 0.25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 0.74em 0.25em var(--glow-color);
      text-shadow: 0 0 0.5em var(--glow-color);
      position: relative;
      transition: all 0.3s;
        display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 350px;

  
    }

    div.okpa::after {
      pointer-events: none;
      content: "";
      position: absolute;
      top: 120%;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: var(--glow-spread-color);
      filter: blur(2em);
      opacity: 0.7;
      transform: perspective(1.5em) rotateX(35deg) scale(1, 0.6);
    }

    div.okpa:hover {
      color: var(--btn-color);
      background-color: var(--glow-color);
      box-shadow: 0 0 1em 0.25em var(--glow-color),
      0 0 4em 2em var(--glow-spread-color),
      inset 0 0 0.75em 0.25em var(--glow-color);
    }

    div.okpa:active {
      box-shadow: 0 0 0.6em 0.25em var(--glow-color),
      0 0 2.5em 2em var(--glow-spread-color),
      inset 0 0 0.5em 0.25em var(--glow-color);
    }