body{
   font-family: Roboto;
   background-image: url(/images/bg.jpg);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-attachment: fixed;
   overflow-y: scroll;
}


/* div 기본 구역 크기 설정 */

               #listAdd_main_hidden{
                  position: absolute;
                  background-color: white;
                  width: 30%;
                  height: 40%;
                  border: 1px solid black;
                  margin-top: 8%;
                  left: 15%;
                  display: flex;
                  flex-direction: column;
                  display: none;
               }


               .big_nemo{
                  width: 1180px;
                  height: 550px;
                  margin: auto;
                  display: flex;
                  justify-content: space-evenly;
                  margin-top: 10px;
               }
      
               .nem1{
                  width: 60%;
                  height: 100%;
                  /* background-color: white; */
                  border-radius: 40px;
                  margin-right: 0.5em;
                  flex-direction: row;
               }
      
                  .to_do_list{
                     width: 98%;
                     height: 98%;
                     background-color: white;
                     border-radius: 40px;
                     margin: 0 0.6em;

                  }
      
                  /* .to_do_checkbar{
                     width: 100%;
                     height: 25%;
                     background-color: white;
                     border-radius: 5%;
                  } */
      
               .nem2{
                  width: 40%;
                  height: 98%;
                  background-color: white;
                  border-radius: 40px;
               }
      
                     .inner_container{
                        width: 98%;
                        height: 92%;
                        margin: 0;
                        padding-left: 2%;
                        padding-top: 2%;
                        padding-bottom: 2%;
                     }
                     #twoinner_container{
                        height: 98%;
                     }
                     #checkbar{
                        width: 97%;
                        height: 87%;
                        padding-left: 1%;
                        padding-top: 1%;
                        padding-bottom: 1%;
                     }

                     
/* 리스트 상단 날짜 nav 크기 설정 */


                     
/* 해야하는 일 목록 css */
      
      .to_do_list table {
         font-size: 20px;
      }
      
      #listAdd{
         width: 100%;
         /* border: 1px solid black; */
         table-layout: fixed;
         border-top: 1px solid #444444;
         border-collapse: collapse;
      }
      #listAdd th{
         border-bottom: 1px solid #444444;
         padding: 10px;
         /* border: 1px solid black; */
      }
      #listAdd td{
         border-bottom: 1px solid #444444;
         padding: 10px;
         /* border: 1px solid black; */
      }
      
      #listAd{
         width: 100%;
         /* border: 1px solid black; */
         table-layout: fixed;
         border-top: 1px solid #444444;
         border-collapse: collapse;
      }
      #listAd th{
         border-bottom: 1px solid #444444;
         padding: 10px;
         /* border: 1px solid black; */
      }
      #listAd td{
         border-bottom: 1px solid #444444;
         padding: 10px;
         /* border: 1px solid black; */
      }

      /* #listAddButton{
         border: 0; 
         background-color: transparent;

         font-size: 100%;
         flex-direction: row-reverse;
      } */

      /* #listAddButton:hover{
         font-weight: bold;
      } */

      #listAdd_html{
         text-decoration: none;
         color: black;
         border: 0; 
         background-color: transparent;
      }

      #listAdd_html:hover{
         color: darkmagenta;
      }
      #listAdd_div:hover{
         color: darkmagenta;
      }

      #listAdd_main_hidden header{
         margin-top: 4%;
         margin-left: 3%;
         height: 1%;
         font-size: 18px;
      }

      #mustit{
         height: 100%;
         width: 85%;
         margin-top: 2%;
         margin-left: 6%;
         
      }

      #hidden_important{
         margin-left: 6%;
         margin-top: 8%;
      }

      #addadd{
         display: flex;
         flex-direction: row-reverse;
         width: 90%;
      }



/* 달력 css */
@import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');

/* body { background-color : skyblue; }  */

#twoinner_container {
    background-color : white;
    height: auto;
    width: 400px;
    margin: 0px;
    padding: 20px;
    margin: 0 auto;
    border-radius:5px;
    box-shadow:0px 40px 30px -20px rgba(0,0,0,0.3);
}

td {
    width: 50px;
    height: 50px;
}

.Calendar {
    text-align: center;
}

.Calendar>thead>tr:first-child>td {
    font-family: 'Questrial', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

.Calendar>thead>tr:last-child>td {
    font-family: 'Questrial', sans-serif;
    font-weight: 600;     
}

.Calendar>tbody>tr>td>p {
    font-family: 'Montserrat', sans-serif;
    height: 45px;
    width: 45px;
    border-radius: 45px;
    transition-duration: .2s;
    line-height: 45px;
    margin: 2.5px;
    display: block;
    text-align: center;
}        

.today {
    background-color: #F5D042;            
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.futureDay {
    background-color: #FFFFFF;
    cursor: pointer;
}
.futureDay:hover{
    background:#eee;
}

.futureDay.choiceDay,
.today.choiceDay {
    background: #0A174E;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.index{
   font-size: 20px; 
   margin: 2% 0; 
   display: flex; 
   justify-content: space-between;
}

@media screen and (min-width: 1481px) {
   .big_nemo{
      width: 1500px;
   }

   .nem1{
      margin-right: 2%;
   }
   .nem2{
      margin-left: 2%;
   }
   
}

@media screen and (max-width: 1000px) and (min-width: 501px) {
   .big_nemo{
      width: 90%;
      display: flex;
      flex-direction: column-reverse;
      gap: 20px;
      position: relative;
      top: 100px;
      /* top: 70px; */
      margin: auto;
   }
   .nem1{
      margin: auto;
      width: 98%;
   }
   .nem2{
      /* display: none; */
      margin: auto;
      width: 98%;
   }
   .index{
      font-size: 17px;
   }
   #addadd button{
      font-size: small;
   }

}

@media screen and (max-width: 500px) {
   .big_nemo{
      width: 90%;
      display: flex;
      flex-direction: column-reverse;
      gap: 20px;
      position: relative;
      /* top: 70px; */
      top: 100px;
      margin: auto;
   }
   .nem1{
      margin: auto;
      width: 98%;
   
   }
   .nem2{
      /* display: none; */
      margin: auto;
      width: 98%;
   }
   .index{
      font-size: 15px;
   }
   #addadd button{
      font-size: smaller;
   }
}