body {
    font-family: Helvetica, sans-serif;
    color: #555;
    background-color: #e6f2ff;
 }
 
 #weather-input div {
    padding-bottom: 8px;
 }
 
 .hidden {
    display: none;
 }
 
 .error-msg {
    color: red;
 }
 
 table {
    margin-bottom: 15px;
 }
 
 table caption {
    font-weight: bold;
 }
 
 table td {
    text-align: center;
    padding: 3px 8px;
 }
 
 div.footersection {
   display: grid;
   align-content: stretch;
   text-align: center;
   font-size: small;
   column-gap: 20px;
   border: 5px purple double;
   background-color: rgb(186, 126, 214);
   padding: 10px;
   border-radius: 15px;
   grid-template-columns: auto auto auto auto auto auto auto auto;
}

div.headersection {
   font-family: 'Courier New', Courier, monospace;
   display: flex;
   justify-content: center;
   flex-basis: 100%;
   background-color: lavender;
   border: 4px purple solid;
   padding: 1%;
   margin: 0%;
   box-shadow: -5px -2px 3px gray, 5px 5px rgb(189, 189, 245);
   border-radius: 15px;
   font-size: medium;
   font-weight: bold;
   font-style: italic;
}

div.cpyrt {
   padding-top: 10px;
   grid-column: 1/9;
}

a.button {
   display: flex;
   appearance: button;
   background-color: lavender;
   border: 4px purple dotted;
   padding: 20px;
   justify-content: center;
   font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
   font-size: larger;
   color:black;
   text-decoration: none;
   box-shadow: -5px -2px 3px gray, 5px 5px rgb(189, 189, 245);
   border-radius: 15px;
}

p.text {
   font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
   display: flex;
   justify-content: center;
   flex-basis: 100%;
   background-color: lavender;
   border: 4px purple solid;
   padding: 1%;
   margin: 0%;
   box-shadow: -5px -2px 3px gray, 5px 5px rgb(189, 189, 245);
   border-radius: 15px;
}

.text {
   font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
   display: flex;
   justify-content: center;
   text-align: center;
   flex-basis: 100%;
   background-color: lavender;
   border: 4px purple solid;
   padding: 1%;
   margin: 0%;
   animation-name: title;
   animation-duration: 2s;
   animation-delay: 0s;
   box-shadow: -5px -2px 3px gray, 5px 5px rgb(189, 189, 245);
   border-radius: 15px;
}