body{
    height: 100%;
    width: 100%;
    margin-left: -0.05vw;
}

header{
    align-content: center;
    align-items: center;
    text-align: center;
    padding: 20% 0;
    display: flexbox;
}

#documentation{
    margin-top: 2vw;
    align-items: center;
    align-content: center;
    text-align: center;
    justify-content: center;
}
#contents{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;
    align-items: center;
    align-content: center;
    text-align: center;
    justify-content: center;
}
#contents img{
    width: 84%;
    pointer-events: none;
}
#contents p{
    text-align: left;
    padding: 0 8%;
    margin-bottom: 1.5vw;
}

p{
    font-size: 1.05vw;
    line-height: 1.6vw;
    color: #303030;
}
.pred{
    font-size: 1.05vw;
    color: #af1919;
}
.pwhite{
    font-size: 1.05vw;
    color: #af1919;
}
.subscript{
    font-size: 0.75vw;
    line-height: 1.2vw;
    color: #303030;
}
h1{
    font-size: 2vw;
    color: #af1919;
    font-weight: lighter;
}

.push-menu{
    height: 40vw;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    overflow-x: hidden;
    transition: width 0.4s ease-in-out;
    padding-top: 2.5vw;
    z-index: 1;
}
.push-menu b{
    padding: 1vw 2vw;
    line-height: 0.1vw;
    text-decoration: line-through;
    font-weight: lighter;
    text-decoration-thickness: 0.13vw;
    font-size: 1.3vw;
    color:#af1919;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.push-menu a{
    padding: 1vw 2vw;
    line-height: 0.1vw;
    text-decoration: none;
    font-size: 1.3vw;
    color:#303030;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.push-menu.open a, .push-menu.open b{
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}
.push-menu a:hover {
    color: #af1919;
    transition: 0.1s;
    cursor: crosshair;
}
#main-content{
    transition: margin-left 0.5s;
    margin-bottom: -12.6vw;
}
button{
    background: none;
}
button img {
    width: 100%;
    max-width: 1.7vw;
    margin-top: 2vw;
    margin-left: 1.6vw;
    cursor: crosshair;
}
button img:hover{
    filter: invert(100%);
    transition: 0.1s;
}
.push-menu.open {
    width: 15vw; 
}
#main-content.push {
    margin-left: 16vw;
}

arrowdown{
    display: block;
    align-items: center;
    align-content: center;
    text-align: center;
    justify-content: center;
    margin-top: 8vw;
    margin-bottom: 1.5vw;
}
arrowdown img{
    width: 100%;
    max-width: 7vw;
    cursor: crosshair;
}
arrowdown img:hover{
    filter: invert(100%);
    transition: 0.1s;
}

arrowup{
    display: block;
    align-items: center;
    align-content: center;
    text-align: center;
    justify-content: center;
    margin-top: 8vw;
    margin-bottom: 1.5vw;
}
arrowup img{
    width: 100%;
    max-width: 7vw;
    cursor: crosshair;
}
arrowup img:hover{
    filter: invert(100%);
    transition: 0.1s;
}

footer{
    align-content: center;
    align-items: center;
    text-align: center;
    font-weight: lighter;
    display: block;
}
footer a{
    justify-content: center;
    text-align: center;
    justify-items: center;
    display: block;
    width: max-content;
}
.icon{
    margin-left: 48.5vw;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    cursor: crosshair;
    width: 3vw;
}
.icon img:hover{
    filter: invert(100%);
    transition: 0.1s;
    cursor: crosshair;
}
.icon img{
    max-width: 3vw;
    height: auto;
    cursor: crosshair;
}
.email{
    justify-content: center;
    text-align: center;
    margin-bottom: 0.5vw;
    color:#af1919;
    font-size: 1vw;
    transition: 0.1s;
    margin-left: 44.85vw;
}
footer .email:hover{
    color: #303030;
    cursor: crosshair;
}
footer p{
    justify-content: center;
    display: flex;
    margin-top: -0.1vw;
    color: #303030;
    font-size: 1vw;
}

.fade-in{
    width: 100%;
    opacity: 0;
    transform: translateY(40px); /* Start slightly lower */
    transition: opacity 0.8s ease-out, transform 0.5s ease-out;
}
.fade-in.show{
    opacity: 1;
    transform: translateY(0);
}


.fadetext{
    color: #af1919;
    font-size: 1.2vw;
    position: relative;
    opacity: 1;
    animation: fadeOut linear forwards;
    animation-timeline: view();
    animation-range: exit, start;
}
@keyframes fadeOut{
    to{
        opacity: 0;
    }
}

gap, gap img{
    width: 100%;
    max-width: 4vw;
    opacity: 0;
}

posterpart{
    width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
    display: block;
}
@keyframes pageimages{
    0%{
        transform: translateX(35%);
    }
    100%{
        transform: translateX(-175%);
    }
}
imagescroll{
    animation: pageimages 10s linear infinite alternate;
    display: flex;
    gap: 2vw;
}
imagescroll:hover{
    animation-play-state: paused;
}
imagescroll img{
    width: 100%;
    max-width: 38vw;
    cursor: crosshair;
}

imagescrollevent{
    animation: eventimages 16s linear infinite alternate;
    width: 200%;
    display: flex;
    gap: 2vw;
    margin-left: -30vw;
}
imagescrollevent:hover{
    animation-play-state: paused;
}
imagescrollevent img{
    height: 45vw;
    cursor: crosshair;
}
@keyframes eventimages{
    0%{
        transform: translateX(0%);
    }
    200%{
        transform: translateX(0%);
    }
}

imagescrollriso{
    animation: eventimages 8s linear infinite alternate;
    display: flex;
    gap: 2vw;
}
imagescrollriso:hover{
    animation-play-state: paused;
}
imagescrollriso img{
    height: 45vw;
    cursor: crosshair;
}
@keyframes eventimages{
    0%{
        transform: translateX(40%);
    }
    100%{
        transform: translateX(-185%);
    }
}

.logo{
    width: 100%;
    max-width: 53vw;
    height: auto;
    pointer-events: none;
}
nav ul{
    width: 100%;
    max-width: 40vw;
    font-size: 2.4vw;
    margin-top: -0.5vw;
    padding-left: 23.8vw;
}
nav ul li{
    display: list-item;
    list-style: none;
    line-height: 4vw;
    text-align: left;
}
nav ul li a{
    color: #303030;
    text-decoration: none;
    position: relative;
    cursor: crosshair;
}
nav ul li b{
    color: #af1919;
    text-decoration:line-through;
    position: relative;
    font-weight: lighter;
}
nav ul li a::after{
    content: '';
    width: 0%;
    height: 0.2vw;
    background: #af1919;
    position: absolute;
    left: 0vw;
    bottom: -0.1vw;
    cursor: crosshair;
}
nav ul li a:hover::after{
    width: 100%;
    transition: 0.1s;
}

header1{
    align-content: center;
    align-items: center;
    text-align: center;
    display: flexbox;
}
header1 .logo{
    margin-top: 11.5vw;
}
worklist{
    margin-top: 15vw;
    padding: 0 23%;
    display: grid;
    grid-template-columns: repeat(4, minmax(1vw, 1fr));
    grid-gap: 2vw;
    text-align: center;
    margin-bottom: 8.5vw;
}
.work, .work2, .work3 {
    border-radius: 0.2vw;
    width: 100%;
    max-width: 23vw;
    height: 11.5vw;
    position: relative;
    overflow: hidden;
    display: block;
}
.work img{
    width: 260%;
}
.work2 img{
    width: 191%;
}
.work3 img, .storework img{
    width: 100%;
}

.storework{
    border-radius: 0.2vw;
    width: 100%;
    max-width: 23vw;
    height: 11.5vw;
    position: relative;
    overflow: hidden;
    display: block;
}
.storework img{
    width: 100%;
    object-fit: contain;
    transform-origin: center;
    transform: translateY(-2%);
}

.layer{
    width: 100%;
    height: 0%;
    background: linear-gradient(rgba(255, 255, 255, 0.0), #00000019, #303030ec);
    position: absolute;
    top: 0.85vw;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    font-size: 0.7vw;
    cursor: crosshair;
}
.layer h3{
    position: absolute;
    display: block;
    width: 100%;
    font-weight: lighter;
    background-color: #ffffff;
    color: #af1919;
    padding: 0.1vw 0;
}
.work:hover .layer, .work2:hover .layer, .work3:hover .layer, .storework:hover .layer{
    height: 100%;
}

MNOGO
transparent{
    display: flexbox;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
}
transparent img{
    width: 100%;
    max-width: 98.9vw;
    height: auto;
    margin-bottom: 5vw;
    pointer-events: none;
}
text{
    display: flexbox;
    align-items: center;
    align-content: center;
}
text p, text h1, #productDescription{
    margin-left: 27.2%;
    width: 100%;
    max-width: 46.5%;
    text-align: justify;
    align-items: center;
    align-content: center;
}
text .subscript{
    margin-top: 3vw;
    margin-bottom: 3vw;
}
mnogoimage{
    display: flexbox;
    text-align: center;
    align-content: center;
    align-items: center;
}
mnogoimage img{
    margin-top: 5vw;
    margin-left: -1vw;
    width: 100%;
    max-width: 74.6vw;
    height: auto;
    margin-bottom: 3vw;
    pointer-events: none;
}
mnogoimage p, mnogoimage .subscript{
    text-align: left;
    margin-bottom: -0.6vw;
    margin-left: 12.9vw;
    width: 100%;
    max-width: 46.5%;
}
mnogoside{
    padding-top: 5vw;
    display: flex;
    justify-content: center;
    gap: 1vw;
    margin-left: -1vw;
}
#zoom{
    width: 100%;
    max-width: 50vw;
    padding-bottom: 8vw;
    pointer-events: none;
}
desc{
    display: flexbox;
    align-items: center;
    align-content: center;
}
desc p{
    margin-left: 27.2%;
    width: 100%;
    max-width: 46.5%;
    text-align: justify;
    align-items: center;
    align-content: center;
    margin-bottom: 2vw;
}
gate{
    display: block;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
}
gate img{
    width: 100%;
    max-width: 46vw;
    margin-top: 4vw;
    pointer-events: none;
}



headtext{
    display: flex;
    align-items: center;
    align-content: center;
}
headtext h1{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 3vw;
}
tableoli{
    display: block;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
}
tableoli img{
    width: 100%;
    max-width: 4vw;
    height: auto;
    margin-top: 4vw;
    margin-bottom: 8vw;
    pointer-events: none;
}
spinoli{
    background-color: #000;
    height: 60vw;
    display: grid;
    text-align: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
}
#spinbook{
    margin-bottom: 2vw;
    width: 100%;
    max-width: 20vw;
    justify-content: center;
    align-content: center;
}
spinoli button{
    padding: 0.4vw 0.8vw;
    color: #af1919;
    border: none;
    outline: none;
    border-radius: 0vw;
    transition: 0.1s;
    font-size: 2vw;
    font-family: monospace;
    cursor: crosshair;
    text-align: center;
    z-index: 1;
    margin-bottom: 1.5vw;
}
spinoli button:hover{
    color: #ffffff;
}
#result {
  width: 25vw;
  height: 17vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#result img{
    width: 100%;
    height: 100%;
}
.summon {
  opacity: 0;
  transform: scale(0.9);
  animation: summonIn 1.5s ease forwards;
}
@keyframes summonIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
olilist{
    display: flex;
    justify-content: center;
    gap: 0.5vw;
}
#cover{
    width: 100%;
    max-width: 45vw;
    pointer-events: none;
}
olilist2{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.5vw 4.75vw;
    gap: 0.5vw;
    margin: auto;
}
olilist2 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none;
}
olilistbook{
    display: inline-flex;
    align-self: stretch;
    gap: 0.5vw;
    padding: 0 4.7vw;
    margin-bottom: 7vw;
}
olilistbook img{
    margin-top: 80vw;
    height: 39.1vw;
    width: auto;
    object-fit: contain;
}
#olizoom{
    scroll-margin-top: 15vw;
    pointer-events: none;
}



#imaginecell{
    width: 100%;
    max-width: 1vw;
    margin-left: 36vw;
    margin-top: 3vw;
    margin-bottom: 4vw;
    pointer-events: none;
}
gapimagine img{
    opacity: 0;
    margin-top: 100vw;
}
girls{
    position: relative;
    width: 100vw;
    height: 100vw;
}
.girls{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.drag{
    width: 100%;
    position: absolute;
    cursor: crosshair;
    user-select: none;
    touch-action: none;
}
.drag:active{
    cursor: crosshair;
}


#eventdesc{
    display: block;
    margin-top: 8vw;
}

#risodesc{
    display: block;
    margin-top: 8vw;
}

poster{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    pointer-events: none;
}
poster img{
    width: 100%;
    max-width: 35vw;
}
#careposter{
    display: block;
    margin-top: 8vw;
}

blueposter{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    pointer-events: none;
}
blueposter img{
    width: 100%;
    max-width: 65vw;
}

chairposter{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    pointer-events: none;
}
chairposter img{
    width: 100%;
    max-width: 30vw;
}

bodybook{
    display: flex;
    justify-content: right;
    margin-bottom: 8vw;
    margin-top: 140vw;
    margin-right: 18vw;
    overflow: hidden;
}
bodybook p{
    display: block;
    margin-top: 39%;
    margin-right: 8.5vw;
}
flipbook{
    margin-top: 10vw;
    display: block;
    position: relative;
    width: 100%;
    max-width: 32vw;
    height: 100vh;
    max-height: 44vw;
    perspective: 3500px;
}
#flipbook{
    scroll-margin-top: 6.5vw;
}
.page{
    position: absolute;
    width: 101%;
    height: 100%;
    transform-origin: left;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
    display: flex;
    cursor: crosshair;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.back{
    transform: rotateY(180deg);
}
.flipped{
    transform: rotateY(-180deg);
}

#page1 { z-index: 12; }
#page2 { z-index: 11; }
#page3 { z-index: 10; }
#page4 { z-index: 9; }
#page5 { z-index: 8; }
#page6 { z-index: 7; }
#page7 { z-index: 6; }
#page8 { z-index: 5; }
#page9 { z-index: 4; }
#page10 { z-index: 3; }
#page11 { z-index: 2; }
#page12 { z-index: 1; }

carecard{
    padding-top: 8vw;
    display: flex;
    justify-content: center;
    margin-left: 1vw;
    gap: 0.5vw;
    pointer-events: none;
}
carecard img{
    justify-content: center;
    width: 100%;
    max-width: 23vw;
    padding-bottom: 4vw;
}


#flashseries{
    gap: 2vw;
}

#botsw img{
    max-width: 32vw;
}


.bodarchive{
    width: 85vw;
    margin: 2rem auto;
    padding-bottom: 5vw;
}
.bodcard{
    columns: 4 12rem;
    gap: 0.7rem;
    pointer-events: none;
}
.bodcard img{
    width: 100%;
    margin-bottom: 0.5rem;
}
#archivetext{
    justify-content: center;
    text-align: center;
}

#whoami{
    scroll-margin-top: 9.5vw;
}
#whoami p{
    margin-left: 27.2%;
    width: 100%;
    max-width: 46.5%;
    text-align: justify;
    align-items: center;
    align-content: center;
    margin-bottom: 2vw;
}
#whoami h1{
    margin-top: 40vw;
    margin-bottom: 3vw;
    text-align: center;
}
#arrowwho{
    margin-top: -0vw;
    padding-right: 39.8vw;
}
navigationtabs{
    margin-top: 3vw;
    margin-bottom: 8vw;
    display: flex;
    justify-content: center;
    gap: 15vw;
}
navigationtabs p:hover{
    filter: invert(1);
    cursor: crosshair;
}
navigationtabs a{
    text-decoration: none;
}

seat{
    display: block;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-top: 7vw;
}
seat img{
    width: 100%;
    max-width: 38vw;
    cursor: crosshair;
}
seat p{
    margin-top: -3vw;
}

cv h1{
    color: #303030;
}
cv{
    display: block;
    padding: 1vw 24.25vw;
}
#cvhead{
    padding-bottom: 8vw;
}

#documentation {
    cursor: crosshair;
    transition: filter 0.3s;
}
#documentation:hover {
    filter: grayscale(100%);
}
.hidden {
    display: none;
}
#contents {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 15px;
}
#contents.active {
    max-height: 500px; /* Adjust based on content */
    padding: 15px;
}

shellfull{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0vw 25vw;
    margin: auto;
    position: relative;
    padding-bottom: 8vw;
}
shellfull img{
    width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none;
}

scatterbook{
    display: flex;
    justify-content: right;
    margin-bottom: 8vw;
    margin-top: 0vw;
    margin-right: 16.5vw;
    overflow: hidden;
}
scatterbook p{
    display: block;
    margin-top: 35%;
    margin-right: 8.5vw;
}
flipbook2{
    margin-top: 6vw;
    cursor: crosshair;
    display: block;
    position: relative;
    width: 100%;
    max-width: 33.6vw;
    height: 100vh;
    max-height: 44vw;
    perspective: 3700px;
}

PIN CUSHION

bruceimage{
    display: flexbox;
    text-align: center;
    align-content: center;
    align-items: center;
}
bruceimage img{
    margin-top: 5vw;
    margin-left: 26vw;
    width: 100%;
    max-width: 74.6vw;
    height: auto;
    margin-bottom: 3vw;
    pointer-events: none;
}
bruceimage p, bruceimage .subscript{
    text-align: right;
    margin-bottom: -0.6vw;
    margin-left: 13.45vw;
    width: 100%;
    max-width: 46.5%;
}
bruceside{
    padding-top: 5vw;
    display: flex;
    justify-content: center;
    gap: 1vw;
}
#zoombruce{
    width: 100%;
    max-width: 50vw;
    padding-bottom: 8vw;
    pointer-events: none;
}

DASHTEHRI

dashimage{
    display: flexbox;
    text-align: center;
    align-content: center;
    align-items: center;
}
dashimage img{
    margin-top: 5vw;
    margin-left: 26vw;
    width: 100%;
    max-width: 74.6vw;
    height: auto;
    margin-bottom: 3vw;
    pointer-events: none;
}
dashimage p, dashimage .subscript{
    text-align: left;
    margin-bottom: -0.6vw;
    margin-left: 26.1vw;
    width: 100%;
    max-width: 46.5%;
}
dashside{
    padding-top: 5vw;
    display: flex;
    justify-content: center;
    gap: 1vw;
}
#zoomdash{
    width: 100%;
    max-width: 50vw;
    padding-bottom: 8vw;
    pointer-events: none;
}

CHAPEL

chapelimage{
    display: flexbox;
    text-align: center;
    align-content: center;
    align-items: center;
}
chapelimage img{
    width: 100%;
    margin-bottom: -1vw;
    height: auto;
    pointer-events: none;
}