@import url('reset.css');

:root {
  /* color */
  --background: #E4EBF5;
  
  /* font */
  --nexon-G_b: 'NEXON Lv2 Gothic Bold';
  --nexon-G_r: 'NEXON Lv2 Gothic';
  /* box-shadow */
  
}


/* *{outline: 1px solid #f00;} */
html{font-size: 20px;}
body { display: flex;justify-content: center; align-items: center;  height: 100vh; 
  background-color: var(--background);  color: #000;  font-size: 0.8rem;}
.hidden{display: none;}

.mainmode{padding: 1rem; flex: 1;font-family: var(--nexon-G_r);}

.concept-img {width: 100%;}
.concept-img img{display: block; width: 100%;}

.mainmode .container .top {margin-bottom: 1rem;}

/* 로그인화면 */
#clock,
#weather {text-align: center;}
.row.top .col-xl-12 {display: flex; flex-direction: column; justify-content: space-around;align-items: center;}


#login-form {font-size: 2.5rem; text-align: center;margin: 0 auto;}
#login-form h3 {font-size: 3rem; margin-bottom: 1rem;}
#login-form input {width: 100%; border-radius:122px; padding: 1rem; background-color: var(--background); box-shadow:inset 20px 20px 60px #d6dde6,inset -20px -20px 60px #f2f9ff; font-size: 1.5rem; text-align: center;margin-bottom: 2rem;}

#greeting {text-align: center; font-weight: 700;}

#todo-form,
#todo-list {font-family:  var(--nexon-G_r);}
#todo-form input {padding: 1rem;width:100%; margin-bottom: 30px; border-radius:122px;background:#E4EBF5;box-shadow:inset 20px 20px 60px #d6dde6,inset -20px -20px 60px #f2f9ff;}
#todo-list {padding: 4rem; height: 30rem;border-radius: 105px;
   background: var(--background);  box-shadow:  20px 20px 60px #d6dde6,-20px -20px 60px #f2f9ff;}
#todo-list li {padding: 0.2rem 0;}
#todo-list button{background-color: transparent; margin-left: 10px; font-weight: 700; color: #7794BE
  ;}

  @media (max-width:820px) {

    #clock {text-align: center; margin-top: 2rem;}
    #todo-list {padding: 2rem; height: 15rem;border-radius: 20px;}
    .concept-img img {width: 100%;}
  }

  @media (max-width:420px) {
    html {font-size: 13px;}
  }