:root {
  --background: rgb(0, 0, 0); /*rgb(249, 204, 24) */
  --primary: rgb(244, 195, 18); /* rgb(249, 204, 24); */
  --secondary: rgb(246, 226, 137); /*rgb(251, 239, 171)*/
  --dark: black;
  --bright: rgb(255, 255, 255);
  --paper:  rgb(235, 223, 197);
  --date: rgb(185, 38, 38); /*rgb(105, 58, 139)*/
  --sub-date: rgb(178, 178, 178);/*rgb(134, 58, 139)*/
  --event-text: rgb(65, 2, 2);
  --event-text-subtle: rgb(0, 0, 0);
  --border: black;
  --sween: rgb(37, 97, 71);
  
  --vertical-width: 1096px;

    font-family: 'Times New Roman', Times, serif;
}

@font-face { font-family: Ruritania; src: url('font/Ruritania.ttf'); } 
@font-face { font-family: Miki; src: url('font/miki-nice-ainjoo.otf'); } 
@font-face { font-family: Unifraktur; src: url('font/UnifrakturMaguntia21.ttf'); } 


html {
    height: 100%;
}
body {
    background-color: var(--dark);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

header {
    text-align: center;
}

header h1 {
    margin: 20px;
    margin-bottom: 40px;
    filter: invert(1);
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

/* Header resizing */
@media screen and (max-width: 400px) {
    header img {
        width: 88%;
        height: auto;
        margin: 0;
    }
} 

    nav {
        display: none;
    }


/* Desktop sections */
/* @media screen and (min-width: 1096px) {


} */

/* Mobile Scroll */
/* @media screen and (max-width: 1095px) {
    nav {
        display: flex;
        justify-content: space-around;
        background-color: var(--dark);
        box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 1);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .otd-section__title {
        display: none;
    }

    main {
        flex-direction: column;
        height: auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        flex: 0.8 1 auto;
    }
} */

a {
    text-decoration: none;
}


.title-text { 
    position: relative;
    box-sizing: border-box;
    padding: 5px;
    margin: 0;

    color: var(--dark);

    font-family: Ruritania;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    font-weight: 100;
    font-style: italic;
    line-height: 2em;


    width: 100%;


    text-align: center;
    transition: color 0.2s;

}

.title-text--large {
    font-size: 3.5rem;
    margin: 0;
}

.header-line {
   color: var(--primary);
    margin-bottom: 50px;
}

.nav-title {
    flex: 1 1 auto;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.state-enabled {
    color: var(--primary);
    font-size: 2em;
}

.state-disabled {
    color: var(--bright);
    font-size: 1.2em;
    transition: font-size 0.2s;
}

.state-disabled:hover {
    cursor: pointer;
    font-size: 1.9em;
}




.otd-section {
    width: 500px;
    margin: 25px 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: fit-content;
    background-color: var(--primary);

    border-radius: 15px;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.3); /* shadow */
    /* border-width: 30px;
    border-style: solid;
    border-image: url("/img/border-white-gritt.png") 60 fill repeat;*/

/* control the size*/
  /* --s: 73px; 
  --c1: #fff0d4;
  --c2: #ddd0b5;
  --c3: #f9e295;
  
  --_g: var(--c1) 10%,var(--c2) 10.5% 19%,#0000 19.5% 80.5%,var(--c2) 81% 89.5%,var(--c3) 90%;
  --_c: from -90deg at 37.5% 50%,#0000 75%;
  --_l1: linear-gradient(145deg,var(--_g));
  --_l2: linear-gradient( 35deg,var(--_g));
  background: 
    var(--_l1), var(--_l1) calc(var(--s)/2) var(--s),
    var(--_l2), var(--_l2) calc(var(--s)/2) var(--s),
    conic-gradient(var(--_c),var(--c1) 0) calc(var(--s)/8) 0,
    conic-gradient(var(--_c),var(--c3) 0) calc(var(--s)/2) 0,
    linear-gradient(90deg,var(--c3) 38%,var(--c1) 0 50%,var(--c3) 0 62%,var(--c1) 0);
  background-size: var(--s) calc(2*var(--s)/3); */
}

.otd-section--social {
    width: fit-content;
}
.otd-section--social h2{
    width: 100%;
}

.otd-section--gallery {
    width: min(500px, 95dvw);
}

/* .otd-section__title{


} */

nav a {
    text-decoration: none;
}


.otd-section__container {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    margin: 0;
    border-radius: 15px;
    box-shadow: inset -2px 8px 12px 1px rgba(252, 206, 42, 0.2); /* highlight */
    
   
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 1;
    background-color: var(--dark);

    /* background-color: rgb(221, 224, 234) ; */
    /* background-image: radial-gradient(var(--dark) 15%, transparent 16%),
    radial-gradient(var(--dark) 15%, transparent 16%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px; */

}

.otd-section__container--events {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.otd-section__container--events a:link{
    text-decoration: none;
}

.otd-section__container--events a:visited{
    text-decoration: none;
}

.otd-section__container--music {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    padding-bottom: 10px;
}


.otd-section__container--social {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    width: fit-content;
}

.otd-event > a {
    font-size: 1rem;
    box-sizing: border-box;
    /* border: 0.5em solid var(--bright); */
    background-color: var(--paper);
    color: var(--dark);
    padding: 0.5em 0.5em 0.3em 0.5em;

    display: flex;

    margin: 10px;
    box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.5);
}

.otd-event:not(:has(> a)) {
    font-size: 1rem;
    box-sizing: border-box;
    /* border: 0.5em solid var(--bright); */
    background-color: var(--paper);
    color: var(--dark);
    padding: 0.5em 0.5em 0.3em 0.5em;

    display: flex;

    margin: 10px;
    box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.5);
}

.otd-event__date {
    grid-area: date;
    background-color: var(--primary);
    width: 6em;
    height: 6em;
    margin: 0;
    
    text-align: center;
 
}

.otd-event__date--month{ 
    text-transform: uppercase;
    font-size: 0.9em;
    display: block;
    letter-spacing: 1em;
    text-indent: 1em;
    margin: 0 auto;
    margin-top: 0.5em;
    font-weight: 900;
}
.otd-event__date--day{ 
    font-size: 4em;
    font-family: Unifraktur;
}


.otd-event__main-info {
    grid-area: main;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 0;
    margin-left: 1em;
    width: 100%;
}


.otd-event__location {
    margin: 0;
    text-align: center;
}

.otd-event__lineup {
    margin: 0;
    font-size: 0.8em;
    margin-top: 0.3em;
    color: var(--event-text);
}

.otd-event__description {
    margin: 0;
    font-size: 0.8em;
    margin-top: 0.5em;
    color: var(--event-text-subtle);
}

.otd-event__additional {
    margin: 0;
    font-size: 0.8em;
    margin-top: auto;
    text-align: right;
    color: var(--event-text);
}

.otd-event__time-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.otd-event__doors {
    margin: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    font-size: 0.8em;
    width: 100%;
    text-align: center;
    background-color: var(--sub-date);
}


.diamondButton {  
    width: 80px;
    height: 80px;
    transform: rotate(0.125turn);
}

.diamondButton span {
    transform: rotate(-0.125turn);
}

/* .diamondButton:hover {
    filter: drop-shadow(5px 2px rgba(0,0,0,0.5)) !important; 
} */

.coolButton {
    box-sizing: border-box;
    background-color: var(--dark); /*brown*/

    border: 20px solid var(--bright);
    border-style: solid;
    border-radius: 15px;
    border-image: url("img/border-white-gritt.png") 60 fill repeat; 
    filter: brightness(0.9);

    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bright);
    margin: 20px;
    flex-shrink: 0;
    transition: box-shadow 0.15s, border-width 0.1s, width 0.5s, height 0.5s, color 0.2s, font-weight 0.2s, border-color 0.1s;
    text-decoration: none;
    font-weight: 300;
    box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.11);

}


.coolButton:hover {
    box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.25);
    border-width: 35px;
    color: var(--primary);
    font-weight: 900;
}


.coolButton:active {
    box-shadow: 4px 4px 16px 0 rgba(0,0,0,0.3);
}

.bigButton {
    width: 80%;
    height: 80px;
}

footer {
    margin-top: 50px;
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 1.1em;
    color: var(--bright);
    text-align: center;
    border-top: 1px solid var(--primary);
    width: fit-content;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
}

footer p {
    color: var(--paper);
}

footer a {
    color: var(--primary);
}



.invisible-ink {
    opacity: 0;
    transition: opacity 1s;
}

.invisible-ink:hover {
    opacity: 1;
}


.image-gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 10%;
    box-sizing: border-box;
}

.image-gallery img.ver{
    width: calc(50% - 4px);
    height: auto!important;
}
.image-gallery img.hor{
    width: 100%;
    height: auto!important;
}
.image-gallery img.squ{
    width: calc(50% - 4px);
    height: auto!important;
}

.otd-section__container--gallery.image-gallery {
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 0px;
    flex-wrap: nowrap;
    height: 250px;
    overflow-x: scroll;      /* scroll instead of expanding */
    overflow-y: visible;
}

.otd-section__container.image-gallery.otd-section__container--gallery {
  padding: 0 10px;
  gap: 10px;
  
}

.otd-section__container--gallery img{
    border-radius: 5px;
    margin: 0 !important;
    padding: 0;

    transition: transform 0.6s;
}

.otd-section__container--gallery img:hover{
    transform: perspective(20rem) rotate3d(1,1,1, 0.5deg) scale(1.02);
}


.otd-section__container--gallery img.ver{
    width: auto!important;
    height: 92%!important;
}
.otd-section__container--gallery img.hor{
    width: auto!important;
    height: 92%!important;
}
.otd-section__container--gallery img.squ{
    width: auto!important;
    height: 92%!important;
}

.fade-in {
  transform: scale(0.95);
  transition: transform 0.6s ease;
}

.fade-in.visible {
  transform: scale(1);
}

.color-text {
    color: var(--primary)
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tall-100 {
    height: 100px;
}

.block-anchor {
    display: block;
    width: 100%;
    overflow: visible;
}

.circle-crop {
    border-radius: 50%;

}

/* Collumn Image Gallery */
/* 
.image-gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.image-gallery img.ver{
    width: calc(50% - 4px)!important;
    height: auto!important;
}
.image-gallery img.hor{
    width: 100%!important;
    height: auto!important;
}
.image-gallery img.squ{
    width: 100%!important;
    height: auto!important;
} */