:root { 
    --handle: 1.7vh; 
    --handle-color: rgba(0,0,0,0.5);
    --footer-header-color: rgb(255, 0, 0);
    --footer-header-font: clamp(0.875rem, 1vw, 1.2rem) monospace;
    --footer-header-gap: clamp(1rem, 2.5vw, 1.5rem);

    --footnote-text-link-font: clamp(0.875rem, 0.9vw, 1rem) monospace;
    --footnote-text-font: clamp(0.875rem, 0.9vw, 1rem) monospace;
    --pager-font: clamp(0.7rem, 0.7vw, 0.8rem) monospace;
    --home-button-top: 1.5vh;
    --home-button-height: 5.5vh;

    --contents-padding-top: 3.7vh;
    --contents-padding-right: 3vw;
    --contents-padding-left: 3vw;
    
    --description-margin-right: 3vw;
    --description-font: clamp(1rem, 1.4vw, 1.9rem)'DIN-Alternate-Bold';
    --description-lineheight: 1.3;
}
html, body {
    font-size: 100%;
    margin: 0;
    background: rgb(61,48,244);
    overflow-anchor: none;
    overscroll-behavior: none;
}
body {
    position: relative;
    padding-bottom: 0;
}
.header-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: none;
    z-index: 99;
    align-items: center;
}
.homebutton-link {
    position: fixed;
    top: var(--home-button-top);
    left: 1.1vw;
    display: inline-block;
}
.homebutton-img {
    display: block;
    height: var(--home-button-height);
    width: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.nav-links {
    top:3vh;
    right: 1.4vw;
    position: fixed;
    display: flex;
    gap: var(--footer-header-gap);
}
.nav-links a {
    display: inline-block;
    align-self:center;
    font: var(--footer-header-font);
    color: var(--footer-header-color);
    text-decoration: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.nav-links a:hover {
    text-decoration: underline;
}
.footer-container {
    bottom:0;
    right: 0;
    width: 100%;
    z-index: 99;
    align-items: center;
    justify-content: space-between;
}
.footer_title {
    position: absolute;
    right: 1.4vw;
    bottom: 4vh;
    display: block;
    align-self:center;
    font: var(--footer-header-font);
    color: var(--footer-header-color);
    text-decoration: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    height: auto;
}
.footer_title:hover {
  text-decoration: underline;
}
.resizers { 
    position:absolute; 
    inset:0; 
    pointer-events:none; 
}
.resizer { 
    pointer-events:auto; 
    position:absolute;
    width: var(--handle); 
    height: var(--handle);
    background: var(--handle-color); 
}
.resizer.top-left {
    left:-0.4vw;  
    top:-0.8vh;
    cursor:nwse-resize; 
}
.resizer.top-right {
    right:-0.4vw;
    top:-0.8vh;
    cursor:nesw-resize; 
}
.resizer.bottom-left {
    left:-0.4vw;
    bottom:-0.8vh;
    cursor:nesw-resize; 
}
.resizer.bottom-right { 
    right:-0.4vw; 
    bottom:-0.8vh;
    cursor:nwse-resize;
}
.resizer.top {
    top:-0.8vh;
    left: 50%; 
    transform: translateX(-50%); 
    cursor: ns-resize;
}
.resizer.bottom { 
    bottom: -0.8vh;
    left: 50%; 
    transform: translateX(-50%); 
    cursor: ns-resize; 
}
.resizer.left {
    left: -0.4vw; 
    top: 50%; 
    transform: translateY(-50%); 
    cursor: ew-resize; 
}
.resizer.right { 
    right: -0.4vw;
    top: 50%; 
    transform: translateY(-50%); 
    cursor: ew-resize; 
}
.card {
    position: absolute;
    width: 20vw; 
    height: 50vh;
    box-sizing: border-box;
    background: none; 
    cursor: grab; 
    user-select: none;
    z-index: 100;
    isolation: isolate;
}
.card img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    display: block;
    pointer-events: none;
}
.preview, .hover-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.hover-video {
    display: none;
}
.card:hover .preview {
    display: none;
}
.card:hover .hover-video {
    display: block;
}
.preview-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.img-preview,
.img-preview-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card:hover .img-preview {
    display: none;
}
.card .img-preview-after {
  display: none;
}
.card:hover .img-preview-after {
    display: block;
}


.card .gallery {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: none;
}
.card .slides {
    position: absolute;
    inset: 0;
    display: flex;
    margin: 0; 
    padding: 0; 
    list-style: none;
    transform: translateX(0);
    will-change: transform;
}
.card .slides > li{ 
    flex:0 0 100%;
} 
.card .slides img {
    width:100%; 
    height:100%;
    object-fit: cover; 
    object-position:center;
    display:block; 
    pointer-events:none;
    scroll-snap-align: center;
    height: 100%
}
.card .pager {
    position: absolute;
    left: 50%;
    bottom: 0.9em;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8em;
    list-style: none;
    margin: 0; 
    padding: 0;
    font: var(--pager-font);
}
.card .pager label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em; 
    height: 1.2em;
    color: #fff;
    font: var(--pager-font);
    cursor: pointer;
}
.card .pager label::before {
    content: "";
    position: absolute;
    inset: 0;
    /*border-radius: 50%;*/
    background: rgba(0,0,0,0.5); 
    z-index: -1;
}


.card .pager label:hover {
    color: red;
}
.contents-gallery .slides {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(0);
    will-change: transform;
    /*transition: transform 350ms ease;*/
}
.contents-gallery .slides > li {
    flex: 0 0 100%;
}
.contents-gallery .slides img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.contents-gallery .pager {
    position: absolute;
    left: 50%;
    bottom: 0.9em;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8em;
    list-style: none;
    margin: 0; 
    padding: 0;
    font: var(--pager-font);
}
.contents-gallery .pager label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em; 
    height: 1.1em;
    color: #fff;
    font: var(--pager-font);
    cursor: pointer;
}
.contents-gallery .pager label::before {
    content: "";
    position: absolute;
    inset: 0;
    /*border-radius: 50%;*/
    background: rgba(0,0,0,0.5); 
    z-index: -1;
}
.contents-gallery .pager label:hover {
     color: red;
}



.footnotes {
    position: absolute;
    width: 100%; 
    left: 0;
    top: 0;
    overflow: visible;
}
.footnote-text {
    position:absolute;
    font: var(--footnote-text-link-font);
    margin: 0;
    top: calc(100% + 0.7em);
    color: #fff;
}
.project-detail {
    position: absolute;
    left: calc(100% + var(--contents-padding-right) + 1vw);
    top: calc(100%);
    bottom: 0;
    font: var(--footnote-text-link-font);
    color: white;
    white-space: nowrap;
}
.contents-caption {
    position: absolute;
    left: calc(100% + var(--contents-padding-right) + var(--description-margin-right) + 1vw);
    /*top: calc(100% - var(--footnote-text-link-font));*/
    bottom: 0;
    margin-bottom: 0.5rem;
    padding: 0;
    font: var(--footnote-text-link-font);
    color: white;
    white-space: nowrap;
}
.footnote-link {
    position: absolute;
    left: calc(100% + var(--contents-padding-right) + var(--description-margin-right) + 1vw);
    bottom: 0;
    padding: 0;
    margin: 0;
    font: var(--footnote-text-link-font);
    color: white;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.footnote-link:hover {
    text-decoration: underline;
}
.footnotes, .card, .resizers, .resizer {
    overflow-anchor: none;
    overscroll-behavior: contain;
}
@font-face {
  font-family: 'arial-black';
  src: url('fonts/Arial_Black.ttf') format('truetype');
}
@font-face {
  font-family: 'fontstruck';
  src: url('fonts/fontstuck.otf') format('truetype');
}
@font-face {
    font-family: 'currentFont';
    src: url('fonts/present.ttf') format('truetype');
}
@font-face {
    font-family: 'pastFont';
    src: url('fonts/past.ttf') format('truetype');
}
@font-face {
    font-family: 'anomalies';
    src: url('fonts/anomalies.ttf') format('truetype');
}
@font-face {
    font-family: 'inferi-Light';
    src: url('fonts/Inferi-Light.otf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'DIN-Condensed-Bold';
    src: url('fonts/DIN-Condensed-Bold.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'DIN-Alternate-Bold';
    src: url('fonts/DIN-Alternate-Bold.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('fonts/Roboto-Medium.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Hiruko-Black_Alternate';
    src: url('fonts/HirukoBlackAlternate.ttf') format('truetype');
    font-style: normal;
}