@charset "utf-8";

:root {  
    --summer-dark:#343136;
    --summer-mid:#CC899D;
    --summer-bright:#BC5E7A;
    --summer-light:#E6E0D3;  
    --winter-dark: #1A232E;
    --winter-mid:#A3B1C2;
    --winter-bright:#3e6dc4;
    --winter-light: #F0F4F8;
    --winter-darkcontrast: #15375E;
    --autumn-dark: #322F2B;
    --autumn-darkcontrast: #000000;
    --autumn-mid:#C8A655;
    --autumn-bright:#bb7737;
    --autumn-light: #FFEDC3;
    --spring-dark: #324043;
    --spring-mid:#B6C472;
    --spring-mid70:#B6C472B3;
    --spring-bright:#619735;
    --spring-light: #DED296;
    }

/********************* SEASONAL PALLLETTE ******************/
.season-spring { background-color: var(--spring-mid); }
.season-summer { background-color:var(--summer-mid); }
.season-autumn { background-color:var(--autumn-mid); }
.season-winter { background-color:var(--winter-mid); }

body.bg-spring .button.changes { background-color: var(--spring-mid); color: var(--spring-dark); border: 2px solid var(--spring-dark);}
body.bg-summer .button.changes { background-color: var(--summer-mid); color: var(--summer-dark);border: 2px solid var(--summer-dark);}
body.bg-autumn .button.changes { background-color:var(--autumn-mid); color: var(--autumn-dark); border: 2px solid var(--autumn-dark);}
body.bg-winter .button.changes { background-color:var(--winter-mid); color: var(--winter-dark);border: 2px solid var(--winter-dark); }

body.bg-spring .button.changes svg path { fill: var(--spring-dark); }
body.bg-summer .button.changes svg path { fill: var(--summer-dark); }
body.bg-autumn .button.changes svg path { fill: var(--autumn-dark); }
body.bg-winter .button.changes svg path { fill: var(--winter-dark); }
body.bg-spring .button.changes:hover svg path {fill: var(--spring-light); }
body.bg-summer .button.changes:hover svg path {fill: var(--summer-light);}
body.bg-autumn .button.changes:hover svg path {fill: var(--autumn-light);}
body.bg-winter .button.changes:hover svg path {fill: var(--winter-light);}

body.bg-spring .button.changes:hover { background-color: var(--spring-dark); color: var(--spring-light); border: 2px solid var(--spring-mid); }
body.bg-summer .button.changes:hover { background-color: var(--summer-dark); color: var(--summer-light);border: 2px solid  var(--summer-mid);}
body.bg-autumn .button.changes:hover { background-color:var(--autumn-dark); color: var(--autumn-light); border: 2px solid  var(--autumn-mid);}
body.bg-winter .button.changes:hover { background-color:var(--winter-dark); color: var(--winter-light); border: 2px solid  var(--winter-mid);}

.season-buttons {display: flex; width:100%; padding: 10px 0; flex-direction: row; gap: 10px;}
.season-buttons .doublebutton {display:flex; flex-direction: column; flex-grow: 1; gap: 10px;}
.season-buttons .button-spring, .season-buttons .button-summer,.season-buttons .button-autumn, .season-buttons .button-winter { flex-grow: 1; }

/********************* SEASON SELECTORS ******************/
.button-spring, .button-summer, .button-autumn, .button-winter {padding:3px; border-radius: 8px; font-weight: 700;font-family: CinzelBold, Times, serif; line-height: normal; text-align: center;}
.inside {border-radius: 6px; padding: 5px 5px;}

.button-spring {background-color: var(--spring-mid); border: 1px solid var(--spring-mid);}
.button-spring:hover, .button-spring.active {background-color: transparent; border: 1px solid var(--spring-light);}
.button-spring:hover {cursor: pointer;}
.button-spring .inside {background-color: var(--spring-mid); color: var(--spring-dark);}
.button-spring:hover .inside {background-color: var(--spring-bright); color: var(--summer-light);}

.button-summer {background-color: var(--summer-mid); border: 1px solid var(--summer-mid);}
.button-summer:hover, .button-summer.active {background-color: transparent; border: 1px solid var(--summer-light); }
.button-summer:hover {cursor: pointer;}
.button-summer .inside {background-color: var(--summer-mid); color: var(--summer-dark);}
.button-summer:hover .inside {background-color: var(--summer-bright); color: var(--summer-light);}

.button-autumn {background-color: var(--autumn-mid); border: 1px solid var(--autumn-mid);}
.button-autumn:hover, .button-autumn.active {background-color: transparent; border: 1px solid var(--autumn-light);}
.button-autumn:hover {cursor: pointer;}
.button-autumn .inside {background-color: var(--autumn-mid); color: var(--autumn-dark);}
.button-autumn:hover .inside {background-color: var(--autumn-bright); color: var(--autumn-light);}

.button-winter {background-color: var(--winter-mid); border: 1px solid var(--winter-mid);}
.button-winter:hover, .button-winter.active {background-color: transparent; border: 1px solid var(--winter-light);  }
.button-winter:hover {cursor: pointer;}
.button-winter .inside {background-color: var(--winter-mid); color: var(--winter-dark);}
.button-winter:hover .inside {background-color: var(--winter-bright); color: var(--winter-light);}

.button-spring:hover , .button-summer:hover , .button-autumn:hover , .button-winter:hover {filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}

.search-tab .twoevencol .season-buttons{width:100%; max-width: 100%;}
@media (min-width: 750px)
{
.season-buttons .doublebutton {flex-direction: row;}
}