body {
    height: 100vh;
    font-weight: bold;
    font-size: 1rem;
    background-color: rgba(36, 36, 36, 1);
    color: #000000d1;
    font-family: 'Iceberg', cursive;
}

/* Global variables */
:root {
    --c-33: calc(100% / 3);
    --c-66: calc(100% / 1.5);

    --border-color: #464646;
    --custom-light-80: rgba(255, 255, 255, 0.8);

    --button-dark: rgba(0, 0, 0, 0.5);
    --button-blue: rgba(39, 176, 150, 0.5);
    --button-light: rgba(255, 255, 255, 0.5);
}
#varLeft, #varMid, #varRight, #result {
    overflow: hidden;
}

#mainCol {
    background-image: url(../img/920426.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
}
button {
    font-weight: bold;
    font-size: 2rem;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
button:hover {
    background-color: #00000085;
}




.c-c-dark-btn {
    background-color: var(--button-dark);
    color: white;
}
.c-c-blue-btn {
    background-color: var(--button-blue);
    color: #000000d1;
}
.c-c-light-btn {
    background-color: var(--button-light);
    color: #000000d1;
}





/* Custom border */
.c-default-b {
    border: 1px solid var(--border-color);
    border-radius: .25rem;
}
/* Custom background color */

.c-h-33 {
    height: var(--c-33);
}
.c-h-66 {
    height: var(--c-66);
}
.c-h-70 {
    height: 70%;
}
.c-h-90 {
    height: 90%;
}
/* Custom width */
.c-w-33 {
    width: var(--c-33);
}
.c-w-90 {
    width: 90%;
}
.c-w-95 {
    width: 95%;
}
.c-w-975 {
    width: 97.5%;
}


/* @media screen and (max-width: 500px) {
    button {
        font-size: 2rem;
    }
} */