* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 10px;
}
body {
    font-family:'Times New Roman', Times, serif;
    /* background-color: grey; */
}
p{
    font-size:1.6rem;
    line-height: 1.5;
}
img{
    width: 100%;
}

/* css reset ends here */

.container {
    max-width: 900px;
    margin:0 auto;
    padding: 0 20px;
}
.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.box{ /* modifier class for the container */
   width:40rem;
   background: #094680;
   padding:2rem;
   color:white;
}
h1 {
    font-size: 3rem;
    text-align:center;
}

form {
    padding: 1rem 0;
    font-size: 1.6rem;
}

form > * {
    margin-bottom: 1rem;
}

form input, .btn {
    padding: 1rem;
    width: 100%;
    font-size: 1.6rem;
}

.btn,.reset {
    background: #ff0000;
    color:white;
    border:none;
    outline: none;
    cursor: pointer;
}

.result{
    padding: 1rem;
    font-size: 2rem;
}

.reset{
padding: 1rem;
background-color:red;
margin: 15px 0;
display: none;;
} 
/* loading image styling: note its classes are created inside javascript using innerHTML*/

.loader-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    background:white;
    width:5rem;
}