/*------------- Common and Utilities Style -------------*/
:root {
    --h1: 5vw;
    --h3: 2.5vw;
    --h4: 2vw;
    --p: 1.5vw;
}

p {
    /* font-size: var(--p); */
    color: lightgray;
}

/* 
h1 {
    font-size: var(--h1);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
} */

button {
    /* font-size: var(--h4); */
}

input {
    width: 100px;
    border-radius: 5px;
}

span {
    background-color: yellow;
    color: black;
}

/* ---------------- Specific Element Styles---------------- */
body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-color: #363232e0;
}

.top-section {
    width: 100vw;
    height: 40vh;
}

.top-section h1 {
    color: tomato;
}

footer {
    background-color: black;
    height: 20vh;
}

.calculation-area {
    min-width: 200px;
    max-width: 250px;
}

.calculation-area h4 {
    color: lightseagreen;
}

.selected-five {
    height: 415px;
}

/* ----------------------------------------- The End -------------------------------------- */