/* background */
#background {
    background-color: #82566c;
    background-image: url('../img/ryounkakuBackground.png');
    background-size: cover;
    background-position: top;
    background-repeat: repeat;
    transform: rotateY(180deg);
}

/* page content */
main {
    position: relative;
    width: 60%;
    padding: 1rem 0 1rem 4.5%;
}

article.content-box {
    padding-top: 0;
}

#studio-title a {
    display: flex;
    justify-content: center;
}

/* 👻 */
#secret-1 {
    position: fixed;
    top: calc(16vw - 2px);
    left: 74.9%;
    width: 2.4vw;
    height: 4.4vw;
    clip-path: polygon(
        35% 0, 
        100% 50%, 
        100% 100%, 
        80% 95%, 
        70% 100%, 
        50% 100%, 
        20% 90%, 
        20% 80%, 
        40% 70%, 
        20% 70%, 
        0 75%, 
        0 60%, 
        20% 50%, 
        20% 30%, 
        0 30%, 
        0 0
    );
    /* background-color: hsla(300, 100%, 25%, 0.5); */
}

/* LIGHT MODE STYLE OVERRIDE */
@media (prefers-color-scheme: light) {
    #background {
        background-color: #82566c;
        background-image: url('../img/ryounkakuBackground.png');
        background-size: cover;
        background-position: top;
        background-repeat: repeat-y;
        transform: rotateY(180deg);
    }
}

/* DARK MODE STYLE OVERRIDE */
@media (prefers-color-scheme: dark) {
    #background {
        background-color: #82566c;
        background-image: url('../img/ryounkakuBackground.png');
        background-size: cover;
        background-position: top;
        background-repeat: repeat-y;
        transform: rotateY(180deg);
    }
}

/* MOBILE-DEVICE STYLE OVERRIDES */
@media all and (max-width: 130vh) {
    main {
        padding: 0;
        margin: auto;
    }
    
    #secret-1 {
        display: none;
    }
    
    #background {
        background-position: 75%;
    }
}