/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
}

body{

    background:#f4d8e5;
    font-family:
        Helvetica,
        Arial,
        sans-serif;

    color:#111;

    display:flex;
    justify-content:center;
}


/* ===========================
   PAGE
=========================== */

.page{

    width:min(980px,90vw);

    padding:56px 32px 60px;

}


/* ===========================
   HEADER
=========================== */

header{

    display:flex;

    justify-content:space-between;

    font-size:26px;

    letter-spacing:.04em;

    margin-bottom:55px;

}


/* ===========================
   NUMBERS
=========================== */

main{

    display:flex;

    justify-content:space-between;

    gap:70px;

    margin-bottom:70px;

}

.digit{

    width:360px;
    height:520px;

    position:relative;

}


/* ===========================
   PILL
=========================== */

.pill{

    width:74px;
    height:106px;

    border-radius:999px;

    background:white;

    position:absolute;

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

    font-size:32px;

    font-weight:500;

    transition:.25s ease;

    box-shadow:
        0 2px 10px rgba(0,0,0,.04);

}

.pill:hover{

    transform:translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

}


/* ======================================
   NUMBER 2
====================================== */

.two .p1{

    left:125px;
    top:0;

}

.two .p2{

    left:35px;
    top:90px;

}

.two .p3{

    left:235px;
    top:135px;

}

.two .p4{

    left:150px;
    top:255px;

}

.two .p5{

    left:255px;
    top:385px;

}

.two .p6{

    left:20px;
    top:425px;

}

.two .p7{

    left:95px;
    top:330px;

}

.two .p8{

    left:175px;
    top:435px;

}

.two .p9{

    left:0;
    top:210px;

}


/* ======================================
   NUMBER 6
====================================== */

.six .s1{

    left:150px;
    top:0;

}

.six .s2{

    left:90px;
    top:120px;

}

.six .s3{

    left:285px;
    top:220px;

}

.six .s4{

    left:285px;
    top:390px;

}

.six .s5{

    left:40px;
    top:330px;

}

.six .s6{

    left:175px;
    top:335px;

}

.six .s7{

    left:120px;
    top:210px;

}

.six .s8{

    left:285px;
    top:115px;

}

.six .s9{

    left:210px;
    top:455px;

}


/* ===========================
   FOOTER
=========================== */

footer{

    display:flex;

    justify-content:space-between;

    gap:30px;

    font-size:26px;

    line-height:1.45;

    letter-spacing:.02em;

}

footer div:nth-child(2){

    text-align:center;

}


/* ===========================
   MOBILE
=========================== */

@media(max-width:820px){

main{

    flex-direction:column;

    align-items:center;

}

footer{

    font-size:18px;

}

header{

    font-size:20px;

}

.page{

    padding:40px 20px;

}

}