[un-cloak] {
    visibility: hidden;
}

html {
    scroll-padding-top: 100px;
}

mark {
    background:linear-gradient(transparent 60%,#FFBF8E 40%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

.mask-top-block {
    mask: 
        linear-gradient(#000 0 0) center / cover,
        url(../images/circle.svg) left -36px top -36px / 72px 72px no-repeat,
        url(../images/circle.svg) right -36px top -36px / 72px 72px no-repeat;
    mask-composite: subtract, add;
}

.mask-bottom-block {
    mask: 
        linear-gradient(#000 0 0) center / cover,
        url(../images/circle.svg) left -27px top / 54px 54px no-repeat,
        url(../images/circle.svg) right -27px top / 54px 54px no-repeat;
    mask-composite: subtract, add;
}

@media screen and (max-width: 767px) {
    .mask-top-block {
        mask: 
            linear-gradient(#000 0 0) center / cover,
            url(../images/circle.svg) left -20px top -20px / 40px 40px no-repeat,
            url(../images/circle.svg) right -20px top -20px / 40px 40px no-repeat;
        mask-composite: subtract, add;
    }

    .mask-bottom-block {
        mask: 
            linear-gradient(#000 0 0) center / cover,
            url(../images/circle.svg) left -15px top / 30px 30px no-repeat,
            url(../images/circle.svg) right -15px top / 30px 30px no-repeat;
        mask-composite: subtract, add;
    }
}