body{
    margin: 0px;  /* body 기본 속성이 margin 8px이라서 애매해서 항상 0px로 죽여주기 */
    background-image: url(background.avif);
    /* 배경 반복되는거 1개만 딱! */
    background-repeat: no-repeat; 
    /* 배경 1개가 웹사이트 전체를 다 cover해주면 좋겠을때 */
    background-size: cover; 
}

.container{
    background-color: aliceblue;
    /* 최소높이가 100 view height. 사용자가 보는 화면의 높이만큼. 100vh로 하면 꽉 차게 */
    min-height: 100vh; 
    /* 박스 셰도우로 박스에다가 살짝 그림자 */
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.task-tabs{
    /* UI의 기본속성이 세로이기 때문에 div를 만들면 all, not Done, Done이 모두 세로로 들어감
    가로로 바꾸려면 1. display:flex를 써줘야 한다. 2. 근데 이거를 누구한테? flex는 부모한테 적용해야 한다! */
    /* flex-direction: column; 이렇게 해도 가로를 세로로 바꿀 수 있음. 기둥으로 바꾸겠다 */
    display: flex; 
    /* 똑같이 복사해서 task-tabs에도 적용 가능, 밑에다가 줄 좀 그리자*/
    border-bottom: 1px solid lightgray;
    position: relative;
    /* align-items: center; 이거는 왼쪽 끝에 있는 것들을 가운데로 가져오기 */
}


.task-tabs div{
    /* task-tabs 밑의 div에다가 공간을 줌 벌리고 싶다. padding으로 1em정도 준다 */
    padding: 1em;
    cursor: pointer; 
    /* 커서를 i 모양에서 클릭 버튼 느낌으로 바꾸기~ */
}

.task-area{
    /* task-area에다가 그림을 그리고 싶은데 그림을 그리려면 border 사용! */
    /* tab들 밑에다가 우리가 할일들 추가하면 할일들을 감싸는 박스!! */
    border: 1px solid lightgray;
}

#under-line{ 
    /* 자바스크립트 가서 많이 쓸거라서(under-line을) 그래서 일부러 id값으로 줌 */
    /* 선을 얇게 4px정도 */
    height: 4px;
    background-color: pink;
    /* 절대값으로 주는 이유는 위치를 내가 직접 지정하려고(x좌표, y좌표로) */
    /* 절대값으로 주면 이렇게 width나 왼쪽, 오른쪽 이렇게 지정해줄 수 있음 */
    /* position: relative;를 under-line의 부모인 task-tabs에 줘야, absolute의 기준점이 task-tabs가 됨 */
    position: absolute;
    /* width: 넓이 */
    width: 60px;
    /* 왼쪽에서부터 0px 떨어뜨려 놓고 */
    left: 0px;
    /* 위에서부터 52px정도 떨어뜨려 놓고 */
    top: 52px; 
    /* div 태그에 기본 padding 값들이 있는데, 일단 0px로 세팅 */
    padding:0px;
    transition: 0.5s;
    /* under line이 부드럽~게 넘어가기 위함 */
}

.task{
    display: flex;
    /* 이제 할일은 왼쪽에, 버튼들은 오른쪽 끝에 있어야 함. 사이를 벌려놔야해. 사이에 간격을 쫘아악~ , 만약에 중간에 놔두고 싶으면 center~로 하면되지유*/
    justify-content: space-between; 
    /* 이제부터는 짜잘짜잘한 스타일 */
    padding: 1em;
}

.done-task{
    /* 텍스트에 밑줄 쫘악 긋기 */
    text-decoration: line-through;
}

.finish-task{
    display: flex;
    /* 이제 할일은 왼쪽에, 버튼들은 오른쪽 끝에 있어야 함. 사이를 벌려놔야해. 사이에 간격을 쫘아악~ */
    justify-content: space-between;
    /* 이제부터는 짜잘짜잘한 스타일 */
    padding: 1em;
    background-color: rgba(211, 211, 211, 0.5); /* 연한 회색 배경에 투명도 50% */
}

#task-input{
    width: 1000px;
}