@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    background-color: black;
    color : #ECECEC;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center; /*column 방향이기 때문에 align 사용*/
    font-family: 'GmarketSansMedium';
}
.header{
    display: flex;
    height: 150px;
    width: 500px;
    align-items: center;
}
.logo{
    font-size: 2em;
    font-weight: 700;
    width: 300px;
}
.detail{
    font-size: 1em;
    width: 180px;
}
#clock-js{
    padding-top: 5px;
}
.todoList{
    display:flex;
    flex-direction: column;
    width: 450px;
}
.todoInput{/*input container*/
    display:flex;
    height:35px;   
    padding-bottom: 5px;
}
input[type=text]{/*input 태그 따로 설정*/
    background-color: black;
    color: #ECECEC;
    border: solid 2px #ECECEC;
    border-radius: 6px;
    width: 400px;
}
#plusButton{
    background-color: black;
    color: #ECECEC;
    border: solid 2px #ECECEC;
    border-radius: 6px;
    width: 35px;
    margin-left: 5px;
    transition : border 0.3s, color 0.3s;
}
#plusButton:hover{
    border : solid 2px #5f5f5f;
    color : #5f5f5f;
}
.todoCard{
    background-color: #ECECEC;
    color : black;
    display:flex; /*todoElem 세로축 가운데 정렬*/
    align-items:center;
    justify-content:space-between;/* item 사이 간격 균일하게 */
    height: 100px;
    margin : 7px 0;
    border-radius: 8px;
}
.todoCard.checked{
    transition : opacity 0.3s;
    opacity: 0.5;
}
.todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/
    opacity: 0.6;
}
.todoElem{
    flex:1; /*여백 다 채우게끔*/
    margin-left:30px;
}
input[type=checkbox]{
    margin-left: 20px;
}
.todoDelete{
    border: none;
    margin-bottom: 80px;
    margin-right: 5px;
    font-size: 7px;
    border-radius: 2px;
    transition : background-color 0.3s;
}
.todoDelete:hover{
    background-color: #b1b1b1;
}