: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);
    --project-title-font: clamp(0.875rem, 1vw, 1.2rem) monospace;
    --project-info-font: clamp(0.8rem, 0.9vw, 1rem) monospace;
    --home-button-top: 1.5vh;
    --home-button-height: 5.5vh;
}
html, body { 
    width:100%; 
    min-height:100vh;
    margin:0; 
    padding-bottom: 10vh;
    background: rgb(61,48,244);
    font-size: 100%;

}
body {
    position: relative;
}
.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;
}
.center {
    position: relative;
    width: 100%; 
    height: 310vh;
    overflow: visible;
}
.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: #fff; 
    cursor: grab; 
    user-select: none;
    z-index: 100;
    isolation: isolate;
}
.card.active {
    filter: invert(1);
}
.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;
}
.project-title {
    position: absolute;
    top: calc(100% + 0.7em);
    left: 0;
    margin-top: 0;
    display: inline-block;
    padding: 0;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font: var(--project-title-font);
    cursor:default;
    white-space: nowrap;
    overflow: visible;
}
.project-title:hover,
.project-title:focus-visible {
  text-decoration: underline;
  cursor: pointer;
}
.project-title:hover .project-info,
.project-title:focus-visible .project-info {
  text-decoration: underline;
}
.project-info {
    position: absolute;
    top: calc(100% + 0.4em);
    left: 0;
    margin: 0;
    padding: 0;
    font: var(--project-info-font);
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
    /*cursor: default;*/
    white-space: nowrap;
    overflow: visible;
    text-decoration: none;
}
.project-info:hover,
.project-info:focus-visible {
    text-decoration: underline;
    cursor: pointer;
}
.project1 {
    width: 31vw;
    height: 70vh;
    left: 16vw;
    top: 233vh;
    min-width: 15vw;
    min-height: 30vh;
    z-index: 108;
}
.project2 {
    width: 16vw;
    height: 48vh;
    right: 4.3vw;
    top: 34vh;
    min-width: 8vw;
    min-height: 24vh;
    z-index: 103;
}
.project3 {
    width: 33vw;
    height: 37vh;
    left: 42vw;
    top: 114vh;
    min-width: 17vw;
    min-height: 20vh;
    z-index: 105;
}
.project4 {
    width: 19vw;
    height: 38vh;
    left: 29vw;
    top: 96vh;
    min-width: 10vw;
    min-height: 19vh;
    z-index: 106;
}
.project5 {
    width: 26vw;
    height: 30vh;
    left: 2vw;
    top: 170vh;
    min-width: 13vw;
    min-height: 15vh;
    z-index: 107;
}
.project6 {
    width: 29vw;
    height: 50vh;
    left: 4.5vw;
    top: 27vh;
    min-width: 15vw;
    min-height: 30vh;
    z-index: 101;
}
.project7 {
    width: 30vw;
    height: 34vh;
    left: 41.5vw;
    top: 9vh;
    min-width: 15vw;
    min-height: 17vh;
    z-index: 102;
}
.project8 {
    width: 21vw;
    height: 59vh;
    left: 66vw;
    top: 130vh;
    min-width: 10vw;
    min-height: 30vh;
    z-index: 104;
}
.project9 {
    width: 25vw;
    height: 33vh;
    right: 2.5vw;
    top: 245vh;
    min-width: 80px;
    min-height: 80px;
    z-index: 110;
}
.project10 {
    width: 17vw;
    height: 50vh;
    left: 38vw;
    top: 213vh;
    min-width: 8vw;
    min-height: 22vh;
    z-index: 109;
}

.footer-container {
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    display: flex;
    z-index: 99;
    align-items: center;
    justify-content: space-between;
}
.footer_title {
    position: absolute;
    right: 1.4vw;
    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;
}
.footer_title:hover {
  text-decoration: underline;
}