* {
     padding: 0;
     margin: 0;
     -webkit-tap-highlight-color: transparent;
     user-select: none;
 }

 marquee {
     font-size: smaller;
     display: block;
     margin-top: 2px;
     font-family: 'Gill Sans', sans-serif;
 }

 ::-webkit-scrollbar {
     color: transparent;
 }

 input,
 textarea,
 button,
 select {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }


 a,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p {
     text-decoration: none;
     margin: 0;
     padding: 0;
     white-space: nowrap;
 }

 a {
     color: white;
 }

 @font-face {
     font-family: 'regm';
     src: url(asserts/regmedi.otf);
 }

 body {
     background-color: rgb(22, 22, 22);
     color: white;
     overflow: hidden;
 }

 /* ---------------------------------------------------------------------------ASIDE----- */
 aside {
     height: 100dvh;
     width: 100vw;
     position: fixed;
     top: 0;
     z-index: 500;
     background-color: rgb(21, 21, 21);
 }

 aside h1 {
     font-family: regm;
     font-size: 2.5em;
     margin: 7em 0.5em 0.2em 1em;
 }

 aside p {
     font-family: regm;
     font-size: large;
     margin: 0 0.5em 0.2em 2.4em;
     color: rgb(165, 165, 165);
 }

 aside p strong {
     color: white;
     font-weight: 500;

 }

 aside input {
     outline: none;
     border: none;
     font-size: x-large;
     font-family: regm;
     margin: 0.5em 0.5em 0.2em 1.7em;
     padding: 0.2em;
     color: white;
     background-color: transparent;
     border-bottom: 1px solid #717171;
 }

 aside input::placeholder {
     font-size: x-large;
     font-family: regm;
     color: #3a3a3aa1;

 }

 aside .copy {
     position: absolute;
     top: 80%;
     color: white;
     font-family: regm;
     margin-left: 4em;
     font-size: x-small;
     padding: 0.5em 1.5em;
     border-radius: 30px;
     background: linear-gradient(to left, rgb(35, 35, 35), rgb(41, 41, 41));
 }

 /* ---------------------------------------------------------------------------NAV----- */

 nav {
     padding: 2.5em 1.7em 2em 2.2em;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 nav a .logo {
     height: 1.5em;
 }

 .left {
     display: flex;
     gap: 0.5em;
     justify-content: center;
     align-items: center;
 }

 .checklist {
     cursor: pointer;
     height: 1.9em;
 }

 .addtask {
     color: white;
     font-family: regm;
     font-size: small;
     padding: 0.5em 1em;
     border-radius: 30px;
     background: linear-gradient(to left, #232323, #292929);
     display: flex;
     align-items: center;
     gap: 0.5em;
     cursor: pointer;
     z-index: 201;
 }

 .addtask green {
     color: #36a436;
 }

 .addtask red {
     color: red;
 }

 /* ------------------------------------------------------------------------HEADER----- */
 header {
     padding: 0 7vw 1.5em 7vw;
 }

 header h1 {
     font-family: regm;
     font-size: 2.5em;
     letter-spacing: 2px;
     color: gray;
 }

 header #month {
     font-family: regm;
     margin-top: 0;
     color: #db0d0d;
 }

 header p {
     position: relative;
     margin-top: 0.2em;
     letter-spacing: 0.3px;
     word-spacing: 0.7px;
     font-size: 3.2vw;
     line-height: 1.5em;
     color: #ffffff;
 }

 header #thirukural img {
     width: 1em;
     margin-top: 0.5em;
     margin-right: 0.7em;
     cursor: pointer;
 }

 /* ------------------------------------------------ARTICLE----------------------------------------- */
 ul {
     height: 65svh;
     list-style: none;
     padding: 0 2.5em;
     font-size: small;
     font-family: regm;
     overflow-y: scroll;
     scroll-snap-type: y mandatory;
     display: flex;
     flex-direction: column;
 }

 #addhere {
     width: 5em;
     align-self: center;
     margin: auto 0;
 }

 ul .tasks {
     margin: 0 1em;
     padding: 3em 0;
     border-bottom: 1px solid #7a7a7a;
     display: grid;
     place-items: center;
     scroll-snap-align: start;
     text-decoration: none;
     outline: 0;
 }

 .tasks:last-child {
     border-bottom: none;
     margin-bottom: 2em;
 }

 /* ---------------------------------------------------UL------------------------------------------- */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 article {
     width: 100vw;
     height: 100vh;
     display: none;
     place-items: center;
     color: black;
     position: fixed;
     font-family: regm;
     z-index: 200;
     background: rgba(0, 0, 0, 0.22);
     backdrop-filter: blur(7.6px);
     -webkit-backdrop-filter: blur(7.6px);
     animation: fadeIn 0.7s ease;
     position: fixed;
     top: 0;
 }

 #kuralinfo {
     max-width: 70vw;
     display: none;
     flex-direction: column;
     padding: 1.3em 2em;
     background-color: #f7f7f7;
     border-radius: 10px;
     white-space: wrap;
     gap: 0.5em;
     user-select: all;
 }

 .newtaskcon,
 .newgoalcon {
     padding: 1.3em 2em;
     background-color: #f7f7f7;
     border-radius: 10px;
     display: none;
     flex-direction: column;
 }

 .taskinputcon {
     width: 70vw;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 0.5em;
     padding: 1em 0;
 }

 .taskinputcon input {
     width: 100%;
     outline: 0;
     border: 0;
     font-size: medium;
     background-color: #202020;
     padding: 0.5em 1em;
     color: white;
     border-radius: 30px;
 }

 .taskinputcon .addbtn {
     padding: 0.5em 1em;
     background-color: #dfdfdf;
     border-radius: 30px;
     font-family: regm;
     display: grid;
     place-items: center;
 }

 /* -------------------------------------------CHECKLIST---------------------- */

 .checkimg {
     width: 100vw;
     position: absolute;
     bottom: 0;
 }

 .checkmain {
     overflow-y: scroll;
 }

 yellow {
     color: #daec11;
 }

 .milecon {
     display: flex;
     width: 100%;
     justify-content: space-between;
 }

 .milecon p {
     padding: 0.5em 1.8em;
     background-color: #d1d1d1;
     font-size: small;
     border-radius: 3px;
     cursor: pointer;
 }

 .checkcon {
     margin: 1em 2em;
     display: flex;
     flex-wrap: wrap;
     overflow: scroll;
 }

 .checkconinner {
     margin-left: 0.5em;
     display: flex;
     gap: 0.5em;
 }

 .checktopic {
     font-family: regm;
     margin-bottom: 1em;
 }

 .customCheckbox {
     width: 2.5em;
     aspect-ratio: 1/1;
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: 1.5px solid #efffae;
     border-radius: 50%;
     position: relative;
 }

 .customCheckbox:checked {
     background-color: #dcff51;
     border-color: #dcff51;
     display: grid;
     place-items: center;
     animation: fadeIn 0.7s ease;
 }

 /* 
 .customCheckbox:checked::before {
     content: "1";
     color: rgb(0, 0, 0);
 } */
 .top,
 .lineup {
     display: flex;
     flex-direction: column;
     margin: 0 2em;
 }

 .topics {
     font-family: regm;
     margin: 0.3em 0;
 }

 .topics2 {
     margin-top: 2em;
 }

 .inputfeild {
     padding: 0.7em;
     outline: 0;
     border: 0;
     margin: 0.1em;
     border-radius: 5px;
     background-color: #5d5d5d;
     color: white;
 }