styles.css

body {
    font-size: 14px;
    background-color: rgb(222, 191, 226);
  }
  
  h1 {
    color: navy;
    margin-left: 80px;
    font-size: 30px;
  }

  p {
    font-size: 16px;
  }
  
  input[type="date"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-right: 1vh;
    margin-left: 1vh;
  }

  input[type="time"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    width: 50vh;
  }
  
  input[type="number"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    width: 50vh;
  }

  .select {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
  }

  .buttons {
    background: #0066A2;
    color: white;
    border-style: outset;
    border-color: #0066A2;
    height: 50px;
    width: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    border-radius: 20px;
  }

  textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 20px;
    background-color: #f8f8f8;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
  }

  .form {
    background-color: lightblue;
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-right: 1vh;
    margin-left: 1vh;
    padding: 20px;
    border-style: solid;
    border-width: 5px;
    border-color: #0066A2;
    border-radius: 20px;

    

    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
  }

  .flex-container {
    display: flex;
    flex-direction: column;
  }

  #new {
    margin-left: 2vh;
    margin-top: 2vh;
  }

  #outputp {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    border-style: solid;
    border-width: 5px;
    border-color: #0066A2;
    border-radius: 20px;
    background-color: rgb(166, 229, 250);
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-right: 1vh;
    margin-left: 1vh;
    padding: 20px;

  }