:root {
  /* --custom-success: #2EC4B6;
  --custom-success-light: #d8f1ef;
  --custom-success-dark: #1A8D80;
  --custom-success-accent: #E0FBFC;
  --custom-danger: #ff9f1c;
  --custom-danger-light: #FFD6A5;
  --custom-danger-accent: #FF6B6B;
  --custom-dark:  #2F2F2F;
  --custom-light: #FAFAFA; */
  --custom-border: black;
  --custom-shadow: black;
}

[data-bs-theme="dark"] {
  --custom-border:white;
  --custom-shadow: var(--bs-success-light);
}

.brutal {
    border: 2px solid var(--custom-border)!important; 
    /* border-bottom: 3px solid var(--custom-border); 
    border-right:2px solid var(--custom-border); */
    box-shadow: 3px 3px 0 0 var(--custom-shadow);
}

.btn.brutal:hover {
    border: 2px solid var(--custom-border)!important; 
    box-shadow: none;
}

.btn.brutal:focus {
  outline: none!important;
  box-shadow: none!important;
}

@font-face {
    font-family: "Afacad Flux";
    src: url("/static/fonts/Afacad Flux/AfacadFlux-Regular.db4ccc34d6b6.ttf") format("truetype");
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Afacad Flux', 'Open Sans', 'Helvetica Neue', sans-serif;
    /* font-family: sans-serif; */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    /* padding-bottom: 50px; */
}

#app-container {
    padding: 0.25rem;
    padding-top: 1rem; 
}


@media (min-width:992px) {
    /* body {
        padding-bottom: 50px;
    } */

    #app-container {
        padding: 1.5rem;
        /* padding-top: 1rem;  */
    }
}

.modebar {
    display: none;
}

h1 {
    font-size:2.4rem;
    letter-spacing: -1px!important;
}

p, input, select, label, .alert {
    font-size:0.9rem!important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.htmx-indicator{
    opacity:0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
    opacity:1;
}

.svg-shadow {
    -webkit-filter: drop-shadow( 10px 20px 2px var(--custom-shadow));
    /* filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));  */
    filter: drop-shadow(10px 20px 2px var(--custom-shadow));
}


@keyframes pulse-color {
    0%, 100% {
        background-color: var(--bs-tertiary-color);
    }
    50% {
        background-color: var(--bs-secondary-bg);
    }
}

.placeholder {
    animation: pulse-color 2s infinite;
    border-radius: 5px;
}

h1.placeholder {
    /* Specific styles for <h1> elements with .my-class */
    height: 2.5rem!important; width:10rem!important;
}

p.placeholder {
    /* Specific styles for <p> elements with .my-class */
    height: 1rem; width:5rem
}