body {
   background-color: #ffffff;
   opacity: 1;
   background-image:  linear-gradient(#8a5b79 2px, transparent 2px), linear-gradient(90deg, #8a5b79 2px, transparent 2px), linear-gradient(#8a5b79 1px, transparent 1px), linear-gradient(90deg, #8a5b79 1px, #e5e5f7 1px);
   background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
   background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.Cards{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    gap:20px;
    padding:20px;
    align-items:start;
    width:100%;
}

.card-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.Progress-Bar {
    background: #fceff7;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding:40px;
    width:200px;
    height:50px;
    margin-right:auto;
    align-self: start;
}

.Tasks {
    background: #fceff7;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding:40px;
    width:200px;
    height:150px;
    margin-right:auto;
    align-self: start;
}

.cardright-toptwo {
    background: #fceff7;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding:40px;
    margin-right:20px;
    width:200px;
    height:100px;
    margin-left:auto;
    align-self: start;
}

.cardcenter {
    background: #fceff7;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding:40px;
    margin-left:-400px;
    margin-right:-390px;
    width:500px;
    height:300px;
    
}

.cardleft {
    background:#fceff7;
    border-radius:2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 60px;
    width: 460px;
    height: 170px;
}

.cardright {
    background:#fceff7;
    border-radius:2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 60px;
    width: 460px;
    height: 170px;
    margin-right:20px;
}

.card-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top:-20px;
    margin-bottom: 20px;
    color: #333;
}

.clock {
    font-family: 'Courier New', Courier, monospace;
    font-size: 100px;
    font-weight: 600;
    margin-top:80px;
    color: #333;
    text-align:center;
}




.startTimer{
    width:80px;
    height:30px;
    margin-left:0px;
    border-radius:4px;
    border:none;
    color:#ffffff;
    background:#86647a;
    cursor:pointer;
    font-family: 'Courier New', Courier, monospace;
}

.startTimer:hover{
    background:#8a5b79;
}

.countdown{
    font-family:monospace;
    font-size:22px;
    margin-top:25px;
}

.countdown-input{
    width:20px;
    height:30px;
    font-size:20px;
    border-radius:200px;
    background:#cccccc;
    border:none;
}

.notes{
    margin-bottom:100px;
    min-height:1.5em;
    max-height:90px;
    max-width:220px;
    min-width:200px;
    overflow:auto;
    field-sizing:content;
    background:#86647a;
    border-radius:2px;
    border-color: #333;
    border-width: 2px;
}
textarea{
    font-family: 'Courier New', Courier, monospace;
    color:#ffffff;
}

::placeholder{
    color:#ffffff;
    font-family: 'Courier New', Courier, monospace;
}

.quote{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    font-style: italic;
    color: #555;
    text-align: center;
    margin-top: 10px;
}

.row{
    display:flex;
    align-items:left;
    justify-content:left;
    background:#8a5b79;
    border-radius:2px;
    padding-right:30px;
    margin-bottom:25px;
    border:none;
    margin-left:-20px;
}

.input-box{
    flex:1;
    outline:none;
    background:transparent;
    padding:10px;
    width:150px;
    border:none;
    font-family: 'Courier New', Courier, monospace;
    color:#ffffff;
   
}

button{
    font-family: 'Courier New', Courier, monospace;
    outline:none;
    padding:10px 15px;
    background:#fceff7;
    color:#8a5b79;
    border-color: #8a5b79;
    border-radius:2px;
    cursor:pointer;
    font-family: 'Courier New', Courier, monospace;
}

.list-container {
  max-height: 90px;
  width: 210px;
  overflow-y: auto;
  overflow-x: auto;
  margin-left: -20px;
}

ul li{
    font-family: 'Courier New', Courier, monospace;
    list-style:none;
    font-size:17px;
    padding-left:25px;
    padding: 1px 4px 12px 2px;
    margin-left:-20px;
    user-select:none;
    cursor:pointer;
    position:relative;
}

ul li::before{
    content: "";
    position:absolute;
    height:14px;
    width:14px;
    border-radius:50%;
    background-size:cover;
    background-color:center;
    background-image:url(Images/Untitled_design__1_-removebg-preview.png);
    top: 2px;
    left:-18px;
}



ul li.checked{
    text-decoration: line-through;
}

ul li.checked::before{
    background-image:url(Images/Checked.png);
    background-size:cover;
    background-color:center;
}

ul li span{
    position:absolute;
    right:0;
    top:-7px;
    width:40px;
    height:40px;
    font-size:22px;
    color:#8a5b79;
    line-height:40px;
    text-align:center;
}

ul li span:hover{
    background:#fde5f4;
    border-radius:90%;
}


#progress-bar {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}


#progress-bar::-webkit-progress-bar {
    background-color: #8a5b79; 
    border-radius: 10px;
}


#progress-bar::-webkit-progress-value {
    background-color: #6b056e; 
    border-radius: 10px;
    transition: width 0.5s ease-in-out; 
}


#progress-bar::-moz-progress-bar {
    background-color: #6b056e;
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
}

.progress-text {
    text-align: center;
    margin-top: 10px;
    font-family: 'Courier New', Courier, monospace;
    color: #333;
}