@font-face {
    font-family: 'Public Sans';
    font-style:  normal;
    font-weight: 100 900;
    src:         url('../fonts/PublicSans-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style:  italic;
    font-weight: 100 900;
    src:         url('../fonts/PublicSans-Italic-VariableFont_wght.woff2') format('woff2');
}

.calculator-container {
    display: flex;
    color:   #252525;
}

.calculator {
    display:   flex;
    flex-wrap: wrap;
    width:     1170px;
    margin:    auto;
}

.calculator-box {
    flex:             0 0 33.33%;
    box-sizing:       border-box;
    max-width:        33.33%;
    min-height:       350px;
    padding:          2rem;
    text-align:       center;
    background-color: #f7f7f7;
}

.calculator-box:first-child {

    border-radius: 20px 0 0 20px;
}

.calculator-box:nth-child(3) {
    border-radius: 0 20px 20px 0;
}

.calculator-box .calculator-element {
    position:      relative;
    display:       block;
    max-width:     70%;
    margin:        3.5rem auto 0;
    padding:       1rem;
    text-align:    center;
    border:        0;
    border-radius: 8px;
    height:        unset;
    font-weight:   600;
    font-size:     1.2rem;
}

.calculator-factor-label {
    padding: 1rem;
    font-size: 1.2rem;
    text-align: center;
    cursor: pointer;
}
.calculator-factor-label:has(+ .calculator-factor-check:checked) {
    color: #ffffff;
    padding: 0;
    text-align: center;
}

.calculator-factor-labelbox:has(.calculator-factor-check:checked) {
    padding:          1rem;
    color:            #ffffff;
    border-radius:    8px;
    background-color: #167bec;
}

.calculator-box:nth-child(3) .calculator-element {
    margin: auto;
}
.calculator-box:nth-child(3) .calculator-element legend {
    margin-bottom: 3.5rem;
}

.calculator-factor-check {
    display: none;
}

.calculator-label {
    font-size: 1rem;
    font-weight: 500;
}

.calculator-box .calculator-element .calculator-factor-info {
    padding:   1rem 0 1rem 1rem;
    vertical-align: middle;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.calculator-factor-infobox {
    max-width:        40%;
    margin:           -75px auto 0 0;
    padding:          1.5rem 3rem;
    text-align:       left;
    color:            #ffffff;
    border-radius:    20px;
    background-color: #252525;
}

.calculator-factor-infobox-content {
    display: flex;
    margin:  1.5rem 0;
}

.calculator-factor-infobox-content p {
    margin: 0;
}

.calculator-factor-infobox-content-number {
    font-size:    2rem;
    margin-right: 1rem;
}

.calculator-result {
    font-size:        1.3rem;
    position:         relative;
    display:          flex;
    overflow:         hidden;
    flex-direction:   column;
    justify-content:  center;
    max-width:        100%;
    margin:           -75px auto 0;
    padding:          4rem;
    text-align:       center;
    color:            #ffffff;
    border-radius:    20px;
    background-color: #167bec;
}

.calculator-result-value {
    font-size:   3rem;
    font-weight: 700;
}

/* Math Symbols */
.calculator-symbol:before {
    font-size:   2rem;
    font-weight: 700;
    position:    absolute;
    top:         1.5rem;
    left:        -5rem;
    transform:   translate(-50%, -50%);
    color:       #167bec;
}

.calculator-symbol-divide::before {
    content: '/';
}

.calculator-symbol-multiply::before {
    content: 'x';
    top: 2.5rem;
}

@media (max-width: 1100px) {
    .calculator {
        width: 335px;
    }

    .calculator-box {
        flex:       0 0 100%;
        max-width:  100%;
        min-height: 200px;
    }

    .calculator-box:first-child {

        border-radius: 20px 20px 0 0;
    }

    .calculator-box:nth-child(3) {
        border-radius: 0;
    }

    .calculator-symbol:before {
        font-size:   2rem;
        font-weight: 700;
        position:    absolute;
        top:         -7rem;
        left:        50%;
        transform:   translate(-50%, -50%);
        color:       #167bec;
    }

    .calculator-box .calculator-element {
        margin: 1rem auto 0;
    }

    .calculator-box:nth-child(3) .calculator-element legend {
        margin-bottom: 1rem;
    }
    .calculator-box:nth-child(3) .calculator-element {
        max-width: 100%;
    }

    .calculator-result {
        max-width: 100%;
        margin:    -20px auto 0;
    }

    .calculator-result-value {
        font-size: 2.5rem;
    }

    .calculator-factor-infobox {
        max-width:     100%;
        margin:        -20px auto 0 0;
        padding-top:   2.5rem;
        border-radius: 0 0 20px 20px;
    }

}