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

:root {
 
    --background: #192a56;
    --panel-bg: #2f3640;
    --font-color: #f5f6fa;
}

body {
}

#main-content {
    color: #333;
    font-size: 2rem;
}

button {
    font-size: 1.1rem;
}
/* UTILITIES */
.mr-2 {
    margin-right: 1rem;
}

.container {
    width: 100%;
    padding: 2rem;
} 

.container *.row {
    padding-bottom: 2rem;
}

.row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    margin-bottom: 2rem;
}

h1 {
    text-align: center;
    font-weight: bold;
    font-size: 4rem;
}

.result {
    position: relative;
}

.ans {
    border: 1px solid #fff;
    position: absolute;
    top: 0;
    right: 0;
    height: 90%;
    width: 30%;
    color: #fff;
    font-weight: bold;
    padding-left: 0.5rem;
} 

.clr {
    position: absolute;
    right: 1%;
    padding: 0;
}


#volt, #curr, #resist {
    overflow: hidden;
}
@media(min-width: 1391px) {
    .clr {
        position: absolute;
        bottom: 3px;
    }
}
@media (max-width: 1500px) {
    .ans {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 1390px) {
    .row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        position: relative;
        margin-bottom: 2rem;
    }
    .ans {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 40%;
        height: 90%;
        margin-bottom: 2rem;
        padding-bottom: 0;
    }
    .clr {
        position: absolute;
        bottom: 0;
        width: max-content;
    }
    button {
        font-size: 1rem;
        padding: .5rem;
        width: 10%;
    }
    .result {
        margin-top: 1.5rem;
        display: grid;
        grid-column: 1/3;
    }
    .mr-2 {
        position: absolute;
        bottom: 0;
        right: 50%;
        width: max-content;
    }
}

@media(max-width: 672px) {
    .current1, .resist1, .volt2, .resist2, .volt3, .current3 {
        display: grid;
        grid-column: 1/3;
    }
    .ans {
        display: grid;
        grid-column: 1/3;
    }
    .result >span {
        visibility: hidden;
    } 
       .mr-2  {
        left: 0;
    }
    input {
        color: #333;
    }
}