:root {
    --link-color-menu: black;
    --mapbox-marker-color: red;
}

html.black-white-mode body {
  background-color: white !important;
  --custom-color: transparent !important;

  * {
    --custom-color: transparent !important;
  }


}

@font-face {
  font-family: 'Karl Condensed';
  src: url('/assets/fonts/Karl_Condensed_Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Karl ST';
  src: url('/assets/fonts/Karl_ST_Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Karl ST';
  src: url('/assets/fonts/Karl_ST_Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Karl ST';
  src: url('/assets/fonts/Karl_ST_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Karl ST';
  src: url('/assets/fonts/Karl_ST_Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Karl ST';
  src: url('/assets/fonts/Karl_ST_Ultra_Black.woff2') format('woff2');
  font-weight: 950;
  font-style: normal;
}




/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html {
    font-size: 1.6vw;
}

* {
    line-height: 1;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  margin: 0;
}


h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

img {
  display: block;
}

body {
    font-family: 'Karl ST', sans-serif;
    padding: 5rem 0.5rem 0.5rem 0.5rem;
    margin: 0rem;
}

body {
    transition: background-color 0.5s ease;

    background-color: transparent;

  }

body.projects {
    background-color: #D1C4FF;
  }

body.images {
  background-color: #FCA8FF;
}

body.home {
  background-color:white;
}

body.list {
  background-color:  #C2A8FF;
}

body.map {
  background-color: rgb(255, 250, 231);
}

header {


}



#o-f-a-i-p-s, #menu, #language-switcher {
    position: fixed;
    z-index: 100;
    top: 0.5rem;

    transition: all 0.3s ease;


    a {
      color: var(--link-color-menu);
      text-decoration: none;
    }

}


button.color-toggle, #language-switcher {
  position: fixed;
  top: 0.3rem;
  border: 0.15rem solid black;
  border-radius: 50%;

  width: 1.35rem;
  height: 1.35rem;
}

button.color-toggle {
  right: 2.4rem;
  color: var(--button-text, #fff);

  background-color: transparent;

  cursor: pointer;
  padding: 0;

  z-index: 11;

  transition: all 0.3s ease;

  html.black-white-mode & {
    transform: rotate(180deg);
  }

  .toggle-icon {
    width: 100%;
    height: 100%;
    background-color: black;
  }
}



#language-switcher {
    right: 0.5rem;

    font-size: 0.6rem;
    font-weight: bold;

    padding: 0.18rem 0;
    text-align: center;

    a {
      line-height: 0.8rem;
    }
}


#menu {

}


#logo-stadt-zurich {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 0.7rem 0 0;
  transition: width 0.3s ease;

  body.scrolled & {
    width: 1.2rem;
  }

}

#public-art-zurich {
    transition: all 0.3s ease;

    body.scrolled & {
        opacity: 0;
    }
}

#gradient {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 2rem;
  background: rgba(255,255,255,1);
  opacity: 0;
  transition: all 0.3s ease;


  body.scrolled & {
    opacity: 1;
  }

  body.collection-hover & {
    height: 3rem;
  }

  html.black-white-mode & {
    background-color: white !important;
  }
}

#o-f-a-i-p-s {
    left: 0.5rem;

    a {
      display: flex;
      flex-direction: flex-wrap;
    }

    #k-i-oe-r {
        display: flex;
        flex-wrap: wrap;

        font-weight: bold;
    }

    .visible {
        display: inline;
    }

    .hidden {
        display: inline;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease, visibility 0s 0.3s;
        margin: 0 0.3rem 0 0;
        body.scrolled & {
          display: none;
        }
    }

    &:hover #k-i-oe-r .hidden {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0s 0s;
    }

}



#menu {


    right: 4rem;



    ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0rem;

        li {
            padding: 0 2rem;
            white-space: nowrap;

            font-weight: bold;
            max-width: 9rem;
            position: relative;
            height: 2rem;




            ul {
              max-width: 100%;
              gap: 1rem;
              position: absolute;
              left: 50%;
              top: 1rem;
              transform: translate(-54%);

              li {
                opacity: 0;
                pointer-events: none;
                min-width: unset;
                max-width: none;

                font-weight: normal;
                height: 1rem;
                padding: 0;


              }




            }

            &:hover {
              ul li {
                opacity: 1;
                pointer-events: auto;
              }
            }
        }
    }
}

body.home {

}

#dashboard {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;

  pointer-events: none;
}



h1 {
    font-size: 4rem;
    text-align: center;
    margin: 0;
    padding: 10vh 0 20vh 0;
}

h1.page-title {
  font-size: 10rem;
  text-align: center;
  margin: 0;
  padding: 20vh 0 20vh 0;
  color: black;
  letter-spacing: -0.1rem;
  border-radius: 0.3rem;

  .small {
    font-size: 1rem;
    display: inline-block;
    letter-spacing: 0;
    transform: translateY(-6rem);
  }
}

  :root {
  --row-height: 7.2vw;
}

body.list {

  h1.page-title {

  margin: 0 0 0.1rem 0;
  }

  .table-container {
      display: flex;
      flex-direction: column;
  }

  .table-header, .table-row {
      display: flex;
  }

  .table-header {


   text-align: left;

   html.color-mode & {
    background-color: #E0D1BB;
   }

   html.black-white-mode & {
     background-color: #eee;
    }

   border-radius: 0.3rem;
   margin: 0 0 0.1rem 0;

   position: sticky;
   top: 0rem;
   z-index: 2;

   padding: 2rem 0 0  0;

    .table-cell {
        font-size: 0.8rem;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
    }

    .image-header {
      font-size: 0px !important;
    }

    .stadtkreis {
      transform-origin: top left;

      transform: translateX(-1.3rem) translateY(0.4rem) rotate(-30deg);

      font-size: 0.5rem;

      padding: 0;
    }

    .metrics-counter {
      display: none !important;
    }

  }



  .table-row {
    background: #eee;
    margin: 0 0 0.1rem 0;
    border-radius: 0.3rem;
    height:  var(--row-height);
    max-height: var(--row-height);
    min-height: var(--row-height);

    overflow: hidden;
    opacity: 1;
    transition: opacity 0.3s ease;


    &:hover {
      opacity: 0.7;
    }

    .metrics-counter {
      display: none !important;
    }

    .color-mode & {
      &:nth-child(8n + 1) { background-color: #F3EDE4; }
      &:nth-child(8n + 2) { background-color: #EDE5DA; }
      &:nth-child(8n + 3) { background-color: #F6F0E2; }
      &:nth-child(8n + 4) { background-color: #E8DFD1; }
      &:nth-child(8n + 5) { background-color: #F4EAD7; }
      &:nth-child(8n + 6) { background-color: #EDE0C8; }
      &:nth-child(8n + 7) { background-color: #DFD3B7; }
      &:nth-child(8n + 8) { background-color: #D4C4A3; }
    }

  }

  .table-cell {


      flex: 1;
      padding: 0.2rem 0.5rem 0.2rem 0.5rem;
      font-size: 0.5rem;
      line-height: 1.1;
      letter-spacing: 0.01rem;
      display: flex;
      align-items: center;

  }

  .image,
  .image-header {
   width: 6rem;
   min-width: 6rem;
   max-width: 6rem;
   height: 4rem;
   min-height: 4rem;
   max-height: 4rem;
   padding: 0.25rem;
   align-items: normal;
      flex: 0 0 100px;
      img {
        width: 6rem;
         min-width: 6rem;
         max-width: 6rem;
         height: 4rem;
         min-height: 4rem;
         max-height: 4rem;
        object-fit: cover;

        border-radius: 0.3rem;

        html.color-mode {
          filter: grayscale(1) contrast(2);
          mix-blend-mode: multiply;
        }

        border: 1px solid black;

      }
  }

  .title,
  .title-wrapper {
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    text-align: center;
    justify-content: center;

  }


  .year {
    width: 7vw;
    min-width: 7vw;
    max-width: 7vw;
  }

  .location {
    width: 15vw;
    min-width: 15vw;
    max-width: 15vw;

    cursor: pointer;
  }

  .stadtkreis {
    width: 3vw;
    min-width: 3vw;
    max-width: 3vw;
  }

  .grey {
    color: #666;
    margin: 0.3rem 0 0 0;
  }
}




#map {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;

    canvas {
        //filter: grayscale(0.8) brightness(1.1) ;
    }

    .mapboxgl-marker {

        svg {
            transform-origin: center center;
            transform: scale(1);

            opacity: 0.8;

            path {
                fill: var(--mapbox-marker-color);
            }

            circle {
                display: none;
            }
        }
    }

    .mapboxgl-popup-content {
     padding: 0;
     font-family: 'Karl ST', sans-serif;
     border-radius: 0.3rem;
     border: 1px solid black;

     .popup-content {
       border-radius: 0.3rem;
     }

      img {
          width: 100%;
          height: auto;
          object-fit: cover;
          border-radius: 0.3rem;
          margin: 0 0 0.3rem 0;

          html.color-mode & {
            filter: grayscale(1) contrast(2);
            mix-blend-mode: multiply;
          }

        }
        h3 {
          text-align: center;
          margin: 0 0 0.3rem 0;
          font-weight: bold;
          padding: 0 0.5rem 0 0.5rem;
        }

        p {
          text-align: center;
          padding: 0 0.5rem 0.5rem 0.5rem;
        }

        .mapboxgl-popup-close-button {
          font-size: 1rem;
          font-weight: 300;
          color: white;
        }
    }

    .mapboxgl-popup {
      max-width: 15rem !important;
      width: 15rem !important;
    }

    .popup-content img {
      max-height: 10rem;
    }

    .mapboxgl-ctrl-bottom-left {
      display: none;
    }

    .mapboxgl-ctrl-bottom-right {
      font-size: 0.4rem;
    }

    .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
      background-color: transparent;
    }

    .mapbox-improve-map {
      display: none;
    }

}


body.images {
  padding-left: 0;
  padding-right: 0;

  h1.page-title {
  }

  #content-wrapper {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .artwork-wrapper {
      width: 20%;
      position: relative;
      overflow: hidden;

      html.color-mode & {
        &:nth-child(4n + 1) {
        --custom-color : #F4D1FF;
        }

        &:nth-child(4n + 2) {
          --custom-color :  #FFE6A7;
        }

        &:nth-child(4n + 3) {
          --custom-color : #D4FFAA;
        }

        &:nth-child(4n + 4) {
          --custom-color : #FFD9C1;
        }
      }

      img {
        width: 100%;
        height: 50vh;
        object-fit: cover;
        transition: filter 0.3s ease;

        html.color-mode & {
          filter: grayscale(1) contrast(2);
          mix-blend-mode: multiply;
        }
      }


      &.landscape {
        width: 40%;

        img {
          height: 50vh;

        }

      }

      &:hover {
        img {
          filter: grayscale(0) contrast(1);
          mix-blend-mode: normal;
        }

        .title-wrapper {
          opacity: 1;
        }

      }





    }

    .title-wrapper {
      position: absolute;
      bottom: 0rem;
      left: 0;
      z-index: 2;
      width: 100%;
      transition: all 0.3s ease;
      padding: 1rem;
      text-align: center;
      opacity: 0;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;


    }

    .title {
      font-size: 1.8rem;
      font-weight: bold;
      margin: 0 0 0.5rem 0;
      color: white;


    }

    .artist, .year {
      font-weight: 500;
      font-size: 0.5rem;
      letter-spacing: 0.04em;
      color: white;
    }

  }


}

body.projects {

  --custom-color: blue;
  padding: 0;
  .project-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

  }
  .project {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    width: calc(50%);
    align-items: center;
    position: relative;

    background: var(--custom-color);

    &:nth-child(4n + 1) {
      --custom-color : #F4D1FF;
    }

    &:nth-child(4n + 2) {
      --custom-color :  #FFE6A7;
    }

    &:nth-child(4n + 3) {
      --custom-color : #D4FFAA;
    }

    &:nth-child(4n + 4) {
      --custom-color : #FFD9C1;
    }



    img {
      width: 100%;
      height: 20rem;
      object-fit: cover;
      border-radius: 0.3rem;

      html.color-mode & {
        filter: grayscale(1) contrast(2);
        mix-blend-mode: multiply;
      }

      margin: 0 0 1rem 0;
      border: 1px solid black;

    }

    .content {
      width: 100%;
      padding: 1rem 0;
      max-height: 14rem;

      padding: 0.12rem;
      margin: 0 -0.12rem;

      position: relative;
      left: -0.05rem;
      overflow: hidden;

    }

    .content-header {
      display: flex;
      flex-direction: wrap;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      margin: 0 0 1rem 0;
    }

    .marker {
      width: 15%;

      .marker-inner {
        height: 1rem;
        width: 1rem;
        background: black;
        border-radius: 50%;
      }
    }

    h2 {
      width:70%;
      font-size: 2rem;
      line-height: 0.9;
      letter-spacing: -0.02em;
      left: 2rem;
      text-indent: -1rem;
      padding: 0 0 0 1rem;
      text-align: center;

    }

    .timeframe {
      width: 15%;
      text-align: right;


      .timeframe-inner {
        font-size: 0.5rem;
        background: black;
        color: var(--custom-color);
        padding: 0.3rem;
        border-radius: 0.2rem;
        display: inline-block;
        text-align: center;
      }

    }
  }

  p {
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.1;
  }
}

:root {
  --custom-color : black;
}

.button {



  margin: 1rem;
  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
  border-radius: 1rem;

  transition: all 0.3s ease;

  cursor: pointer;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: rgb(0, 0, 0);
  border: 1px solid black;

  &:hover {
    background: black;
    color: var(--custom-color);
  }
}