@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2');
}

/* dm-mono-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-mono-v16-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/dm-mono-v16-latin-500.woff2') format('woff2');
}


body{
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 20px;
  background-image: url(./../images/moon-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: fixed;
  
}
.font-family{
  font-family: 'Cormorant Garamond';
}
.font-Mono{
  font-family: 'DM Mono';
}
.text-shadow{
  color: #3c607e;
  text-shadow: 2.5px 2.5px 0px rgb(205, 211, 213);
}
.todo-list {
  overflow-x: hidden;
}

/* ---- ScrollBar ----- */
body::-webkit-scrollbar {
  display: none !important;  
}

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #e6e6e6;
  border: 1px solid #f0f0f1;
  border-radius: 5px;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 0px;
}
::-webkit-scrollbar-thumb {
  background: #2c89a3;
  border-radius: 5px;
}


/* due style */
.todo-due {
  color: #6b7280;                   
}
.todo-due:not(:placeholder-shown) {
  color: #111827;                
}
.todo-due::placeholder {
  color: #6b7280;
}