html,
body{
    width:100%;
    height:100vh;
    margin:0;
    overflow:hidden; /* no scrolling */
}

.main-screen{
    position:relative;
    width:100%;
    min-height:100vh;

    background-image:url('images/background_icon_img.png');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px 0; /* TOP & BOTTOM SPACE */
    overflow:visible;
}

.agreement-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px 0;
}

.agreement-fit{
    width:100vw;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:70px 0; /* OUTSIDE IMAGE */
    box-sizing:border-box;
}

.agreement-sheet{
    height:calc(100vh - 40px); /* 20px top + 20px bottom gap */
    width:auto;
    aspect-ratio:530/840;

    background:url('images/stamp_paper.png') no-repeat center;
    background-size:100% 100%;

    position:relative;
}

/* CONTENT */

.agreement-content{
    position:absolute;

    top:335px;

    left:30px;
    right:30px;

    width:auto;

    padding:0;
}

.tagline{
    text-align:center;
    font-size:13px;
    line-height:1.4;
    margin-bottom:18px;
}

.agreement-divider{
    width:100%;
    height:1px;
    background:#999;
    margin:15px 0;
}

.agreement-title{
    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:18px;
    font-weight:700;

    margin-bottom:12px;
}

.rules-box{
    width:100%;

    border:1px solid #999;

    padding:15px;

    box-sizing:border-box;
}
.rules-box ol{
    padding-left:25px;
}

.rules-box li{
    font-size:13px;
    line-height:1.5;
    margin-bottom:18px;
}

/* Tablet */
@media (max-width:768px){

    .agreement-sheet{
        width:85vw;
        height:auto;
        aspect-ratio:530/840;
    }

    .agreement-content{
        top:63%;
        left:6%;
        right:6%;
    }
}

/* Mobile */
@media (max-width:480px){

    .agreement-sheet{
        width:92vw;
        aspect-ratio:530/840;
    }

    .agreement-content{
        top:63%;
        left:5%;
        right:5%;
    }

    .tagline{
        font-size:11px;
    }

    .agreement-title{
        font-size:15px;
    }

    .rules-box li{
        font-size:11px;
        line-height:1.4;
    }
}