:root {
    --blue: #10659f;
}

@font-face {
    font-family: 'biro';
    src: url('fonts/biro.ttf') format('truetype');
}

@font-face {
    font-family: 'type';
    src: url('fonts/indexregular.woff') format('truetype');
}

html, body {
    height: 100dvh;
    margin: 0;
    padding: 0;
    font-family: 'biro';
    font-smooth: none;
    -webkit-font-smoothing : none;
    font-size: 21px;
    background: linear-gradient(90deg, #fff 3px, transparent 1%) 50%, linear-gradient(#fff 3px, transparent 1%) 50%, #000;
    background-attachment: scroll, scroll, scroll;
    background-size: auto, auto, auto;
    background-attachment: fixed;
    background-size: 4px 4px;
    overflow: hidden;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

p {
    margin: 0;
    opacity: 90%;
    position: absolute;
    z-index: 99;
    width: 100%;
    mix-blend-mode: multiply;
    white-space: pre;
}

.photos {
    z-index: -99;
}

.docs {
    z-index: -99;
}

#file {
    position: absolute;
}

.file-stack {
    position: absolute;
}

.folder {
    width: 350px; 
    height: auto;
}


.filing {
  position: absolute;
  bottom: 0;
  right: 20px;
}

.filing:hover {
    animation: shake 0.4s infinite steps(1);
}

@keyframes shake {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

.rotate {
  font-family: 'type';
  position: absolute;
  top: 5px;
  right: -20px;
}

.rotate span {
  display: inline-block;
  position: relative;
  transform: rotate(-90deg);
  margin: 0 2px;
}

/* slider */

.slider {
    position: fixed;
    left: -160px;
    top: 0;

    width: 300px;
    height: 100vh;

    overflow: hidden;
    display: grid;
    place-items: center;

    z-index: 999999;
}

.slide-track {
    display: flex;
    flex-direction: column;
    gap: 20px;

    height: max-content;
    will-change: transform;
}

.slide {
    width: 350px;
    height: 285px;

    position: relative;
    left: -70px;

    display: grid;
    place-items: center;

    rotate: 90deg;
    transition: left .5s;
    cursor: pointer;
}

.slide:hover {
    left: -20px;
}