.f-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    padding: 4px 12px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 0;
    cursor: pointer;
}

.f-btn-border.f-red {
    margin: 2px;
    padding: 2px;
    display: inline-block;
    width: auto;
    outline: 2px solid rgb(178,8,55);
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.5);
}

    .f-btn-border.f-red:hover {
        outline: 2px solid rgb(178,8,55);
        background-color: rgba(178,8,55,.6);
        transition: background-color .5s;
        -webkit-transition: background-color .5s;
        -o-transition: background-color .5s;
        -moz-transition: background-color .5s;
        transition: box-shadow 0.3s ease-in-out;
        transition: -webkit-box-shadow 0.3s ease-in-out;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,.5);
        -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.5);
    }

.f-red {
    background-color: rgb(178,8,55);
}

.f-btn-border.f-dark {
    margin: 2px;
    padding: 2px;
    display: inline-block;
    width: auto;
    outline: 2px solid rgba(45,45,45,1);
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.5);
    transition: background-color 0.3s ease-in-out;
}

    .f-btn-border.f-dark:hover {
        outline: 2px solid rgba(45,45,45,1);
        background-color: rgba(45,45,45,.6);
        transition: box-shadow 0.3s ease-in-out;
        transition: -webkit-box-shadow 0.3s ease-in-out;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,.5);
        -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.5);
    }

.f-dark {
    background-color: rgba(45,45,45,1);
}

.f-btn:focus {
    outline: none;
}

.f-btn:active {
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2);
}