@charset "UTF-8";
:root{
    --inner-height:100px;
    --inner-radius:45deg;
}



body{
    margin:0;
    /* width:100%;
    height:100%; */
}
#j-01{
    width:100vw;
    height:500vh;
    background:white;
    position:relative;
    overflow: hidden;
    z-index:-1;
}

#j-01-text{
    width:100%;
    height:100vh;
    position:fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 2; */
}
#j-01-text p{
    color:black;
    font-size:15vw;
    font-weight: bold;
    display: inline-block;
    position:absolute;
}
#j-void{
    width:100vw;
    height:100vh;
}
#j-01-bg{
    background-color:white;
    mix-blend-mode: difference;
    width:200vw;
    height:400vh;
    transform: rotate(var(--inner-radius));
}
#j-02{
    background:blue;
}



/* #j-001{
    background:blue;
    width:100%;
    height:var(--inner-height);
    text-align: center;
    position:fixed;
    z-index: -1;
    background-clip: text;
    color:transparent;
}
#j-001 h1{
    color:pink;
    position: absolute;
    top:50%;
    margin:0;
    font-size:50px;
    width:100%;
    height:100%;
} */
/* 
#j-001-1{
    background:pink;
    width:100%;
    height:var(--inner-height);
    text-align: center;
    background-clip: text;

    
}
#j-001-1 h1{
    color:blue;
    position: absolute;
    top:50%;
    margin:0;
    font-size:50px;
    width:100%;
    height:100%;
}
#j-001-1 h1{
    color:blue;
    position:fixed;
    top:50%;
}

#j-002{

} */