* {
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande";
      }
      body {
        background: linear-gradient(
          130deg,
          rgb(109, 209, 243),
          rgb(139, 203, 224)
        );
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .container {
        width: 90%;
        height: 90vh;
        max-width: 25rem;
        background-color: white;
        border-radius: 0.9rem;
        box-shadow: 0px 0px 5px rgba(0, 0, 139, 0.366);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }
      h3 {
        text-align: center;
        font-variant: small-caps;
        background-color: lightblue;
        padding: 0.6rem 1rem;
        width: 80%;
        color: rgb(25, 71, 86);
        border-radius: 0.6rem;
      }
      .elements {
        background-color: lightblue;
        width: 90%;
        height: 60%;
        min-height: 20rem;
        max-height: 30rem;
        border-radius: 0.6rem;
        display: flex;
        justify-content: center;
      }
      .inputs {
        width: 18rem;
        display: flex;
        flex-direction: column;
        justify-content: start;
        padding-top: 2rem;
      }
      .inputs input {
        border-radius: 0.6rem;
        padding: 0.5rem 1rem;
        margin: 0.4rem;
        justify-self: flex-start;
        text-align: center;
        outline: none;
        border: none;
        font-weight: bold;
      }
      .inputs label {
        margin: 0.2rem 0.8rem;
        color: rgb(25, 71, 86);
        font-weight: bold;
      }
      .inputs input:focus {
        outline: none;
        border: solid 2px rgb(15, 109, 109);
        box-shadow: 0px 0px 4px rgb(15, 109, 109);
      }
      .inputs button {
        background-color: lightcyan;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.6rem;
        margin: 1rem 0;
        width: 100%;
        cursor: pointer;
      }
      .inputs button:hover {
        background-color: rgb(199, 252, 252);
        color: rgb(0, 0, 0);
        font-weight: bold;
        transform: translate(0.2rem, 0.2rem);
      }
      #result {
        background-color: white;
        border: solid 2px lightblue;
        padding: 10px;
        border-radius: 5px;
        width: 80%;
        box-shadow: 0px 0px 12px lightblue;
      }
      @media (max-width: 400px) {
        .container {
          width: 98%;
        }
        .inputs button {
          width: 90%;
          margin: 0.6rem auto;
        }
        .elements {
          height: 50vh;
        }
      }