@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poiret+One');

/*
    <키프레임 주기>
    0~25% : 새벽에서 아침으로 바뀌는 구간
    25~50% : 오전에서 낮으로 바뀌는 구간
    50~75% : 낮에서 저녁으로 바뀌는 구간
    75~100% : 밤 구간
 */

/* 관람차 회전시키는 키프레임 */
@keyframes rotation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* 배경 하늘색을 변경하는 키프레임 */
@keyframes sky {
    0% {background-color: #b08fcc;}
    25% {background-color: #b1e1e2;}
    50% {background-color: #fcd2e2;}
    75% {background-color: #636888;}
    100% {background-color: #b08fcc;}
}

/* 태양이 회전하는 키프레임 */
@keyframes sun {
    0% {opacity: 0; transform: rotate(-90deg);}
    25% {opacity: 1; transform: rotate(-30deg);}
    50% {opacity: 1; transform: rotate(30deg);}
    75% {opacity: 0; transform: rotate(90deg);}
    100% {opacity: 0; transform: rotate(-90deg);}
}

/* 밤에 특정 요소를 숨기는 키프레임 */
@keyframes day {
    0% {opacity: 0;}
    25% {opacity: 1;}
    50% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}
}

/* 사람과 구름을 오른쪽으로 이동시키는 키프레임 */
@keyframes flow {
    0% {left: 0%; opacity: 0;}
    10% {opacity: 1;}
    80% {opacity: 1;}
    100% {left: 90%; opacity: 0;}
}

* {
	margin: 0;
	padding: 0;
}
body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #b1e1e2;

    animation: sky linear 20s infinite;
}
h1 {
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 150%);
    font: 92px/1 "Poiret one";
    color: #fff;
    text-align: center;
    margin-top: 90px; /* 보정 */

    animation: day linear 20s infinite;
}
section {
    width: 1000px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    margin-top: 90px; /* 보정 */
}
section .sky {
    position: absolute;
    width: 100%;
    height: 100%;
}
section .sky .sun {
    position: absolute;
    top: -150px;
    left: 50%;
    margin-left: -100px;
    transform-origin: center 500px; /* 태양의 중심축을 아래쪽으로 500만큼 이동 */

    animation: sun linear 20s infinite;
}
section .sky .cloud1 {
    position: absolute;
    top: -30px;
    left: 10%;

    animation: flow linear 10s infinite;
}
section .sky .cloud2 {
    position: absolute;
    top: 20px;
    left: 0;

    animation: flow linear 20s infinite;
}
section .town .circle {
    position: absolute;
    bottom: 104px;
    left: 50%;
    margin-left: -165px;
    opacity: 0.7;

    animation: rotation linear 20s infinite;
}
section .town .night {
    position: absolute;
    bottom: 0;
    left: 40px;
}
section .town .day {
    position: absolute;
    bottom: 0;
    left: 40px;

    animation: day linear 20s infinite;
}
section .people {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    animation: day linear 20s infinite;
}
section .people .man {
    position: absolute;
    left: 0%;
    bottom: 0px;

    animation: flow linear 7s infinite;
}
section .people .family {
    position: absolute;
    left: 0%;
    bottom: 0px;

    animation: flow linear 20s infinite;
}