* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
body {padding : 10px;
    line-height: 1.6;
    overflow-x: hidden;
     font-family: 'Roboto', sans-serif;
    font-size: 4vw;
    background-repeat: none;
    background-size: cover;
     background: radial-gradient(circle, black, #5C8374, #93B1A6, #93B1A6, #183D3D);
}
header { 
   text-align: center;
   top: 0;
    width: 100%;
   height: auto;
   padding: 20px;
}
form {
    background: linear-gradient(to right, #93B1A6, #183D3D);
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: .3em;
     border: 1px solid #183D3D;
    background-color: #f0f0f0;
 }
hr {
   background-color: #183D3D;
    margin: .2em;
    width: 100%;
}
input[type=number] {
    width: 100%;
    padding: 11px;
    border-radius:  1px solid #ccc;
    box-sizing: border-box;
 }
 input:focus {
   outline: red;
 }

 label {
    padding: 12px 12px 12px 0;
    font-size: 5vw;
    font-weight: bold;
 }
 button {
    background: linear-gradient(to right, grey, #333333, black);
    color: white;
    padding: 12px 10px;
    cursor: pointer;
    float: right;
    margin-top: 5px;
    font-size: 16px;
 }

 button:hover {
    background: linear-gradient(to right, whitesmoke, snow, white);
    color: black;
 }
#displayLabel {
   text-align: center;
   display: block;
   background: grey;
   color: white;
   font-weight: bold;
   padding: 18px 10px;
}

.para {
   display: block;
   padding: 10px 0;
   text-align: center;
   font-size: 5vw;
   color: #333;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.para:hover {
   color: black;
}
 .leftCol, 
 .rightCol {
    float: left;
 }

    .leftCol, .rightCol, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }

 .row::after {
    content: "";
    display: table;
    clear: both;
 }
main {
   padding:  .9em;
   margin: 0 auto;
   max-width:800px;
}
 footer { grid-area: footer;
   height: auto;
   width: 100vw;
   text-align: center;
   bottom: 0;
 }

 @media (min-width:600px) and (max-width:1024px) {

    body {    font-size: 1vw;
    }

    .leftCol {
         width:42%;
      }
      label{
         font-size: 1vw;
        }
     .rightCol {
         width: 58%;}
         .para {
            font-size: 1vw;
         }
 }
 @media screen and (min-width:1025px){
 body {    font-size: 1.5vw;    
}
    .leftCol {
        width:45%;
     }
   .para {
      font-size: 1.4vw;
   }
    .rightCol {
        width: 55%;}

        label{
         font-size: 1.1vw;
        }
 }