@font-face{
    src: url(SpecialElite-Regular.ttf);
    font-family: SpecialElite;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: SpecialElite;
}

html {
  overflow: scroll; /* Forces the scrollbar to stay visible */
  scrollbar-gutter: stable; /* Reserves space for the scrollbar so content never jumps */
}

.body {
    position: relative;
    width: 100vw;
    height: 3000vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scroll-trigger-div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

#end {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 3000vh;
    opacity: 1;
}

#loading-container {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    background-color: rgb(255, 255, 255);
    z-index: 500;
}

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 501;
    font-size: 2em;
    letter-spacing: 3vw;
    padding-left: 1.5vw;
}

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: blue; */
}

#name-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2em;
    padding-top: calc(3vw + 2em);
    padding-bottom: 3vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: rgb(87, 22, 83); */
}

#name {
    /* text-align: center; */
    font-size: 2em;
    letter-spacing: 3vw;
    padding-left: 3vw;
    opacity: 0;
}

#title-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2em;
    padding-top: 3vw;
    padding-bottom: calc(3vw + 2em);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: rgb(6, 199, 61); */
}


#title {
    position: fixed;
    font-size: 2em;
    letter-spacing: 3vw;
    padding-left: 3vw;
    opacity: 0;
}


#painting-container {
    width: 100%;
    height: calc(100% - 12vw - 4em);
    z-index: 2;
    position: fixed;
    object-position: center;
    object-fit: contain;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scroll {
    position: absolute;
    bottom: 50%;
    padding-bottom: 1.5vw;
    font-size: 2em;
    letter-spacing: 1.5vw;
    padding-left: 1.5vw;
    opacity: 0;
    z-index: 502;
}

#down {
    position: absolute;
    top: 50%;
    padding-top: 1.5vw;
    font-size: 2em;
    letter-spacing: 1.5vw;
    padding-left: 1.5vw;
    opacity: 0;
    z-index: 503;
}

/* #source {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 3;
} */

#e0 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 3;
}
#e1 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 4;
}
#e2 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 5;
}
#e3 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 6;
}
#e4 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 7;
}
#e5 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 8;
}
#e6 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 9;
}
#e7 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 10;
}
#e8 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 11;
}
#e9 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 12;
}
#e10 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 13;
}
#e11 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 14;
}
#e12 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 15;
}
#e13 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 16;
}
#e14 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 17;
}
#e15 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 18;
}
#e16 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 19;
}
#e17 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 20;
}
#e18 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 21;
}
#e19 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 22;
}
#e20 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 23;
}
#e21 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 24;
}
#e22 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 25;
}
#e23 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 26;
}
#e24 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 27;
}
#e25 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 28;
}
#e26 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 29;
}
#e27 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 30;
}
#e28 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 31;
}
#e29 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 32;
}
#e30 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 33;
}
#e31 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 34;
}
#e32 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 35;
}
#e33 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 36;
}
#e34 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 37;
}
#e35 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 38;
}
#e36 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 39;
}
#e37 {
    position:absolute;
    width: 80%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 40;
}

.outer-square {
    position: absolute;
    max-width: 80%;
    max-height: 90%;
    aspect-ratio: 1 / 1;
    width: 80%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-square {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    height: 100%; 
    width: auto;
    background-color: rgb(21, 22, 17);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    overflow: hidden;
}

#paint-bg {
    position:absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 100;
}

#photo-container {
    width: 100%;
    height: calc(100% - 12vw - 4em);
    z-index: 101;
    position: fixed;
    object-position: center;
    object-fit: contain;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

#photo {
    position:absolute;
    width: 87%;
    height: 98%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    z-index: 101;
}


/* #bg {
    object-fit: cover;
    object-position: center;
    z-index: 1;
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    perspective: 250px;
    overflow: hidden;
} */

/* #container-container {
    width: 100%;
    height: 70%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
} */




/* #blurb{
    font-family: SpecialElite;
    font-size: 1em;
    position: absolute;
    top: 105vh;
    padding-top: 10vw;
    padding-left: 20vw;
    padding-right: 20vw;
    padding-bottom: 10vw;
    min-width: 100vw;
    min-height: 113vw;
    background-image: url(Paperlong.jpg);
    background-repeat: repeat-y;
    background-size: 80vw;
    background-position-x: 10vw;
    z-index: 400;
} */
/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper,
content {
    position: relative;
    width: 100%;
    z-index: 1;
}
.content{
    overflow: hidden;
}

.content .section{
    width: 100%;
    height: 100vh;
}
.content .section.doorway{
    background-image: url(Gallerybg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image-container{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    perspective: 250px;
    overflow: hidden;
}

.image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

body{
    background-image: url(Gallerybg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
} 

.blurb-container{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 360;
    perspective: 100px;
    overflow: hidden;
}

#blurb{
    font-family: SpecialElite;
    font-size: 1em;
    position: absolute;
    top: 100vh;
    padding-top: 10vw;
    padding-left: 20vw;
    padding-right: 20vw;
    padding-bottom: 10vw;
    background-image: url(Paperlong.jpg);
    background-repeat: repeat-y;
    background-size: 80vw;
    background-position-x: 10vw;
    z-index: 400;
}
 */