button {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.a__button__video {
    width: fit-content;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 5px 20px;

    font-size: 1rem;
    font-weight: bold;

    color: var(--button-color-text, var(--text-button-default));
    background-color: var(--button-color-pastel, var(--color-button-default-1));
    box-shadow: 0 0 2rem var(--button-color-bright, var(--color-button-default-2));
    transition: 200ms;

    border-radius: 0.5rem;

    cursor: pointer;

    text-decoration: none;
}

.a__button__video__inactive {
    opacity: 0.7;
    pointer-events: none;
}

.a__button__video:hover {
    background: var(--button-color-pressed, var(--color-button-default-3));
}

.a__button__video:active {
    box-shadow: none;
}

.button__reset {
    width: fit-content;

    margin-top: 0.5rem;
    padding: 5px 20px;

    font-size: 1rem;
    font-weight: bold;

    background: var(--button-color-pastel, var(--color-button-default-1));
    color: var(--button-color-text, var(--text-button-default));
    box-shadow: 0 0 2rem var(--button-color-bright, var(--color-button-default-2));
    transition: 200ms;

    border: none;
    border-radius: 0.5rem;

    cursor: pointer;
}

.button__reset:hover {
    background: var(--button-color-pressed, var(--color-button-default-3));
}

.button__reset:active {
    box-shadow: none;
}

.button__primary {
    width: 50%;
    height: 50px;

    font-size: 1.5rem;
    font-weight: bold;

    background: var(--button-color-bright, var(--color-button-default-2));
    color: var(--button-color-text, var(--text-button-default));
    box-shadow: 0 0 2rem var(--button-color-bright, var(--color-button-default-2));
    transition: 200ms;

    border: none;
    border-radius: 1rem;

    cursor: pointer;
}

.button__primary:hover {
    background: var(--button-color-pressed, var(--color-button-default-3));
}

.button__primary:active {
    box-shadow: none;
}

.button__secondary {
    position: relative;

    width: 50%;
    height: 50px;

    font-size: 1.5rem;
    font-weight: bold;

    background-color: var(--button-color-bright, var(--color-button-default-2));
    transition: 600ms;

    border-radius: 1rem;
    border: none;

    cursor: pointer;
}

.button__secondary::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;

    background-color: var(--button-color-bg, var(--color-main));
    border-radius: calc(1rem - 3px);

    border: none;
}

.button__secondary::after {
    position: relative;
    content: attr(data);
    color: var(--button-color-bright, var(--color-button-default-2));
}

.button__secondary:hover {
    box-shadow: 0 0 1.5rem var(--button-color-bright, var(--color-button-default-2));
    background-color: var(--button-color-pressed, var(--color-button-default-3));
    transition: 200ms;
}

.button__secondary:active {
    background-color: var(--button-color-pressed, var(--color-button-default-3));
    box-shadow: none;
}

@media (max-width: 768px) {
    .button__primary {
        font-size: 1rem;
    }

    .button__secondary {
        font-size: 1rem;
    }
}