* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    background-color: #0e141b;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

main {
    background-image: linear-gradient(
        25deg,
        hsl(32deg 90% 52%) 0%,
        hsl(26deg 94% 56%) 12%,
        hsl(20deg 97% 59%) 27%,
        hsl(15deg 99% 62%) 41%,
        hsl(9deg 100% 65%) 54%,
        hsl(3deg 99% 67%) 65%,
        hsl(356deg 97% 66%) 75%,
        hsl(350deg 93% 64%) 84%,
        hsl(345deg 88% 62%) 92%,
        hsl(340deg 82% 61%) 100%
    );
    margin-bottom: 10px;
    height: 50vh; /*to make main equal height with bottom */
    padding-top: 30px;
    
}

.main-title {
    margin-bottom: 50px;
    font-size: 1.6rem;
    margin-left: 10px;
    margin-right: 10px;
}
section {
    background: #0e141b;
    color: #FBF7EE;
    padding: 15px;
}

p {
    font-size: 0.9rem;
}

input:focus {
    outline: none; /* to delete border on user input */
}

#input-unit {
    font-size: 4.5rem;
    width: 40%;    
    border: none;
    text-align: center;
    font-weight: bold;
    background-color: rgba(0, 0, 0, .01); /* to make input unit transparent */
    cursor: pointer;
}

/* to hide arrow from input number in : Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}

/* to hide arrow from input number in : Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

footer {
    background-color: #0e141b;
    color: #FBF7EE;    
    padding-top: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}
footer > a {
    text-decoration: none;
    color: #FBF7EE; 
}