& .calc-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    width: 80%;
    margin: 8px auto 32px auto;
    border: 8px outset var(--theme-primary-1-base);

    align-items:stretch;
    gap:4px;
    
    color:var(--theme-white); 
    justify-content: center;
  
    & .inner {
        border: 2px solid var(--theme-primary-1-dark);

        border-radius: 16px;
        border-top-left-radius:0px;
        border-top-right-radius:0px;

        padding: 0px;

        background: linear-gradient(
            -15deg,
            var(--theme-primary-1-dark),
            var(--theme-primary-1-light),
            var(--theme-primary-1-dark)
        );
    }

    & .calc-layer {
        padding:0px;

        border-top-left-radius:0px;
        border-top-right-radius:0px;

        & .calc-section {
            flex-grow:1;
            padding:8px;
        }
    }

    & .field-label {
        color:var(--theme-black);
        text-align:right;
        align-self:center;
    }

    & .stat {
        font-size:24px;
    }
}

.avatar {
    position: relative;
    max-height: 100%;
    height: 256px;

    background: radial-gradient(var(--theme-gray-base), var(--theme-gray-dark));

    box-shadow: 8px 8px 8px var(--theme-gray-dark);
    border: 3px outset var(--theme-white);
    border-radius: 32px;    

    padding: 0px;
    margin: 8px 8px 8px 8px;

    overflow: hidden;
    z-index: 1;

    & img {
        position: relative;

        height: 256px;
        width: 256px;

        z-index: 3;
    }
}

& .stat {
    width: 128px;

    border: solid 2px var(--theme-accent-2-base);
    background: var(--theme-black);
    border-radius: 8px; 
    letter-spacing: 2px;
    align-content: center;
    color: var(--theme-white);

    text-align: center;
    padding:4px;
}