.circle-size-large{
    --circle-width-max: 500px;
    --circle-font-size-ratio: 500px;
}

.circle-size-medium{
    --circle-width-max: 450px;
    --circle-font-size-ratio: 450px;
}

.circle-size-small{
    --circle-width-max: 400px;
    --circle-font-size-ratio: 400px;
}

.circle-size-verysmall{
    --circle-width-max: 400px;
    --circle-font-size-ratio: 450px;
}

.circle{
    --circle-font-size-max: calc(var(--circle-font-size-ratio) * 0.1 - 10px);

    --circle-width-L: calc(var(--circle-width-max) * 0.8);
    --circle-font-size-L: calc(var(--circle-font-size-ratio) * 0.08 - 10px);

    --circle-width-M: calc(var(--circle-width-max) * 0.6);
    --circle-font-size-M: calc(var(--circle-font-size-ratio) * 0.06 - 10px);
    
    --circle-width-S: calc(var(--circle-width-max) * 0.4);
    --circle-font-size-S: calc(var(--circle-font-size-ratio) * 0.04 - 10px);

    --circle-width: var(--circle-width-max);
    --circle-font-size: var(--circle-font-size-max);

    background-color: rgba(225, 225, 225, 0.75);
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;

    width: var(--circle-width);
    height: var(--circle-width);

    font-size: var(--circle-font-size);
}

@media (max-width: 500px){
    .circle{
        --circle-width: var(--circle-width-L);
        --circle-font-size: var(--circle-font-size-L);
    }
}
@media (max-width: 400px){
    .circle{
        --circle-width: var(--circle-width-M);
        --circle-font-size: var(--circle-font-size-M);
    }
}
@media (max-width: 300px){
    .circle{
        --circle-width: var(--circle-width-S);
        --circle-font-size: var(--circle-font-size-S);
    }
}

@media (max-height: 500px){
    .circle{
        --circle-width: var(--circle-width-L);
        --circle-font-size: var(--circle-font-size-L);
    }
}
@media (max-height: 400px){
    .circle{
        --circle-width: var(--circle-width-M);
        --circle-font-size: var(--circle-font-size-M);
    }
}
@media (max-height: 300px){
    .circle{
        --circle-width: var(--circle-width-S);
        --circle-font-size: var(--circle-font-size-S);
    }
}