style.css

*
{
   margin:0;
   padding:0;
   box-sizing:border-box;
}

::selection
{
   background-color: transparent;
}

::-moz-selection
{
   background-color: transparent;
}

.container
{
   background-color: rgb(253, 253, 253);
   height: 100vh;
   max-width: 96%;
   margin: auto;
}

.header
{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   align-self: center;
   height: 20vh;   
}

h3.todo-logo
{
   font-size: 26px;
   background: linear-gradient(rgb(255, 0, 0) 50%,rgb(255, 187, 0));
   -webkit-background-clip: text;
   -webkit-text-fill-color:transparent;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   animation:swipe-up 0.7s ease-in;
}

h3.todo-logo::after
{
   content: '';
   position: absolute;
   top:30px;
   height:65px;
   width:5px;
   margin-left:5px;
   background-color: rgb(255, 153, 37);
   animation:length 0.5s ease-in;
   animation-delay: 1s;
}

h3.todo-logo::first-letter
{
   font-size:45px;
   margin-right:-6px;
   font-family: Georgia, 'Times New Roman', Times, serif;
   background: linear-gradient(120deg, rgb(250, 0, 0) 40%,rgb(251, 255, 0),rgb(255, 0, 0),yellow,red,yellow,red,yellow,rgb(255, 0, 0) 60%);
   -webkit-background-clip: text;
   -webkit-text-fill-color:transparent;
}

.greeting-display h2
{
   font-size: 28px;
   text-align: center;
   font-weight: bolder;
   word-spacing: 2px;
   background: linear-gradient(rgb(250, 50, 0) 40%,rgb(255, 166, 0) 60%);
   -webkit-background-clip: text;
   -webkit-text-fill-color:transparent;
   font-family: Arial, Helvetica, sans-serif;
}

.time-current, .current-date
{
   font-size: 19px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: linear-gradient(0deg,rgb(255, 115, 0) 40%,rgb(255, 0, 43) 70%);
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
}

.None-todo
{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height:250px;
   color:Red;
}

.None-todo h3
{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 25px;
   text-align: center;
   font-weight: lighter;
   font-style: italic;
}

form
{
   max-width: 80%;
   margin: auto;
}

.form-input-btn-display
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   height: 50px;
}

.settings
{
   display: flex;
   justify-content: center;
   align-items: center;
   height:50px;
   width:100px;
   background-color: rgb(253, 72, 0);
   border-top-left-radius:7px;
   border-bottom-left-radius:7px;
   transition: 1s;
}

.settings button
{
   font-size: 25px;
   background-color: rgb(255, 72, 0);
   border: none;
   outline: none;
   color:white;
}

.fa-cog
{
   transition:1s;
}

.fa-cog:hover
{
   transform:scale(1.3) rotate(360deg);
}

.todo-text
{
   width:90%;
   border:none;
   outline-color:none;
   font-weight: bolder;
   background-color: rgb(255, 255, 255);
   border-top:4px solid rgb(247, 87, 24);
   border-bottom:4px solid rgb(247, 87, 24);
   color: rgb(0, 0, 0);
   text-align: center;
   font-size: 18px;
   transition: 1s;
}

.todo-text::placeholder
{
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   text-align: center;
   color: black;
   font-size: 18px;
   font-weight: bold;
   opacity:0.5;
}

.todo-text:focus
{
   outline:none;
   transition: 1s;
   background-color: rgb(250, 122, 37);
   border-color:orange;
   transform: skew(1.2);
   color:black;
}

.todo-text:not(:focus)
{
   outline: none;
   transition: 1s;
}

.add-btn
{
   width:30%;
   outline-color: rgb(243, 243, 243);   
   border-top-right-radius: 7px;
   border-bottom-right-radius: 7px;
   font-size: 20px;
   background-color: rgb(247, 87, 24);
   border: none;
   cursor: pointer;
   color:white;
   font-family:'Times New Roman', Times, serif;
   transition: 0.4s;
}

.add-btn:hover
{
   transform: scale(1.07);
   background-color: rgb(255, 72, 0);
}

select
{
   height: 100%;
   padding-left:6px;
   width:150px;
   background: rgb(247, 87, 24);
   color: rgb(255, 255, 255);
   border: none;
   outline: none;
   box-shadow: 0 5px 25px rgba(184, 178, 178, 0.5);
   font-size: 18px;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-weight: bolder;
   transition: 1s;
}

.custom-select-opt
{
   position: relative;
   transition: 1s;
}
.custom-arrow-display
{
   position: absolute;
   top:0;
   right: 0;
   display: block;
   background-color: rgb(247, 87, 24);
   height:100%;
   width:20px;
   pointer-events: none;
}

.custom-arrow-display::before, .custom-arrow-display::after
{
   content: '';
   position: absolute;
   left:50%;
   top:50%;
   width:0;
   height: 0;
   transform: translate(-50%,-50%);
}

.custom-arrow-display::before
{
   top:40%;
   border-left:6px solid transparent;
   border-right:6px solid transparent;
   border-bottom:6px solid rgb(255, 255, 255);
}

.custom-arrow-display::after
{
   top:70%;
   border-left:6px solid transparent;
   border-right:6px solid transparent;
   border-top:6px solid rgb(255, 255, 255);
}

.todo-contents
{
   display: flex;
   flex-direction: row;
   justify-content: center;
   transition: 1s;
}

.todo-list-section
{
   position: relative;
   transition: 1s;
}

table
{
   position: relative;
   top:30px;
   display: table;
   border-collapse: collapse;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   border-bottom: 3px solid rgba(255, 64, 0, 0.432);
   border-top:2px solid orange;
   height:100%;
   width:80%;
   clear: both;
   text-align: center;
   transition: 0.3s;
}

td
{
   text-align: center;
   height:11vh;
}

th
{
   height:10vh;
   color:orangered;
   border-bottom: 2px solid orange;
   text-align: center;
   font-weight:bolder;
   font-style: italic;
   font-size:20px;
   font-family: Arial , Helvetica, sans-serif;
}

.check-anime
{
   display: flex;
   justify-content: center;
   align-items: center;
}

.check-btn
{
   display:inline-block;
   position: absolute;
   height:30px;
   width:30px;
   opacity: 0;
   z-index: 1000;
   cursor: pointer;
}

.check-fade
{
   display: block;
   position: relative;
   clear: both;
   height: 30px;
   width:30px;
   background-color: transparent; 
   border: 3px solid rgb(0, 255, 0);
   border-radius: 5px;
   transition: 0.4s;
}

.check-fade::after
{
   position: absolute;  
   content: "";  
   border-radius: 5px; 
}

.check-fade::before
{
   position: absolute;  
   content: "";  
   border-radius: 10px;  
   border: 5px solid rgb(0, 255, 0); 
   transform: scale(0);  
}

.check-anime .check-btn:checked ~ .check-fade
{  
   border-radius: 5px;  
   opacity:1;  
   border: 4px solid rgb(255, 166, 0); 
   transition:0.4s;
}

.check-btn:checked ~ .check-fade::after 
{  
   top:2px;
   left: 7px; 
   width: 6px;  
   height: 12px;   
   border: solid rgb(51, 255, 0); 
   border-width: 0 4px 4px 0;  
   border-radius: 0;  
   transform: rotate(45deg) ;
   transition: 0.2s;
} 

.check-anime .check-btn:checked ~ .check-fade::before
{
   left: -3px;  
   top: -3px; 
   width: 24px;  
   height: 24px; 
   border: 5px solid rgb(9, 255, 0); 
   border-radius: 0;  
   transform: scale(4);  
   transition: all 0.2s ease-out; 
   opacity: 0;
}

.check-anime .check-btn:not(:checked) ~ .check-fade
{
   border:3x solid rgb(0, 255, 0);
   transform: rotate(-180deg);
   transition: 0.2s;
}

.delete-btn
{
   width:115px; 
   height:40px;
   outline-color: rgb(243, 243, 243);   
   border-radius: 7px;
   font-size: 20px;
   background-color: rgb(245, 49, 49);
   border: none;
   cursor: pointer;
   color:white;
   transition: 0.4s;
}

.fa-trash
{
   font-size: 18px;
   letter-spacing: 1px;
}

.delete-btn:hover
{
   transform: scale(1.1);
   background: red;
}

.list-items
{
   height:30px;
   overflow-x:hidden;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 22px;
}

.todo-list-plan-completed
{
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 24px; 
   opacity:0.5;
   text-decoration:line-through;
   transition: 0.2s ease-out;
}

footer
{
   position: relative;
   top:60px;
   height:10vh;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   font-style: italic;
   font-family: arial;
   font-size: 12px;
   color:rgb(170, 169, 169);
   z-index:-1;
}

.settings-modal
{
   max-width: 80%;
   margin: 6px auto auto auto;
   height:100%;
   background-color: orange;
   transition: 1s;
   animation: swipe-setting-up-popup 0.3s linear;
}

.setting-down-hide
{
   animation: swipe-setting-down-popup 0.4s linear;
}

.close-settings
{
   color:rgb(0, 0, 0);
   background-color: rgb(250, 183, 0);
   float:right;
   border: none;
   outline: none;
   cursor: pointer;
   transition: 0.4s;
}

.close-settings:hover
{
   color:red;
   background-color: rgb(255, 255, 255);
}

button.close-settings
{
   font-size: 30px;
}

.settings-view-option
{
   display:flex;
   flex-direction:row;
   justify-content: space-around;
   align-items: flex-start;
}

.settings-view-option button
{
   height:60px;
   margin-left:50px;
   background: rgb(255, 166, 0);
   border: none;
   outline: none;
   font-size: 21px;
   cursor: pointer;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   font-weight: bolder;
}

.settings-view-option button:hover
{
   color:rgb(255, 255, 255);
}

.viewTodoClick i, .clearCompleteTodo i
{
   font-size: 18px;
   color:rgb(255, 255, 255);
   padding:5px;
}

.detailed-todo
{
   position: fixed;
   top:17vh;
   left:0;
   right:0;
   bottom:0;
   width:100%;
   margin: auto;
   background-color: rgb(255, 255, 255);
   overflow-y: auto;
   transition: 1s;
   animation:swipe-down-popup 0.5s linear;
}

.detailed-popup
{
   animation:swipe-up-popup 0.5s linear;
   transition: 1s;
}

.todo-info button
{
   position: absolute;
   right:14%;
   background-color: white;
   color: red;
   font-size: 30px;
   border: none;
   outline: none;
}

.todo-info button:hover
{
   color: rgb(255, 40, 24);
}

.table-pop
{
   border:2px solid rgb(131, 131, 131);
   height:100%;
   width:80%;
   margin: auto;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.479);
   transition: 0.3s;
}

.table-pop td
{
   text-align: center;
   border-right:3px solid rgb(145, 143, 143);
   border-bottom: 3px solid rgb(145,143,143);
   height:10vh;
}

.table-pop td:nth-last-child(1)
{
   border-right: none;
}

.table-pop th
{
   padding:15px;
   border-left: 3px solid rgb(145, 143, 143);
   height:10vh;
   color:orangered;
   border-bottom: 2px solid rgb(134, 134, 134);
   text-align: center;
   font-weight:bolder;
   font-size:23px;
   font-family: 'Courier New', Courier, monospace;
} 

.todo-detailed-view-opt
{
   max-width:90%;
   margin:auto;
}

.list-items-pop
{
   text-align:center;
   overflow-x: hidden;
}

.anime-tr-rotate
{
   transition: 1s;
   animation:rotate-tr 0.6s linear;
}

@keyframes rotate-tr
{
   0%
   {
      opacity:0.8;
      transform: scale(1);
   }
   35%
   {
      opacity:0.6;
      transform: scale(0.8);
   }
   70%
   {
      opacity:0.4;
      transform: scale(0.6);
   }
   100%
   {
      opacity:0.2;
      transform: scale(0.4);
   }
}

@keyframes length
{
   0%
   {
      height:10px;
   }
   30%
   {
      height:20px;
   }
   50%
   {
      height: 35px;
   }
   80%
   {
      height:50px;
   }
   100%
   {
      height:65px;
   }
}

@keyframes swipe-up
{
   0%
   {
      transition:1s;
      opacity:0;
   }
   50%
   {
      transition:1s;
      opacity:0.6;
   }
   100%
   {
      transition:1s;
      opacity:1;
   }
}

@keyframes swipe-up-popup
{
   0%
   {
      transform: translateY(0px);
   }
   50%
   {
      transform: translateY(-400px);
   }
   100%
   {
      transform: translateY(-800px);
   }
}

@keyframes swipe-setting-up-popup
{
   0%
   {
      opacity:0.4;
      transform: translateY(-10px);
   }
   100%
   {
      opacity:1;
      transform: translateY(0px);
   }
}

@keyframes swipe-setting-down-popup
{
   0%
   {
      opacity:0.7;
      transform: translateY(0px);
      transition: 1s;
   }
   50%
   {
      opacity:0.2;
      transform: translateY(-20px);
      transition: 1s;
   }
   100%
   {
      opacity:0;
      transform: translateY(-40px);
      transition: 1s;
   }
}

@keyframes swipe-down-popup
{
   0%
   {
      transform: translateY(-800px);
   }
   50%
   {
      transform: translateY(-300px);
   }
   100%
   {
      transform: translateY(0px);
   }
}

@media only screen and (max-width:820px)
{
   select
   {
      width:95px;
   }
   .todo-text::placeholder
   {
      font-size:15px;
   }
   .table-pop
   {
      width:95%;
   }
   .todo-info button
   {
      right:7%;
   }
}

@media only screen and (max-width:700px)
{
   select
   {
      width:96px;
   }
   form
   {
      max-width: 97%;
   }
   .todo-text::placeholder
   {
      font-size:13.5px;
   }
   table
   {
      width:100%;
   }
   .add-btn
   {
      width:90px;
   }
   .settings-modal
   {
      max-width: 97%;
   }
   .table-pop
   {
      width:100%;
   }
   .todo-info button
   {
      right:5%;
   }
}