index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  outline: none;
}

html {
  min-width: 50em;
  min-height: 25em;
}

body {
  background-color: #313638;
  color: #ffffff;

  main {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      display: flex;
      flex-direction: column;
      width: 75%;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      margin: 1em;
      box-shadow: 3px 3px 5px #131320;
      align-items: center;
      padding: 0.5em;
      border-radius: 0.5em;

      > input {
        border: 0;
        background-color: transparent;
        border-radius: 0.5em;
        /* box-shadow: 3px 3px 5px #333333; */
        border: 1px #ffffff solid;
        color: #ffffff;
        font-family: "Times New Roman", Times, serif;
        padding: 0.15em 0.5em;
        width: 90%;
        margin: 0.5em;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }

      > #links {
        display: grid;
        grid-template-columns: 10rem 10rem 10rem;
        gap: 0.25rem;
        align-items: center;
        justify-content: center;
        max-height: 50vh;
        overflow-y: scroll;
        width: 100%;
        margin: 1em;
        padding: 0 0.75em;
        font-size: small;

        > a {
          width: 100%;
          text-align: center;
          color: black;
          text-decoration: none;
          border-radius: 0.5em;
          box-shadow: 3px 3px 5px #131320;
          color: #ffffff;
          margin: 0.25em;
          padding: 0.1em 1em;
          transition:
            background-color 0.25s ease,
            color 0.25s ease,
            box-shadow 0.25s ease;
        }

        > a:hover {
          background-color: #feeceb;
          color: #131320;
          box-shadow: 0 0 5px #333333;
        }
      }

      > h3,
      > h5 {
        text-align: center;
      }
    }
  }
}