@mixin botemania-variables() {
    $primary-font-family: 'futura-pt',sans-serif !global;
    $secondary-font-family: 'futura-pt',sans-serif !global;
    $body-font-family: 'arial',sans-serif !global;

    $primary-color: #fe7d1e !global;
    $primary-color-dark: #f5c9aa !global;
    
    $secondary-color: #45a80c !global;
    $secondary-color-dark: #b1e293 !global;

    $tertiary-color: #D3D3D3 !global;
    $tertiary-color-dark: #D3D3D3 !global;
    
    $light-color: white !global;
    $body-font-color: black !global;
}
@mixin botemania-overrides() {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-transform: uppercase;
        color: $primary-color;
    }
    
    .btn {
        border: solid 1px $primary-color-dark;
        border-radius: 6px;
        color: $light-color;
        font-weight: bold;
        font-family: $primary-font-family;
        background: linear-gradient(to bottom, #ffd859, #ffbf43);
        border-radius: 5px;
        text-transform: uppercase;
        &.btn-noborder {
            border-top: 1px solid white;
            color: darken($gray-color, 10%);
            border: 1px solid white;
            background: $gray-color-light;
        }
        &.btn-primary {
            color: black;
            border:  solid 1px black;
            background: white;
            &:focus,
            &:hover {
                color: black;
                border:  solid 1px black;
                background: white;
            }
        }
    }
    
    .pagination {
        .page-item {
    
            a {
                background: $primary-color-dark;
              }
    
            &.active {
                a {
                    background: $primary-color;
                }
              }
    
        }
    }
    .unicorn-content {
        .grids {
            &-panel {
                background: none;
                border-top: 3px solid $primary-color;
                border-bottom: 3px solid $primary-color;
              }
        }
    }
    
    .unicorn-overlay {
        .grids {
            color: white;
            &-panel {
                background: black;
                .unicorn-content {
                    color: white;
                }
              }
        }
        .btn {
            text-transform: uppercase;
    
            &.btn-primary {
                color: white;
                border: 1px solid white;
                background: darken(rgba(255, 255, 255, 0.8), 85%);
            }
        }
    }
    
}