@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&family=Yuji+Syuku&display=swap');

.logo {
    font-family: "Special Gothic Expanded One", sans-serif;
    color: #eeeded;
    font-size: x-large;
}


.font {
    font-family: "Special Gothic Expanded One", sans-serif;
}

.logo:hover {
    color: #4758d6;
}

.bg-theme {
    background-color: #ea3a3a;
}

.btn-theme {
    color: #eeeded;
    background-color: #ea3a3a;
    border: none;
    border-radius: 10%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

.btn-theme:hover {
    color: #eeeded;
    background-color: #4758d6;
}

.text-theme {
    color: #eeeded;
    font-family: "Special Gothic Expanded One", sans-serif;
}

.theme {
    background-color: #ea3a3a;
    color: #eeeded;

}

.theme-active {
    color: #eeeded;
    font-family: "Special Gothic Expanded One", sans-serif;
    background-color: #4758d6;
}

a.theme:hover,
a.text-theme:hover {
    background-color: #eeeded;
    color: #ea3a3a;
}


a.theme-active:hover {
    color: #cccccc;
    background-color: #4758d6;
}

.fade-img {
    opacity: 0.9;
    filter: brightness(40%);
}

.nav-border {
    box-shadow: 0 4px 4px -4px black;
}

html,
body {
    overflow-x: hidden;
}

.open {
    color: green;
}

.inactive,
.sold-out,
.cancelled {
    color: red;
}

.footer-theme {
    color: black;
    background-color: #ffffff;
    border-top: solid 2px #ea3a3a;
}

a.footer-theme {
    color: #ea3a3a;
    background-color: none;
    border-top: none;
}

.card-img-top {
    object-fit: cover;
    height: 200px;
}

.card-max {
    max-width: 28rem;
}

.row {
    background-color: #ffffff;
}

.alt-row {
    background-color: #ea3a3a;
    color: #eeeded;
}

.top-pic {
    max-height: 600px;
    object-fit: cover;
}

.alt-item {
    background-color: #cccccc;
}

.inverse-button {
    background-color: #4758d6;
    color: #eeeded;
}

.inverse-button:hover {
    background-color: #4758d6;
    color: #ea3a3a;
}

.suggestion {
    background-color: #ea3a3a;
    color: #eeeded;
    border-bottom: 0.5px solid #eeeded;
}

.suggestion:hover {
    background-color: #4758d6;
}

#flashArea {
    background-color: white;
    /* or your default background */
    transition: background-color 0.2s ease;
    /* Smooth fade */
}

.revealed-flash {
    background-color: #009C3D !important;

}

.incorrect-flash {
    background-color: #ea3a3a !important;
}