<style>
 :root {
   --primary-color: #0A2E5A;
   --secondary-color: #F5F5F5;
   --tertiary-color: #D9E3EC;
   --text-color: #333333;
 }
 body {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   background-image: url('./bg.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   font-family: 'Roboto', sans-serif;
 }
 h1 {
   color: var(--primary-color);
 }
 form {
   background-color: var(--tertiary-color);
   padding: 20px;
   border-radius: 10px;
   width: 80%;
 }
 input[type="text"] {
   padding: 12px 50px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   background-color: #f2f2f2;
   width: 88%;
 }
 button[type="button"] {
   width: 20%;
   background-color: var(--primary-color);
   color: white;
   padding: 14px 20px;
   margin: 8px 80px 0px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   float:right;
   font-size: 16px;
 }
 .light-gray-background {
   background-color: var(--secondary-color);
   padding: 40px;
   min-height: 300px;
   width: 100%;
   border-radius: 10px;
   text-align: left;
 }
 .loading {
   display: none;
   align-items: center;
   justify-content: center;
 }
 .response {
 font-size: larger;
 overflow:auto;
 }
</style>
