:root {
    /* --ORANGE_LIGHT:    rgb(229,191,43 );
    --ORANGE_DARK:     rgb(253,148,38 );
    --BLUE_DARK:       rgb(30 ,154,199); */
    --PINK_LIGHT_TRANS:      rgb(255,69 ,165);
    --PINK_LIGHT:      rgb(255,69 ,165);
    --BLUE_LIGHT:      rgb(101 ,88,213);
    --GREEN_LIGHT:     rgb(192,221,11);
    --BACKGROUND:     #222529;
    --VIOLET_DARK:     rgb(101,88 ,213);
    --ORANGE_LIGHT: rgb(250, 230, 0);
    --GREEN_DARK: rgb(0, 166, 80);

}

::-moz-selection { /* Code for Firefox */
    color: var(--GREEN_LIGHT);
    background: var(--VIOLET_DARK);
}
  
::selection {
    color: var(--GREEN_LIGHT);
    background: var(--VIOLET_DARK);
} 

a {
    color: rgb(222,226,230);
}

.btn-green {
    background-color: var(--GREEN_LIGHT);
    color: var(--VIOLET_DARK);
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, 
                border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Hover state */
.btn-green:hover {
    background-color: var(--PINK_LIGHT);
    color: var(--VIOLET_DARK);
}

/* Wiggle (rotate) animation */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-6deg); }
    40% { transform: rotate(6deg); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(4deg); }
}

/* When JS adds this class */
.wiggle {
    animation: wiggle 0.8s ease-in-out;
}

.artist {
    border-color: var(--VIOLET_DARK) !important;
    border-width: 0 0 0.2rem 0 !important;
    border-style: solid !important;
}

.artist-desc {
    line-height: 1.15em;
    font-weight: 500;
    min-height: 8em;
}

.artist-desc br {
    margin-top: 1em;
    display: block;
    content: "";
}

a:hover {
    color: var(--PINK_LIGHT);
}

a:active {
    background-color: var(--VIOLET_DARK) !important;
}

body {
    font-family: Jost, sans-serif !important;
    font-size: 1.2em;
    font-weight: 500;
}

.bd-pink {
    border-color: var(--PINK_LIGHT) !important;
}

.bd-green {
    border-color: var(--GREEN_LIGHT) !important;
}

.bd-green-dark {
    border-color: var(--GREEN_DARK) !important;
}

.bd-orange {
    border-color: var(--ORANGE_LIGHT) !important;
}

.bd-blue {
    border-color: var(--BLUE_LIGHT) !important;
}

.bd-legend {
    border-width: 0 0 0 1.5em !important;
    border-style: solid !important;
}

.anim1 {
    background-image: url(media/tickets_back.png);
    background-size: 250%;
    background-repeat: no-repeat;
    background-position: center;
}

.anim2 {
    background-image: url(media/shape_zarb.png);
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: center;
}

.banner {
    background-image: url(media/back.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
}

.footer {
    background-image: url(media/back.png);
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.date-title {
    color: var(--ORANGE_LIGHT) ;
    text-shadow: 1.5px 1.5px var(--VIOLET_DARK);
}

.div-bg-display {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 300px;
}

.carou-prog-1 {
    background-image: url(media/prog/1.jpeg);
}

.carou-prog-2 {
    background-image: url(media/prog/2.jpeg);
}

.carou-prog-3 {
    background-image: url(media/prog/3.jpeg);
}

.carou-prog-4 {
    background-image: url(media/prog/4.jpeg);
}

.carou-prog-5 {
    background-image: url(media/prog/5.jpeg);
}

.artist-lake {
    background-image: url(media/prog/lake.jpg);
}

.artist-silverdust {
    background-image: url(media/prog/silverdust.jpg);
}

.artist-amongvultures {
    background-image: url(media/prog/amongvultures.jpg);
}

.artist-lostagain {
    background-image: url(media/prog/lostagain.jpg);
}

.artist-somora {
    background-image: url(media/prog/somora.jpg);
}

.artist-thetoksin {
    background-image: url(media/prog/thetoksin.jpg);
}

.artist-tokeo {
    background-image: url(media/prog/tokeo.jpg);
}

.artist-skycid {
    background-image: url(media/prog/skycid.jpg);
}

.artist-trinity {
    background-image: url(media/prog/trinity.jpg);
}

.artist-kofdemon {
    background-image: url(media/prog/kofdemon.jpg);
}

.staffing {
    background-image: url(media/staffing.jpeg);
    background-position: bottom;
}

.badge-pink {
    background-color: var(--PINK_LIGHT);
}

.badge-blue {
    background-color: var(--BLUE_LIGHT);
}

.badge-green {
    background-color: var(--GREEN_LIGHT);
}

.galerie {
    background-image: url(media/galerie.jpeg);
}

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.time_artist {
    font-weight: 300 !important;
    font-size: 1.2em;
}

.accordion-button {
    font-size: 0.8em;
}

.accordion-body {
    font-weight: 400;
}

.accordion {
    --bs-accordion-active-color: var(--GREEN_LIGHT);
    --bs-accordion-active-bg: var(--VIOLET_DARK);

}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e5bf2b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e5bf2b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.icon-align {
    height: 1em;
    vertical-align: baseline;
}

.alert-pink{
    border-color: var(--PINK_LIGHT);
    background-color: var(--PINK_LIGHT_TRANS);
    color:#fff;
  }

  .overflow-scroll {
  overflow: auto; /* better cross-browser than overflow-scroll */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS Safari */
  resize: none; /* removes draggable resize handles in Safari */
}