body {

    /* width: 100vw;*/
    height: 100vh; 

    display: flex;
    flex-direction: column;

    /* 맨 위에 width height가 잡혀야 먹히는 부분 */
    /* justify-content: center; */
    align-items: center;


    background-color: rgb(245, 239, 239);

}

header, main, footer {

    /* width 고정해놓고 > body부분가서 
    justify-content: center 부분만 남기고 
    align-items: center만 풀어줘본다*/
    width: 800px;
    background-color: white;

    margin: 10px;
    padding: 20px;

    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

header {
    background-color: rgb(37, 37, 37);
    color: aliceblue;
    margin: 25px;

}

header > h1 {
    text-align: center;

}

header span {
    color: rgb(29, 216, 138);

}

ul {
    list-style: none;
}


footer {
    padding: 0px 20px;
}


footer > ul {
    display: flex;
    justify-content: end;

    /* li들의 간격 두려면 마진을 주는데, 
    ul안에 있는 li에 마진줘야 한다. */

}
footer > ul > li {
    margin: 5px 20px 50px 80px;

}

a {
    /* 하이퍼링크 밑줄 제거 */
    text-decoration: none;

    /* 푸터에 있는 a랑 다르게 하고 싶다면. 아래에 새로 작성 */
}

footer a {

    /* footer 전체에 먹혀있는 마진과 패딩이 있다면 footer a 부분에서  */
    display: inline-flex;
    
    background-color: rgb(37, 37, 37);
    color: aliceblue;

    /* 경계 둥글게 하려면 래디우스 */
    border-radius: 10px;
    padding: 0px 20px;
}

footer a:hover {
    background-color: blueviolet;
}

main {
    height: 500px;
}
/* main에서 500%잡고 싶지 않다면 
03.HTML 만 잡고 싶다면

자바스크립트 동안은 메인영역을 고정시키소 진행 예정
*/


main li {
    /* border: 1px solid rgb(77, 2, 250); */
    border-bottom: 1px solid rgb(77, 2, 250);

    padding: 10px;
    margin-top: 10px;

}

/* 커서 올리면 색깔 변하는 것 = hover
main li 자체에 hover를 줄 수도 있다*/
main li:hover {
    background-color: aliceblue;
}