:root {
    --color-h: 217;
    --color-s: 35%;
    --color-l: 75%;

    --colorPrimary: hsl(var(--color-h), var(--color-s), var(--color-l));

    --color-black: hsl(0,0,0);
    --color-transparent-black: rgba(0, 0, 0, 0.9);
    --color-white: rgb(255, 255, 255); 
    --color-grey: #444;
    --color-grey-light: #555;
    --color-grey-dark: #333;

    --color-nav-active: hsl(var(--color-h), calc(var(--color-s) - 0.5%), calc(var(--color-l) - 21%));
    --color-nav-a-hover: hsl(var(--color-h), calc(var(--color-s) + 19%), calc(var(--color-l) - 18%));
    --color-nav-link_and_hover-background: hsl(var(--color-h), calc(var(--color-s) - 21%), calc(var(--color-l) - 25.5%));
    --color-a-hover_and_nav-background: hsl(var(--color-h), calc(var(--color-s) + 2.5%), calc(var(--color-l) - 15%));
    --color-a-menu-gallery-year: hsl(var(--color-h), var(--color-s), var(--color-l));
    --color-nav-link-hover: hsl(var(--color-h), calc(var(--color-s) + 9.5%), calc(var(--color-l) + 13%));
    --color-nav-a_and_zine-wrapper: hsl(var(--color-h), calc(var(--color-s) + 5.5%), calc(var(--color-l) - 11%));
    --color-zine-wrapper: hsl(var(--color-h), calc(var(--color-s) - 6%), calc(var(--color-l) - 45%));
    --color-zine-award: hsl(var(--color-h), calc(var(--color-s) + 18.5%), calc(var(--color-l) - 20%));
    --color-nav-a-border_and_zine-description-color: hsl(var(--color-h), calc(var(--color-s) - 10%), calc(var(--color-l) - 28%));
    --color-zine-award-color: hsl(var(--color-h), calc(var(--color-s) + 18.5%), calc(var(--color-l) - 20%));
    --color-a-nav-item-active-border-color: hsl(var(--color-h), calc(var(--color-s) + 7.5%), calc(var(--color-l) - 50%));
    --color-nav-a-hover-active-color_and_zine-author-color: rgb(255, 255, 255, 0.6); 
}

.year-theme-2023 {
    --color-h: 217 !important;
    --color-s: 35% !important;
    --color-l: 75% !important;
}
/*
.year-theme-2023 {
    --color-h: 34 !important;
    --color-s: 65% !important;
    --color-l: 73% !important;
}
*/
.year-theme-2022 {
    --color-h: 140 !important;
    --color-s: 43% !important;
    --color-l: 69% !important;
}

.year-theme-2021 {
    --color-h: 271 !important;
    --color-s: 51% !important;
    --color-l: 72% !important;  
}

.year-theme-2020 {
    --color-h: 210 !important;
    --color-s: 93% !important;
    --color-l: 63% !important;  
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Space Grotesk', sans-serif;
    scroll-behavior: smooth;
}

.colours {
    background-color: #b993dc; /* main background html, body --colorPrimary: hsl(140, 43%, 69%); */
    background-color: #b993dc; /* .zine-thumb-container --colorPrimary: hsl(140, 43%, 69%); */

    background-color: #6e367a; /* a.nav-item.active hsl(140, 54%, 36%); */

    border-bottom: 1px solid #914aa0; /*.nav.year hsl(140, 49%, 46%); */
    background-color: #914aa0; /* .nav a:hover hsl(140, 49%, 46%); */

    background-color: #703ca1; /* nav link hover background hsl(141, 38%, 33%); */

    background-color: #7f56a5; /* nav background hsl(142, 55%, 40%); */
    color: #7f56a5; /* link hover hsl(142, 55%, 40%); */

    color: #a869e3; /* a.menu-gallery-year hsl(140, 33%, 59%); */

    color: #bd78fe; /* nav link hover .sidepanel div hsl(140, 37%, 63%); */

    background-color: #b571c3; /* .nav a hsl(150, 37%, 44%); */
    background-color: #b571c3; /* .zine-wrapper hsl(150, 37%, 44%); */

    color: #502c47; /* .zine-wrapper hsl(102, 36%, 22%); */

    border-top: 1px solid #7a3f6c; /* .zine-award hsl(102, 36%, 45%); */

    border: 2px solid #a03e77; /* .nav a hsl(91, 43%, 38%); */
    color: #a03e77; /* .zine-description hsl(91, 43%, 38%); */

    color: #9b1664; /* .zine-award hsl(143, 49%, 33%); */

    color: #c88ed4; /* .nav a:hover hsl(143, 12%, 59%); */

    color: #edcde5; /* a.nav-item.active hsl(141, 12%, 67%); */
    color: #edcde5; /* .zine-author hsl(141, 12%, 67%); */

    border-color: #daa7ce; /* a.nav-item.active hsl(143, 70%, 74%); */

    color: black; /* .nav a */
    color: black; /* .sidepanel .close-nav-menu:hover */
    background-color: #444; /* .open-nav-menu:hover */
    background-color: #444; /* #back-to-top-button */
    background-color: #333; /* #back-to-top-button:hover */
    background-color: #555; /* #back-to-top-button:active */
    color: #fff; /* a */
    color: #fff; /* a:visited */
    color: #fff; /* .open-nav-menu */
    color: #fff; /* .sidepanel .close-nav-menu */
    color: #fff !important; /* .text-white */
    color: #fff; /* #back-to-top-button::after */
    color: #fff; /* .zine-header-section */
    color: rgba(0, 0, 0, 0.9); /* .zine-header-content */
}

a {
    color: var(--color-white);
}

a:hover {
    color: var(--color-a-hover_and_nav-background);
}

a:visited {
    color: var(--color-white);
}

ul, ol {
    margin-left: 20px;
    text-align: left;
}

.sidepanel a:hover {
    color: var(--color-nav-link-hover);
}

.open-nav-menu {
    z-index: 1;
    top: 5px;
    right: 5px;
    position: fixed;
    font-size: 20px;
    cursor: pointer;
    background-color: var(--color-a-hover_and_nav-background);
    color: var(--color-white);
    padding: 10px 15px;
    border: none;
}
  
.open-nav-menu:hover {
    background-color: var(--color-grey);
}

.sidepanel {
    min-height: 250px;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: var(--color-a-hover_and_nav-background);
    overflow-x: hidden;
    padding: 60px 0px 60px 0px;
    transition: 0.5s;
}

.sidepanel div {
    padding: 8px 32px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: var(--color-a-menu-gallery-year);
    display: block;
    transition: 0.3s;
}

.sidepanel div:hover {
    background-color: var(--color-nav-link_and_hover-background);
}

.sidepanel .close-nav-menu {
    line-height: 1;
    color: var(--color-white);
    position: absolute;
    top: 0;
    right: -12px;
    font-size: 60px;
    margin-left: 50px;
}

.sidepanel .close-nav-menu:hover {
    color: var(--color-black);
    cursor: pointer;
    background-color: transparent;
}

.accordion {
    float: right;
    opacity: 0.6;
}

.accordion img {
    height: 15px;
}

.accordion .accordion-open {

}

.accordion .accordion-closed {

}

a.menu-gallery-year {
    font-size: smaller;
    display: block;
    text-indent: 35px;
    color: var(--color-a-menu-gallery-year);
}

.select-language {
    display: inline-flex !important;
}

.select-language img {
    max-width: 60px;
    margin: 5px 40px 0px -30px;
}

.language {
    margin-top: 30px;
    font-size: 19px !important;
}

.english { display: none; }
.finnish { display: block; }

.text-align-center > * {
    text-align: center;
}

.text-align-left, .text-align-left > * {
    text-align: left;
    padding-left: 60px !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-smaller {
    font-size: smaller !important;
}

.text-larger {
    font-size: larger !important;
}

.text-x-large {
    font-size: x-large !important;
}

.spacer {
    min-height: 40px;
}

.margin-left-100px {
    margin-left: 100px;
}

.margin-left-200px {
    margin-left: 200px;
}

.margin-right-20px {
    margin-right: 20px;
}

.embedded-navigation-big img {
    width: 300px;
    height: 300px;
}

.embedded-navigation img:hover {
    width: 150px;
    height: 150px;
    background: var(--color-nav-a_and_zine-wrapper);
    -moz-border-radius: 75px; 
    -webkit-border-radius: 75px; 
    border-radius: 75px;
}

.embedded-navigation-big img:hover {
    background: var(--color-nav-a_and_zine-wrapper);
    -moz-border-radius: 150px; 
    -webkit-border-radius: 150px; 
    border-radius: 150px;
}

.search_wrap {
    height: 40px;
    float: right;
    position: relative;
    margin: 4px;
    padding: 0;
    transition: width 0.4s ease-in-out;
} 

.search_input {
    height: 100%;
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    padding-right: 60px;   
    border: none;
    border-radius: 20px;
    text-indent: 20px;
    outline: none;
    color: var(--color-black);
    background: none;
}
  
.search_input:focus {
    background: var(--color-nav-link-hover);
    cursor: text;
}

.search_button {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.5;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: opacity .4s ease-in;
}

.search_button:hover {
    border: 1px solid var(--color-a-nav-item-active-border-color);
    background: var(--color-nav-active);
    transition: background-color .4s ease-in;
}

.search_button img {
    height: 25px;
}

#back-to-top-button {
    font-size: large;
    vertical-align: middle;
    line-height: 45px;
    display: inline-block;
    background-color: var(--color-grey);
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 8px;
    right: 5px;
    transition: background-color .3s, 
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
  }

#back-to-top-button::after {
    font-weight: normal;
    font-style: normal;
    line-height: 50px;
    color: var(--color-white);
}

#back-to-top-button:hover {
    cursor: pointer;
    background-color: var(--color-grey-dark);
}

#back-to-top-button:active {
    background-color: var(--color-grey-light);
}

#back-to-top-button.show {
    opacity: 1;
    visibility: visible;
}

.zine-container {
    padding-top: 40px;
    padding-bottom: 100px;
    background-color: var(--colorPrimary);
}

.zine-page-header img, .zine-gallery-header img, .zine-header-section img, .zine-gallery-footer img {
    max-width: 1000px;
    margin: 0 auto;
    display: block;
}

.zine-more-info {
    padding: 30px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zine-more-info a img {
    max-height: 150px;
    padding: 0px;
}

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

.zine-submitting a img {
    padding: 20px;
    max-height: 200px;
}

.zine-more-info a {
    display: inline-grid;
    margin: 0px 25px;
}

.zine-page-jury {

}

.zine-header-section {
    margin: 0 auto;
    max-width: 900px;
    text-align: center;
    color: var(--color-white);
    font-size: 2.05em;
    font-family: 'Space Mono', sans-serif;
    font-style: italic;
    font-weight: 700;
    line-height: 1.6;
}

.zine-header-title {
    padding: 20px;
    margin: 20px 50px;
}

.header-subtitle {
    margin-top: -50px;
    margin-bottom: 50px;
}

.zine-header-content {
    padding: 20px;
    color: var(--color-transparent-black);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7em;
    text-align: left;
}

.zine-gallery-header {
    margin-top: 30px;
}

.zine-gallery-header img, .zine-header-section img, .zine-gallery-footer img  {
    max-height: 380px;
    padding: 30px 0px;
}

.zine-thumb-container {
    height: 100%;
    text-align: center;
    max-width: 1520px;
    margin: auto;
    padding: 10px 20px;
}

#show-more-zines {
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-size: large;
    display: block;
    color: var(--color-black);
    padding: 15px;
    border: 2px solid var(--color-nav-a-border_and_zine-description-color);
    border-radius: 30px;
    background-color: var(--color-nav-a_and_zine-wrapper);
    text-decoration: none;
}

#show-more-zines:hover {
    text-decoration: none;
    color: var(--color-a-nav-item-active-border-color);
    background-color: var(--color-nav-a-hover);
}

nav {
    margin: 30px 30px 70px 30px;
    text-align: left;
}

.nav {
    margin-top: 10px;
}

.nav-header {
    display: block;
    margin-left: 10px;
    margin-bottom: 10px;
}

.nav.year, .nav.theme {
    border-bottom: 1px solid var(--color-nav-a-hover);
    padding-bottom: 10px;
}

.nav-year-description {
    display: flex;
}

.nav-year-description span {
    margin-top: 10px;
    margin-left: 10px;
}

.zine-gallery-counter {
    display: block !important;
    font-size: 80%;
    margin-left: auto !important;
}

.nav.theme {

}

.nav.filters div {

}

.nav.filter-section {
    padding-left: 20px;
}

.nav.filters .filter-section .nav-header {
    /*float: left;*/
    margin: 5px 15px 5px 5px;
    /*min-height: 70px;*/
}

.filters .nav-item {
    padding: 5px 10px;
    font-size: 90%;
    margin-bottom: 5px;
}

.nav a {
    display: inline-block;
    color: var(--color-black);
    padding: 15px;
    border: 2px solid var(--color-nav-a-border_and_zine-description-color);
    border-radius: 30px;
    background-color: var(--color-nav-a_and_zine-wrapper);
    text-decoration: none;
}

.nav a:hover, .nav a:focus, .nav a:visited, .nav a:active {
    text-decoration: none;
}

.nav a:hover {
    color: var(--color-a-nav-item-active-border-color);
    background-color: var(--color-nav-a-hover);
}

a.nav-item.active {
    color: var(--color-white);
    background-color: var(--color-nav-active);
    border-color: var(--color-a-nav-item-active-border-color);
}

.nav.theme a {
    margin-bottom: 10px;
}

.zine-wrapper {
    padding: 15px;
    color: var(--color-zine-wrapper);
    background-color: var(--color-nav-a_and_zine-wrapper);
}

.zine-info {

}

.zine-title {

}

.zine-team {
    min-height: 40px;
}

.zine-link {

}

.zine-author {
    display: table;
    text-align: center;
    height: 100%;
    width: 100%;
    min-height: 40px;
    font-style: italic;
    color: var(--color-nav-a-hover-active-color_and_zine-author-color);
}

.zine-author-span {
    display: table-cell;
    vertical-align: middle;
}

.zine-additional-details {
    margin-left: -16px;
    width: 110%;
    margin-top: 5px;
}

.zine-award {
    padding: 5px;
    border-top: 1px solid var(--color-zine-award);
    color: var(--color-zine-award-color);
}

.zine-description {
    padding: 5px 15px;
    margin-top: 5px;
    font-style: italic;
    color: var(--color-nav-a-border_and_zine-description-color);
}

.hoverover_award {
    font-size: 120%;
    padding: 5px;
    margin-bottom: -5px;
}

.hoverover_description {
    padding: 10px 20px;
}

.zine-gallery-footer {
    text-align: center;
}

.zine-gallery-footer p {
    font-size: x-large;
}

.made-by p {
    font-size: large;
}

.made-possible-by {
    margin: 10px 0px -30px 0px;
}

.zine-gallery-footer a {
    font-size: large;
}

.zine-contact {
    margin-bottom: 80px;
}

.zine-contact img {
    max-height: 128px !important;
}

#menu .zine-contact {
    font-size: initial;
}

#menu .zine-contact {
    margin-top: 32px;
    margin-bottom: 0px;
}

#menu .zine-contact p {
    margin-top: 24px;
}

#menu .zine-contact img {
    max-height: 32px !important;
}

.zine-gallery-footer img {
    display: inline-flex;
    margin: 10px;
}

.made-possible-by-imgs {
    display: inline-flex;
}

.made-possible-by-imgs a {
    margin: 10px;
}

.made-possible-by-imgs img {
    max-height: 150px;
}

p.made-possible-by {
    max-height: 128px !important;
}

.made-by {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


/* Gallery */
.photo-grid-gallery {
    margin-top: 40px;
    margin-bottom: 20px;
}

.cell {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    background-color: #222;
}

.photo-grid-gallery .cell:hover {
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}


@-moz-document url-prefix() { 
    ._df_thumb {
       display: inline-block !important;
    }

    ._df_book-cover {
        display: block;
    }
}

/** Responsive design **/

@media (-webkit-min-device-pixel-ratio: 1.25) {
    ._df_thumb { width: 250px; height: 358px; }
    span.finnish { font-size: 80%; }
    span.english { font-size: 80%; }
    /* .zine-header-section span { margin: 10px 50px; } */
    .zine-header-section img { padding: 0px; }
    .header-title-logo { max-height: 225px; }
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
    ._df_thumb { width: 226px; height: 324px; }
    span.finnish { font-size: 80%; }
    span.english { font-size: 80%; }
    /* .zine-header-section span { margin: 0px 0px; } */
    .zine-header-section img { padding: 0px; }
    .header-title-logo { max-height: 225px; }
}

@media only screen and (max-width: 1540px) {
    .zine-thumb-container { max-width: 1150px; }
    .zine-page-header img, .zine-gallery-header img, .zine-gallery-footer img { max-width: 1000px; }
    .zine-header-section { font-size: 1.9em; }
}

@media only screen and (max-width: 1150px) {
    .header-title-logo { max-height: 225px; }
    .zine-thumb-container { max-width: 780px; }
    .zine-page-header img, .zine-gallery-header img, .zine-gallery-footer img { max-width: 100%; }
    .zine-more-info a img { max-height: 130px; }
    .embedded-navigation img:hover {
        width: 130px;
        height: 130px;
        -moz-border-radius: 65px; 
        -webkit-border-radius: 65px; 
        border-radius: 65px;
    }
}

@media only screen and (max-width: 860px) {
    .header-title-logo { max-height: 200px; }
    .zine-more-info a { margin: 15px; }
    .zine-more-info a img { max-height: 125px; }
    .embedded-navigation img:hover {
        width: 125px;
        height: 125px;
        -moz-border-radius: 62.5px; 
        -webkit-border-radius: 62.5px; 
        border-radius: 62.5px;
    }
}

@media only screen and (max-width: 800px) {
    ._df_thumb { width: 270px; height: 385px; }
    .zine-more-info a img { max-height: 122px; }
    .embedded-navigation img:hover {
        width: 122px;
        height: 122px;
        -moz-border-radius: 61px; 
        -webkit-border-radius: 61px; 
        border-radius: 61px;
    }
}

@media only screen and (max-width: 780px) {
    .header-title-logo { max-height: 175px; }
    .zine-thumb-container { max-width: 100%; }
    .zine-header-section { font-size: 1.5em; }
    .zine-header-section img, .zine-gallery-footer img { max-height: 250px; }
    .embedded-navigation-big img {
        width: 250px;
        height: 250px;
    }
    .embedded-navigation-big img:hover {
        -moz-border-radius: 125px; 
        -webkit-border-radius: 125px; 
        border-radius: 125px;
    }
    .zine-gallery-footer img { max-height: 200px; }
    .zine-more-info a { margin: 0px; }
    .theme .nav-item { padding: 5px 10px; }
    /*.zine-header-section span { margin: 0px; } */
    /*.zine-more-info a img { max-height: 115px; }*/
    .zine-submitting a img { max-height: 180px;}
    .made-possible-by-imgs img { max-height: 140px; }
    .zine-gallery-footer p { font-size: large; }
    .nav.filters .filter-section .nav-header {
        margin: 15px 0px 10px 2px;
    }
    .margin-left-200px { margin-left: 150px; }
}

@media only screen and (max-width: 640px) {
    ._df_thumb { width: 250px; height: 358px; }
    .zine-more-info a img { max-height: 120px; }
    .embedded-navigation img:hover {
        width: 120px;
        height: 120px;
        -moz-border-radius: 60px; 
        -webkit-border-radius: 60px; 
        border-radius: 60px;
    }
}

@media only screen and (max-width: 630px) {
    .zine-more-info a img { max-height: 115px; }
    .embedded-navigation img:hover {
        width: 115px;
        height: 115px;
        -moz-border-radius: 57.5px; 
        -webkit-border-radius: 57.5px; 
        border-radius: 57.5px;
    }
}

@media only screen and (max-width: 600px) {
    .header-title-logo { max-height: 150px; }
    ul { margin-left: 20px; }
    .zine-more-info a img { max-height: 110px; }
    .embedded-navigation img:hover {
        width: 110px;
        height: 110px;
        -moz-border-radius: 55px; 
        -webkit-border-radius: 55px; 
        border-radius: 55px;
    }
    .zine-thumb-container { padding: 10px; }
    ._df_thumb { 
        width: 210px; 
        height: 300px; 
    }
    .upper-fold {
        padding: 0px 0px 0px 0px;
    }
    ._df_book-tag:nth-child(1) {
        margin-top: -32px;
    }
    .zine-wrapper { 
        overflow-wrap: anywhere;
        font-size: 92%; 
    }
    .zine-author { font-size: 90%; }
    .hoverover_description {
        padding: 5px;
        font-size: 90%;
    }
    .made-possible-by-imgs img {
        max-height: 130px;
        margin: 0px;
    }
    .margin-left-200px { margin-left: 100px; }
}

@media only screen and (max-width: 520px) {
    ._df_thumb { width: 200px; height: 285px; }
    .zine-more-info a img { max-height: 105px; }
    .embedded-navigation img:hover {
        width: 105px;
        height: 105px;
        -moz-border-radius: 52.5px; 
        -webkit-border-radius: 52.5px; 
        border-radius: 52.5px;
    }
    .margin-left-100px { margin-left: 20px; }
    .margin-left-200px { margin-left: 50px; }
}

@media only screen and (max-width: 500px) {
    ._df_thumb { width: 176px; height: 252px; }
    .zine-more-info a img { max-height: 100px; }
    .embedded-navigation img:hover {
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px; 
        -webkit-border-radius: 50px; 
        border-radius: 50px;
    }
}

@media only screen and (max-width: 400px) {
    ._df_thumb { width: 200px; height: 285px; }
    .zine-more-info a img { max-height: 75px; }
    .embedded-navigation img:hover {
        width: 75px;
        height: 75px;
        -moz-border-radius: 37.5px; 
        -webkit-border-radius: 37.5px; 
        border-radius: 37.5px;
    }
}