body{
    height: fit-content;
}

main{
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    gap: 10px;
    min-height: 80vh;
    height: auto;
}

.backeffect{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    &::after{
        content: "";
        display: flex;
        height: 100%;
        width: 100%;
        background-image: url(../resources/backeffect.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: center;
        --mask-value: 60%;
        mask-image: linear-gradient(transparent 0%, white calc(100% - var(--mask-value)), white var(--mask-value), transparent 100%);
    }
}

.fronteffect{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    &::after{
        content: "";
        display: flex;
        height: 100%;
        width: 100%;
        background-image: url(../resources/fronteffect.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: center;
        --mask-value: 60%;
        mask-image: linear-gradient(transparent 0%, white calc(100% - var(--mask-value)), white var(--mask-value), transparent 100%);
        background-position: center;
    }
}

.system-image{
    height: 1000px;
    max-height: 250dvh;
    aspect-ratio: 1024/1444;
    z-index: 2;
    user-select: none;

    background-image: url('../resources/system-transparent.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}