index.css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body
{
  background-image:url('./weather2.jpg');
}
.container
{
    width: 600px;
    margin: 100px auto;
    padding: 40px;
}
.inputs
{
    padding: 2rem 0 2rem 0;
    text-align:center;
    justify-content:center;
    background:rgb(224,190,190);
    height:150px;
}
.inputs input[type="text"]
{
    height:4rem;
    width:20rem;
    background:#212121;
    font-weight:bold;
    font-size:none;
    padding:10px;
    border:none;
    background-color:transparent;
    border:2px solid #473939;
    border-radius:3px;
    margin-right:4px;
}
.inputs input[type="submit"]
{
    height:3rem;
    width:6rem;
    background:#270aca;
    font-weight:bold;
    color:white;
    font-size: 1rem;
    margin-top:20px;
    border:none;
    border-radius:4px;
}
.display
{
    text-align:center;
    width:520px;
    color:#16a864;
}
.wrapper
{
   margin:0 9rem;
   background-color: rgb(172,189,221);
   height: 45vh;
   margin: 50px auto;
   border-radius: 2px;
}
.wrapper h2
{
     padding: 5px 0;
     text-align:center;
     background:#0548b5;
     color:white;
}
.wrapper p
{
    margin:20px 50px;
    margin-right: 20px;
    text-align:left;
    color:#04214c;
    font-size:23px;
}
.wrapper h2 span
{
    font-size:26px;
    color:#9beefb;
}
.wrapper span p
{
    font-size:25px;
    color:brown;
}