body{
    font-family: Georgia, serif;
    
    margin:40px;
}

h1{
    font-size:48px;
}

h2{
    margin-top:40px;
}

img{
    border-radius:10px;
}

ol{
    font-size:22px;
}

p{
    font-size:18px;
    margin-top:8px;
    margin-bottom:10px;
}

/* ---------- Coffee ---------- */

.coffee-area{
    position:relative;
    height:80px;
    overflow:hidden;
    margin-bottom:25px;
}

.coffee,
.bread{
    position:absolute;
    font-size:38px;
}

/* 커피 */

.c1{
    top:10px;
    animation:coffeeMove 12s linear infinite;
}

/* 크루아상 */

.b1{
    top:42px;
    animation:breadMove 15s linear infinite;
}

/* ---------- Ducks ---------- */

.duck-area{
    position:relative;
    height:90px;
    overflow:hidden;
    margin-top:10px;
    margin-bottom:50px; 
}

.duck{
    position:absolute;
    font-size:40px;
}

.d1{
    top:0;
    animation:duck1 8s linear infinite;
}

.d2{
    top:28px;
    animation:duck2 15s linear infinite;
}

.d3{
    top:55px;
    animation:duck3 11s linear infinite;
}

.d4{
    top:85px;
    animation:duck4 19s linear infinite;
}





/* ---------- Animations ---------- */

@keyframes coffeeMove{

    0%{
        left:-60px;
        transform:translateY(0) rotate(-5deg);
    }

    50%{
        transform:translateY(-8px) rotate(5deg);
    }

    100%{
        left:100%;
        transform:translateY(0) rotate(-5deg);
    }
}

@keyframes breadMove{

    0%{
        left:100%;
        transform:translateY(0) rotate(8deg);
    }

    50%{
        transform:translateY(-10px) rotate(-8deg);
    }

    100%{
        left:-60px;
        transform:translateY(0) rotate(8deg);
    }
}

/* ---------- Ducks ---------- */

.duck-area{
    position:relative;
    height:140px;
    overflow:hidden;
    margin-top:10px;
    margin-bottom:50px;
}

.duck{
    position:absolute;
    font-size:40px;
}

.d1{
    top:0px;
    animation:duck1 8s linear infinite;
}

.d2{
    top:35px;
    animation:duck2 15s linear infinite;
}

.d3{
    top:70px;
    animation:duck3 11s linear infinite;
}

/* 물결 */

.d4{
    position:absolute;
    top:105px;
    font-size:22px;
    color:black;
    animation:duck4 19s linear infinite;
}

/* ---------- Duck Animations ---------- */

@keyframes duck1{
    0%{
        left:-70px;
    }
    100%{
        left:100%;
    }
}

@keyframes duck2{
    0%{
        left:100%;
        transform:scaleX(-1);
    }
    100%{
        left:-70px;
        transform:scaleX(-1);
    }
}

@keyframes duck3{
    0%{
        left:-100px;
        transform:translateY(0);
    }
    50%{
        transform:translateY(-6px);
    }
    100%{
        left:100%;
        transform:translateY(0);
    }
}

@keyframes duck4{
    0%{
        left:-150px;
    }
    100%{
        left:100%;
    }
}