/* translation from native laptop px to VH/VW: 8.66, 15.38 for a viewport of 1538 px by 866 px*/ 

:root {
    --purple-slider-height: 17.321VH;
    --yellow-slider-height: 5.77VH;
}

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

@font-face {
    font-family: 'ZZZ glifs';
    src: url(/fonts/ZZZA-Regular.ttf) format("truetype");
}

@font-face {
    font-family: 'ZZZ glifs B';
    src: url(/fonts/ZZZSystem-Regular.tff) format("truetype");
}

@font-face {
    font-family: 'dice';
    src: url(/fonts/Tumblindicee-6yAY.ttf) format("truetype");
}

body {
    background-color: #141414;
    color: #FFFFFF;
    overflow: hidden;
    margin: 0px;
}

h1 {
    color: #FFFFFF;
    font-family: 'ZZZ basic', sans-serif;
    font-size: clamp(1.875rem, 1.7045rem + 0.6818vw, 2.25rem);
}

h2 {
    color: #FFFFFF;
    font-family: 'ZZZ basic', sans-serif;
    font-size: clamp(1.5rem, 1.3636rem + 0.5455vw, 1.8rem);
    text-align: center;
}

h3 {
    color: #FFFFFF;
    font-family: 'ZZZ basic', sans-serif;
    font-size: clamp(1.25rem, 1.1364rem + 0.4545vw, 1.5rem);
}

p {
    color: #FFFFFF;
    font-family: 'ZZZ basic', sans-serif;
    font-size: calc(0.65VW + 1.15VH);
}

.yellow {
    color:#FECF13;
}

.purple {
    color:#6F6FB3;
}

.background-container {
    position: absolute;
    overflow: hidden;
    height: 200VH;
    transform: rotate(-20deg) translateY(-650px); 
    /* was -550 */
}

.sliding-background {
  background: url("/images/MoriWebsite.webp") repeat-x;
  height: 100%;
  width: 3840px;
  background-size: contain;
  animation: slide 90s linear infinite;
}

@keyframes slide{
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.purple-slider {
    /* height: 150px; */
    height: var(--purple-slider-height);
    width: 100%;
    background-color: #6F6FB3;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    position: absolute;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}


.filler-slider {
    background-color: #141414;
    /* height: 150px; */
    height: var(--purple-slider-height);
    width: 100%;
    /* background-color: grey; */
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    position: absolute;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.yellow-thins {
    /* height: 50px; */
    height: var(--yellow-slider-height);
    width: 100%;
    background-color: #FECF13;
    color: #FFFFFF;
    margin: 0px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    display: flex;
}

.main-scroller {
    height: max-content;
    overflow: clip;
    align-content: center;
    gap: 2rem;
}

.purple-scroller {
    display: flex;
    gap: 2rem;
    padding-left: 2rem;
    width: max-content;
    height: max-content;
    animation: left-to-right 15s linear reverse infinite;
}

.purple-slider-text {
    overflow: clip;
    color: #FFFFFF;
    font-family: 'ZZZ glifs', sans-serif;
    font-size: 5em;
}

.filler-scroller {
    display: flex;
    width: max-content;
    height: 15vh;
    animation: left-to-right-filler 20s linear infinite;
}

.scroller {
    width: 100%;
    overflow: clip;
    align-items: center;
    gap: 2rem;
}


.inner-scroller {
    display: flex;
    gap: 2rem;
    padding-left: 2rem;
    animation: left-to-right 30s linear reverse infinite;
}

.item {
    overflow: clip;
}

.yellow-scroller-backdrop {
    /* height: 160px; */
    height: 18.48VH;
    width: 100%;
    background-color: #252525;
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: rotate(70deg) translateY(57.16VH) translateX(24.38VW);
    /* was 495 375*/
}

@keyframes left-to-right {
    to {
        transform: translateX(-50%);
    }
}

@keyframes left-to-right-filler {
    from {
        transform: translateX(5.5%);
    }
    to {
        transform: translateX(-4.25%);
    }
}

@keyframes slide-in {
    from {
        transform: translateX(-100%)
    }
    to {
        transform: translateX(-50%)
    }
}

.slide_to_basic {
    transform: translateX(0%);
}

#slider1 {
    transform: rotate(70deg) translateY(75.06VH);
    /* was 650 */
}


@media (max-width: 1100px){
    #slider1 {
        transform: rotate(70deg) translateY(75.06VH) translateX(200px);
    }
}

#slider-fill {
    transform: rotate(70deg) translateY(92.38VH);
    /* was 800 */
}

#slider2 {
    transform: rotate(70deg) translateY(109.7VH);
    /* was 950 */
}

#thin1 {
    transform: rotate(70deg) translateY(62.93VH) translateX(24.38VW);
    /* was 545 375*/
}

#thin2 {
    transform: rotate(70deg) translateY(55.43VH) translateX(24.38VW);
    /* was 480 375*/
}

.navigation-window {
    border: 5px solid;
    border-radius: 50px;
    background-color: #252525;
    /* border-color: blue; */
    /* height: 100px; */
    height: 11.55VH;
    width: 65%;
    margin-left: 26VW;
    margin-top: 2.3VH;
    position: absolute;
    top: 0px;
    align-content: center;
}

.navigation-button {
    padding: 0;
    border: none;
    background: none;
    /* margin-inline-start: 90px; */
    margin-inline-start: 5.85VW;
    float: left;
    text-align: center;
    font-size: 2.08VW;
    font-family: 'ZZZ basic', sans-serif;
    color: #FFFFFF;
    cursor: pointer;
}

.content-window {
    /* margin-left: 100px; */
    border: 5px solid;
    border-color: #252525;
    border-radius: 15px;
    background-color: rgba(37, 37, 37);
    position: absolute;
    align-content: center;
    overflow: hidden;
    border-color: #FFFFFF;
    border-width: 5px;
}

#home-page {
    height: auto;
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
    display: inline;
    margin-left: 29.26VW;
    margin-top: 23.09VH;
}

#about-page {
    height: auto;
    width: 65%;
    padding: 15px;
    display: none;
    margin-left: 24.26VW;
    margin-top: 23.09VH;
}

#about-page-mobile {
    height: auto;
    width: 65%;
    padding: 15px;
    display: none;
    margin-left: 24.26VW;
    margin-top: 23.09VH;
}

#project-page {
    height: 200px;
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
    display: none;
    margin-left: 29.26VW;
    margin-top: 34.64VH;
}

#link-page {
    height: auto;
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
    display: none;
    margin-left: 29.26VW;
    margin-top: 23.09VH;
}

@keyframes pulsefire {
    0% {
        color: #FECF13;
        scale: 98%;
    }

    50% {
        color: #C1FD5E;
        scale: 102%
    }

    100% {
        color: #FECF13;
        scale: 98%;
    }
}

#square-picture {
    margin: 20px;
    height: 28.89VH;
    width: 16.25VW;
    float: left;
    align-content: center;
    text-align: center;
}

#self-portrait {
    align-content: center;
    /* border-radius: 100%; */
    max-width: 100%;
}

#about-text {
    width: 65%;
    float: left;
}

#about-text-mobile {
    width: 65%;
    margin-left: 1VW;
}

.social-link {
    align-items: center;
    display: inline-flex;
}

.icons-left {
    max-width: 40px;
    margin-right: 5px;
}

#volume-button {
    margin: 0px;
    padding: 0px;
    position: absolute;
    right: 1%;
    top: 2%;
    background: none;
    border: none;
}

#volume-button:hover{
    cursor: pointer;
}

#volume-on-white {
    display: inline;
}

#volume-off-white {
    display: none;
}

#soundtrack-button {
    margin: 0px;
    padding: 0px;
    position: absolute;
    right: 1%;
    bottom: 1%;
    background: none;
    border: none;
    animation: rotation 6s linear infinite;
    transform-origin: center center;
}

#soundtrack-button:hover{
    cursor: pointer;
}

@keyframes rotation {
    to {transform: rotate(360deg)}
}

#soundtrack-text-holder{
    display: none;
    position: absolute;
    padding-left: 20px;
    align-content: center;
    height: 120px;
    background-color: #252525;
    bottom: 0;
    width: 100%;
}

.soundtrack-text{
    text-align: left;
    margin-right: 100px;
}