@import "Variables.css";

.button {
    display: inline-block;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 4em;
    padding-right: 4em;
    margin: 0 0.3em 0.3em 0;
    border-width: 0;
    border-radius: 0.2em;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 1.2em;
    font-family: Roboto-Condensed;
    font-weight: 400;
    color: var(--text-white);
    background-color: rgb(var(--color-button));
    box-shadow: inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
    text-align: center;
}

    .button:hover, .button:active {
        background-color: rgb(var(--color-button-hover));
    }

.story-button {
    font-family: Raleway;
    border: 1px solid rgba(0,0,0,.250);
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    outline: none;
    padding: 13px 23px;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    transition: box-shadow .2s,-ms-transform .1s,-webkit-transform .1s,transform .1s;
    user-select: none;
    -webkit-user-select: none;
    width: auto;
}

    .story-button:focus-visible {
        box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
        transition: box-shadow .2s;
    }

    .story-button:active {
        border-color: #000000;
        transform: scale(.96);
    }

    .story-button:disabled {
        border-color: #DDDDDD;
        color: #DDDDDD;
        cursor: not-allowed;
        opacity: 1;
    }