@font-face {
    font-family: 'Favorit Light';
    src: url('../fonts/favorit/abcfavorit-light.woff2') format('woff2'),
         url('../fonts/favorit/abcfavorit-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Favorit Light Mono';
    src: url('../fonts/favorit_mono/abcfavorit-light-mono.woff2') format('woff2'),
         url('../fonts/favorit_mono/abcfavorit-light-mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*{
    margin: 0;
    padding: 0;
}
::selection {
    background-color: yellow;
}
html{
    font-family: 'Favorit Light';
    -webkit-font-smoothing: antialiased;
    font-size: 1vw;
}
body{
    width: 100vw;
    height: 100vh;
    position: fixed;
    height: 100%;
    background-color: #f8f8f8;
}
p{
    font-size: 1vw;
    font-family: 'Favorit Light Mono';
}
a{
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
main{
    position: absolute;
    top: calc(4.7vw - 2px);
    left: 1.25vw;
    width: calc(97.5vw - 2px);
    height: calc(100vh - 6vw );
    overflow-y: scroll;
    border: 1px solid;
    background-color: #f8f8f8;
}
header > div{
    cursor: pointer;
}
#scores-is{
    font-size: 6.75vw;
    line-height: 7vw;
    margin: 2vw;
    letter-spacing: -0.2vw;
    /* border: 0.25vw solid; */
    transform: translateY(40);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    left: 0;
    right: 0;
    width: 68%;
    padding: 2vw;
    /* background-color: white; */
}
.inner{
    position: fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    left: 0;
    right: 0;
    padding: 2vw;
    opacity: 0.7;
    color: black;
    mix-blend-mode: multiply;
    width: 100%;
}
#form, #weight, #color, #rooms{
    visibility: hidden;
}
main > img{
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 0;
    width: 100%;
}
ul{
    padding: 0;
    list-style-type: none;
}
h1{
    font-size: 1vw;
    font-weight: normal;
}
h1 a{
    color: black;
    text-decoration: none;
}
nav div:first-child {
    position: fixed;
    margin: 0.75vw 0 0.45vw 1.25vw;
}
nav div:last-child {
    position: fixed;
    margin: 0.75vw 1.25vw 0.45vw 0;
    right: 0;
}
nav div:last-child h1 {
    display: inline;
    padding-left: 1vw;
}
nav div:not(:first-child) h1 {
    color: #BEBEBE;
}
header{
    position: absolute;
    height: 2.25vw;
    top: 2.5vw;
    left: 1.25vw;
}
header div{
    display: inline-block;
    border: 1px solid #BEBEBE;
    float: left;
    border-right: 0;
    width: calc(24.375vw - 1px);
    display: none;
}
header div:last-child{
    border-right: 1px solid #BEBEBE;
    width: calc(24.375vw - 2px);
}
header div p{
    padding: 0.5vw 0 0.38vw 0;
    text-align: center;
    font-family: 'Favorit Light';
}
header div a{
    color: #BEBEBE;
    text-decoration: none;
}
header div.active, header div.active a p{
    color: black;
    border-color: black;
}
header div.active{
    border: 1px solid black;
}
header div.active + div{
    border-left: 0;
}

header div:hover, header div:hover a p{
    color: black;
    border-color: black;
}
.nav-active{
    color: black;
    border-color: black;
}
.nav-active + div{
    border-left: 1px solid black;
}
header div:hover{
    border: 1px solid black;
}
header div:hover + div{
    border-left: 0;
}
.obj{
    cursor: pointer;
    position: absolute;
    width: 5vw;
    z-index: 1;
    opacity: 0.9;
}
#color{
    overflow-x: hidden;
}
#color .obj{
    mix-blend-mode: multiply;

}
.obj:hover{
    z-index: 10;
    mix-blend-mode: unset;
    opacity: 1;
}
#color .obj:hover{
    mix-blend-mode: unset;
} 
.obj img{
    width: 100%;
}
section{
    position: absolute;
    left: 1.25vw;
    top: 100vh;
    width: calc(97.5vw - 2px);
    height: calc(100vh - 5.9vw);
    overflow: scroll;
    z-index: 99;
    border: 1px solid;
    background-color: #F8F8F8;
}
.about, .imprint{

}
section h1{
    padding: 0.5vw;
    position: relative;
    top: 0;
    width: auto;
    display: inline-block;
}
section p{
    font-size: 1vw;
    position: relative;
    transform-origin: 50% 50%;
    padding: 0 2.5vw 1.25vw 2.5vw;
    width: 43.75vw;
}
section p::first-letter {
    text-transform: capitalize;
}
section > #images_wrapper img{
    width: 100%;
    border-bottom: 1px solid;
}
#images_wrapper, #info{
    width: 50%;
}
#images_wrapper{
    border-right: 1px solid;
    min-height: 100%;
}
#info{
    min-height: 100%;
    width: 50%;
    left: 50%;
}
.top{
    top: calc(4.7vw - 2px);
    transition: all 500ms;
}
.bottom{
    top: 100vh;
    transition: all 500ms;
}
#close{
    position: absolute;
    z-index: 10;
    cursor: pointer;
    color: red;
    border: 1px solid red;
    padding: 0 1vw 0 1vw;
    transform-origin: 50% 50%;
    margin-top: -3vw;
}
#about, #imprint{
    cursor: pointer;
}
.about #close, .imprint #close{
    padding: 10px;
}

#title{
    min-height: 5vw;
    border-bottom: 1px  solid;
}
#year{
    min-height: 5vw;
    border-bottom: 1px  solid;
}
#appearance{
    min-height: 5vw;
    border-bottom: 1px solid;
}
#text{
    min-height: 5vw;
    border-bottom: 1px  solid;
}
#text p:last-child{
    padding-bottom: 1.5vw;
}
svg {
    position: absolute;
    display: block;
    /* left: 50%; */
    top: 0;
    overflow: visible;
    /* -webkit-transform: translateX(-50%);
    transform: translateX(-50%); */
  }
  
  path {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
  }
  
  .float{
    position: relative;
    /* overflow: hidden; */
    width: 48vw;
    height: 48vw;
    display: inline-block;
  }
  .svg{
    width: 100px;
    height: 100px;
    transform-origin: 0% 0%;
  }
  .obj {
    position: absolute;
    width: 5vw;
    /* margin-left: -38%;
    margin-top: -38%; */
  }
  .svg .obj {
    width: 10%;
    /* margin-left: -38%;
    margin-top: -38%; */
  }
/* .float{
    position: relative;
    overflow: hidden;
    width: 48vw;
    height: 48vw;
    display: inline-block;
    margin-left: 0.5vw;
}
.svg{
    width: 100px;
    height: 100px;
    transform-origin: 0% 0%;
}
main .svg:nth-child(2n){
    left: 50%;
    background-color: red;
}
.svg .obj{
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;  
} */
/* .triangle {
    offset-path: path("M95,95H5L50,5Z");
}
.circle {
    offset-path: path("M95,50A45,45,0,1,1,50,5,45,45,0,0,1,95,50Z");
}
.line{
    offset-path: path("M5,95,95,5");
}
.square{
    offset-path: path("M95,95H5V5H95Z");
}

.rectangle {
    offset-path: path("M94.5,27.5v45H4.5v-45Z");
}
.oval {
    offset-path: path("M72.75,73.25c-21.12,21.12-48.66,27.84-61.5,15s-6.12-40.38,15-61.5,48.66-27.84,61.5-15S93.87,52.13,72.75,73.25Z");
}
.lump{
    offset-path: path("M5,95C5-25,95-25,95,95Z");
}
.stickfigure{
    offset-path: path("M56.5,13.5a8,8,0,1,1-8-8A8,8,0,0,1,56.5,13.5Zm-8,8V56m0-.5-8,40m8-40,8,40m-8-72-14,28m14-28,14,28");
}
.tangle{
    offset-path: path("M21.5,5.5C43,5.5,56.5,9.5,55,54,53.74,91.48,5.5,104.5,5.5,89.5S40.5,16,67,16s37.5,78.5,13.5,78.5C68.5,94.5,59,78.5,59,49S65,5.5,83.5,5.5,93.9,67.11,77,79c-10.25,7.21-27,7.66-33,0-8-10.28.53-37,.53-37H21C.5,42,0,5.5,21.5,5.5Z");
}
.tailed{
    offset-path: path("M5,95C39,95,34,5,50,5S60,95,95,95")
};
.trapezoid{
    offset-path: path("M95,74H5L25,26H75Z");
}
.modular{
    offset-path: path("M35,35H5V5H35Zm0,0H5V65H35Zm30,0H35V65H65Zm30,0H65V65H95Zm0,30H65V95H95Z");
}
.tshape{
    offset-path: path("M94.58,49.42,50.08,4.92,35,20,49.71,34.71,5.05,79.37,20.13,94.45,64.79,49.79,79.5,64.5Z");
}
.blob{
    offset-path: path("M60.21,5.85c-15.09-2.15-28.82,2-33.79,6S18.2,19.46,13.48,28.63c-1,1.91-15.69,31.56-4,50.52,6.6,10.7,16,7.92,27.89,8.91s24.5,14,40.7,1c11.18-9,16.19-26.63,16.9-36.65.54-7.67-11.31-21.55-12.91-28.73S78.65,8.49,60.21,5.85Z");
}
.cluster{
    offset-path: path("M81.85,59.1a13.49,13.49,0,0,0-3.78.37,27.39,27.39,0,0,0-.2-22.94l.29,0a6.19,6.19,0,0,0,5.91-8.75,6.18,6.18,0,1,0-7.5-6.31,6.09,6.09,0,0,0,.56,2.85,6.16,6.16,0,0,0-4.67,4.48,27.41,27.41,0,0,0-33-4.41,13.46,13.46,0,0,0,.89-4.23,13,13,0,0,0,0-1.53,6.18,6.18,0,1,0-3-7.59A13.55,13.55,0,0,0,13.58,22.73a6.25,6.25,0,0,0-2.12-.48,6.18,6.18,0,1,0,5.84,7,13.5,13.5,0,0,0,8.85,3.86,13.82,13.82,0,0,0,4.38-.53,27.4,27.4,0,0,0-2.06,27.71,13.61,13.61,0,0,0-6.39,7.47,6.18,6.18,0,1,0,.2,9.49A13.6,13.6,0,0,0,28,84a6.19,6.19,0,1,0,9.43,1.6A13.56,13.56,0,0,0,48.13,75.18a29.75,29.75,0,0,0,3.69.42,27.24,27.24,0,0,0,15.91-4.23c0,.23,0,.45-.06.67a13.53,13.53,0,0,0,4.38,10.62,6.19,6.19,0,1,0,7.13,3.42,13.32,13.32,0,0,0,1.43.14A13.57,13.57,0,1,0,81.85,59.1Z");
} */
svg {
    margin: 5px;
}
path{
    fill: none;
    stroke: #BEBEBE;
    /* stroke: blue; */
    stroke-width: 0.01vw;
    stroke-dasharray: 1px,1px;
    shape-rendering: geometricPrecision;
}
.cols{
    width: 97.5vw;
}
.cols {
    -moz-column-count:2;
    -moz-column-gap: 0%;
    -moz-column-width: 50%;
    -webkit-column-count:2;
    -webkit-column-gap: 0%;
    -webkit-column-width: 50%;
    column-count: 2;
    column-gap: 0%;
    column-width: calc(50% - 1px);
    overflow-x: hidden;
    position: relative;
}
.cols > div{
    border-right: 1px solid #BEBEBE;
    border-bottom: 1px solid #BEBEBE;
    break-inside: avoid-column; 
    /* break-after:column; */
    display:block;
    position: relative;
}
.cols > div:nth-child(odd){
    box-shadow: inset 1px #BEBEBE;
}
.cols > div:nth-child(2n+1){
    height: 60vw;
}
.cols > div:nth-child(5){
    height: 50vw !important;
}
.cols > div:nth-child(2n){
    height: 40vw;
    /* background-color: yellow; */
}
.cols > div:nth-child(3n){
    height: 20vw;
}
.cols > div > p{
    width: 50%;
    position: absolute;
    text-align: center;
    height: inherit;
    vertical-align: middle;
    transform: translate(50%, 50%);
    pointer-events: none;
    color: #BEBEBE;
    text-transform: uppercase;
    font-family: 'Favorit Light';
}
.cols > div > p{

}
#weight .obj{
    opacity: 0;
}
.obj_link:hover, .link:hover{
    opacity: 0.5;
}
#links{
    padding: 0 2.5vw 1.25vw 2.5vw;
}
.link{
    /* color: orangered; */
    font-family: 'Favorit Light Mono';
}
h1#about:hover, h1#imprint:hover{
     color: black;
     cursor: pointer;
}
.selected{
    color: black !important;
}
.row {
    display: flex; /* equal height of the children */
    min-height: 100%;
}  
.col {
  flex: 1; /* additionally, equal width */
}
#images_wrapper img{
    width: 100%;
    border-bottom: 1px solid;
}
.about > div, .imprint > div{
    transform: translateX(50%);
    width: 50vw;
    padding: 5vw 0 5vw 0;
}
.notselected{
    color: #BEBEBE;
}
.selected{
    color: black;
}
.about-en, .about-de{
    display: block;
}
.about > div > h1:hover, .about-en > div > h1:hover{
    color: black !important;
    cursor: pointer;
}
.notvisible{
    display: none;
}
visible{
    display: block;
}
@media only screen and (max-width: 912px) {
    html, body{
        overflow: hidden;
        height: calc(var(--vh, 1vh) * 100);
    }
    h1, p {
        font-size: 3vw;
    }
    header {
        height: 4.25vw;
        top: 5.5vw;
    }
    main{
        top: calc(11.6vw - 4px);
        height: calc(100% - 13vw );
        overflow-x: hidden;
    }
    section{
        height: calc(100% - 13vw );
        overflow-x: hidden;
    }
    .top{
        top: 10.5vw;
    }
    .float {
        width: 47.5vw;
        height: 47.5vw;
    }
    #close{
        padding: 0 3vw 0 3vw;
    }
    section p{
        font-size: 3vw;
        width: 44vw;
    }
    section.about p{
        width: 75.75vw;
    } 
    path{
        stroke-width: 1px;
        stroke-dasharray: 2px,2px;
    }
    .about > div, .imprint > div {
        transform: translateX(10%);
        width: 80%;
    }
    svg{
    }
    path{
        stroke-width: 0.5px; 
    }
    .obj{
        margin-left: -2.5px;
        margin-top: -2.5px;
    }
}