.hidden {
    display: none;
}

.bg{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: fadeIn 0.5s linear;
    object-fit: cover;
    color: #000;
    filter: brightness(0.7);
    /* background-color: rgba(0, 0, 0, 0.8); */
  }

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

 .clock-design{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
    margin: 0 auto;
    position: absolute;
    top :30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 70px;
    
    /* 그림자 설정 */
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
 }

.logoutBtn{
  position: absolute;
  top: 20px;
  right: 20px;
}

.mainForm{
  position: absolute;
  bottom :50%;
  left: 50%;
  transform: translate(-50%, 0);
}

.mainForm span{
  font-weight: bold;
  font-size: 50px;
  color: white;   
  /* 그림자 설정 */
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000; 
}

.tdl{
  position: absolute;
  top : 50%;
  left: 50%;
  transform: translate(-50%, 0);
}
#todo-Div{
  width: 60vh;
}

#todo-form input{
  margin-top: 20px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 40px;
  font-size: 15px;
  text-align: center;
  border-radius: 15px;
  box-shadow: none;
  border: 5px solid #fff; 
  background: transparent;
  color: #fff;
}

#todo-form input::placeholder{
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 20px;
}

#login-form input{
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  width: 50vh;
  height: 40px;
  text-align: center;
  border-radius: 15px;
  box-shadow: none;
  border: 5px solid #fff; 
  background: transparent;
  color: #fff;
}

#login-form input::placeholder{
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 20px;
}

/* 리스트 css */

#todo-list li{
  margin-top: 10px;
}

#todo-list{
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
}

#todo-list li{
  width: 100%;
}

#todo-list li span{
  max-width: 30vh;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-shadow:

  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
}

/* 리스트 삭제 버튼 css */
#todo-list li button{
  cursor: url(img/mouse.png), pointer;
  /* cursor: pointer; */
  background: transparent;
  border: none;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
  float: right;
}

/* 로그아웃 버튼 css */
#logout input{
  filter: invert(87%) sepia(68%) saturate(903%) hue-rotate(180deg) brightness(112%) contrast(106%);
  width: 45px;
  height: 45px;
}

/* 명언 부분 css */
#quote {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;  
  position: absolute;
  bottom : 10%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}

#city{
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;  
}

#weather{
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;  
}

#quote div{
  margin-bottom: 30px;
}