body {
    background: linear-gradient(to right, #8360c3, #2ebf91);
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    margin:0;
}

h1 {
    color:white;
    font-family:'Sniglet';
    font-size: 2rem;
    padding:10px;
  }
  
  p {
    margin: 0;
    padding: 20px;
    font-size: 20px;
    color: #00204a;
    font-family: 'Dosis';
    font-weight:300;
  
  }

.container {
    margin-top: 50px;
}
input,button{
    width:300px;
    height:60px;
    border:none;
    text-align: center;
}
input:focus {
    outline:none;
    text-align: center;
    color:grey;
}

::placeholder,button{
    text-align: center;
    background-color: white;
    color:grey;
    border:none;
    font-size:0.9rem;
}

input[id='fname']{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

button{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size:1rem;
}

input[id='lname'],input[id='city']{
    border-top: solid 1px rgba(128,128,128,0.25);
    border-bottom:solid 1px rgba(128,128,128,0.25);
}

button:hover {
    background-color:#D3D3D3;
}

input:hover,button{
    font-weight:bold;
}
img {
    border:solid 1px;
    border-radius:100%;
    background-color: white;
    margin-top:30px;
}

.box {
    width: 350px;
    border-radius: 5px;
    background-color: white;
    margin: 10px auto;
    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
 }
 
  #heading {
     background-color:#A683E3;
 }