@font-face {
    font-family: 'Icons';
    src: url('/wp-content/themes/alphamalementality/assets/fonts/icons.woff2') format('woff2'),
         url('/wp-content/themes/alphamalementality/assets/fonts/icons.woff') format('woff'),
         url('/wp-content/themes/alphamalementality/assets/fonts/icons.ttf') format('truetype'),
         url('/wp-content/themes/alphamalementality/assets/fonts/icons.svg') format('svg');
}

h1 {
    margin-bottom: 2rem;
}

h2 {
    margin-top: 5rem;
}

.wp-block-button__link {
    display: block;
    text-align: center;
    font-size: 2.8rem;
    color: #fff;
    margin: 4rem auto 2rem auto;
    padding: 1.2rem 5rem .9rem 5rem;
    background: #c10000;
    letter-spacing: .1rem;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    font-family: 'CallofOpsDuty', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    text-decoration: none;
    position: relative;
    border-radius: 0rem;
    width: fit-content;
}

.wp-block-button__link:before, .wp-block-button__link::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 209.91 209.16' fill='%23ffffff88' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M41.89 63.51h21.06v82.14H41.89z' opacity='.8'/%3E%3Cpath d='M21.89 63.51h14.03v82.14H21.89z' opacity='.6'/%3E%3Cpath d='M8.61 63.51h7.02v82.14H8.61z' opacity='.4'/%3E%3Cpath d='M0 63.51h2.1v82.14H0z' opacity='.2'/%3E%3Cpath d='M209.91 104.58L121.79 0v63.51H66.24v82.14h55.55v63.51l88.12-104.58z'/%3E%3C/svg%3E");
    height: 2.4rem;
    content: "";
    aspect-ratio: 1/1;
    opacity: .8;
    background-repeat: no-repeat;
    transition: .3s ease;
}

.wp-block-button__link::after {
    left: auto;
    right: 1rem;
    transform: translateY(-50%) rotate(180deg);
}

.wp-block-button__link:hover {
    box-shadow: inset 0 0 2rem #ff0000, 0 0 .5rem #ff0000ae;
    background: #ee0000;
    text-shadow: 0.2rem -0.1rem 0.2rem rgb(107 0 0 / 70%);

}

.wp-block-button__link:hover::before {
    left: 2rem;
}

.wp-block-button__link:hover::after {
    right: 2rem;
}

.article-content {
    padding: clamp(5.5rem, calc(5.5rem + ((1vw - 0.32rem) * 2.2727)), 7.5rem) 1rem;
    max-width: 800px;
    margin: auto;
    min-height: 80vh;
}

.article-content p {
    margin-block-start: 1rem;
    margin-block-end: 2rem;
}

.article-content p a {
    color: #0000ff;
    background: #e6f2ff;
    background-image: linear-gradient(#009fffde, #009fffde), linear-gradient(#009fffde, #009fffde);
    background-size: 2rem .2rem, 100% .2rem, 0 .2rem;
    background-position: calc(2rem * -1) 100%, 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .2s linear, background-position .2s linear;
    padding: .4rem .4rem .1rem .4rem;
    text-decoration: none;
}

.article-content p a:hover {
    background-size: 2rem .2rem, 0 .2rem, 100% .2rem;
    background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}

.article-content ul {
    list-style: none;
}

.article-content ul li:before {
    font-family: Icons;
    content: '\e902';
    margin-right: .3rem;
    color: #d00000;
}

.article-content ol {
    counter-reset: easy-counter;
    list-style: none;
    padding-left: 4rem;
    margin-bottom: 4rem;
}

.article-content ol li {
    margin: 0 0 .5rem 0;
    counter-increment: easy-counter;
    position: relative;
}

.article-content ol li::before {
    content: counter(easy-counter);
    color: #000000;
    font-size: 2rem;
    font-weight: bold;
    position: absolute;
    --size: 3rem;
    left: calc(-1 * var(--size) - 1rem);
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    top: 0;
    transform: rotate(-7deg);
    background: #ffc939;
    border-radius: 50%;
    text-align: center;
    box-shadow: .1rem .2rem .5rem #0000002d;
}

@media only screen and (max-width: 769px) {
    .article-content ol li::before {
        --size: 2.5rem;
        font-size: 1.8rem;
    }
}