.primary > div { 
    display:                flex;
    flex-direction:         row;
    flex-wrap:              wrap;
    align-items:            flex-start;
    gap:                    var(--gap);}

.primary > div > div {
    height:                 min(auto, 100%);
    flex-basis:             45%;
    flex-grow:              1;
    display:                flex;}

    /* I could tecnically change all of this to use 
    display: grid, it would make a lot more sense 
    taking into account the mess this code is*/

    .calc {
        height:                 auto;
        min-width:              fit-content;
        gap:                    var(--gap);
        padding:                var(--gap);
        flex-direction:         column;
        justify-content:        center;
        align-items:            center;}

        .buttons {
            width:                  fit-content;
            display:                flex;
            flex-wrap:              wrap;
            flex-direction:         row;
            justify-content:        right;
            align-items:            stretch;
            max-width:              calc((70px * 4) + ( 5 * (4px * 2) ) );}

            button {
                border:                 0;
                margin:                 5px;
                height:                 70px;
                width:                  70px;
                transition:             0.05s background-color ease-in;}

                #equal { flex-grow: 1; }

        .viewing {
            border-top:             0;
            border-left:            0;
            border-right:           0;
            display:                flex;
            align-items:            center;
            width:                  calc((70px * 4) + ( 2 * (15px) ));
            height:                 3em;}

            .viewing > #output {
                padding:                0.5em;
                font-size:              40px;
                text-align:             right;
                text-overflow:          clip;
                overflow-y:             auto; 
                width:                  100%;}

    .info {
        min-width:                  50%;
        flex-shrink:                1;
        flex-direction:             column;}