@import "../scss/variables";

.section-score {
    display: inline-block;
    border: solid 8px;
    border-radius: 50%;
    padding: 1% 2%;
    font-size: 88px;

    .score {
        font-weight: bold;
        margin: -20% 0;

    }

    .content {
        margin-top: -40%;
        font-size: 16px;
        margin-left: 30%;
        white-space: nowrap;
    }

    .content,
    .score {
        display: block;
        transform: rotate(-15deg);
    }

    &.three-digits {
        .score {
            margin:0% -10%;
            font-size:70px;
        }

        .content {
            margin:-33px 14px;
        }
    }

    &.four-digits {
        height: 110px;
        width: 110px;
        .score {
            margin:8% -10%;
            font-size:56px;
        }

        .content {
            margin:-33px 14px;
        }
    }
}