:root {
    --primary-color: #FFF5E0;
    --secondary-color: #5B7349; 
    --tertiary-color: #8C2920; 
    --quad-color: #F27649; 
}


@font-face {
    font-family: 'oi-regular';
    src: url('Oi-Regular.ttf') format('truetype');
}


body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--primary-color);
}

header {
    text-align: center;
    font-size: 2em;
    
    font-family: 'oi-regular';
    color: var(--secondary-color);
}

.control-btn {
    font-family: 'rita';
    font-size: 0.9em; /* Slightly smaller text */
    cursor: pointer;
    border: none;
    padding: 0;
    position: relative; /* For text positioning */

    width: 200px;
    height: 200px;
    background-color: transparent;
    border: none;
    
    /* Center the text on the leaf */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Make text visible and styled */
    color: var(--primary-color); /* Or white/black for contrast */
    font-size: 1.5em; /* Smaller text to fit the leaf */

}


#stop-button {
    background-image: url('graphics/leaf-invert.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
}

#stop-button span {
    transform: translate(5px, 10px);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

}

#start-button {
    background-image: url('graphics/flower.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    color: black;

    width: 150px;
    height: 150px;
}

#start-button span {
    transform: translate(3px);
    
}


#reset-button {
    background-image: url('graphics/leaf.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#reset-button span {
    transform: translate(-5px, 10px);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

}


form {
  display: flex;
  gap: 10px;
}

/* Input Styles */


/* Pomodoro Styles */
.pomodoro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100%;
    max-width: 600px;
    padding: 20px;
    border-radius: 10px;
    
}

.timer {
    position: relative;
    display: flex;
    align-self: center;
    justify-self: center;
    color: var(--secondary-color);
    min-width: 2ch;
}

.timer img {
    z-index: 1;
    position: absolute;
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.numbers {
    font-family: 'synemono';
    font-size: 4em;
    z-index: 2;
}

.control-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    z-index: 3;
    margin-top: 1em;
}

.cycle-display {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Todo List Styles */

.todo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;

    padding: min(1em, 50%);
    margin: 1em auto;
    margin-bottom: 5em;

    width: min(800px, 400px);

    background-image: url('graphics/picnic-blanket.png');
    box-shadow: 1px 2px 37px 5px rgba(77,53,53,0.66);
    -webkit-box-shadow: 1px 2px 37px 5px rgba(77,53,53,0.66);
    -moz-box-shadow: 1px 2px 37px 5px rgba(77,53,53,0.66);

    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAA3lJREFUWEelWTt7wzAIlIZkSdem///nNV2bpRncTw+sQ4DAjrc6sjjxOA41v56PLb3zlK/zgQ2Oru9bZwuo2K+/OGnnwElSSooRE+jlds/VUyF/j4V08Pq999TP0EhOr+e3apEBxYP4hvRTHAJaD8L3wQgjnjBQCaAZmN97f5OTrQOJVOxo89/zUZ0/P+jR8ntZV9Z473cAH/dc0qb+vaV0+bjn4bsR4jlyVs3sHi0fYBDGib+ynqjvhF5+63mYAUWvRnJNmMspvX5/tuLCay2mUo/VoeMRBdR+igHtodGK9PX82dCjEXqKrFmlmuaw5tEl0Me2NHwGlVYTPadn51Nt7MVESW1VLW1gJb/3vVoDcEjteyxiyNFWNA1oTpfbZyUDXoXjvUozNUc7O3QPEausqrvgbTktc5Xsm8WEQLSN9hBFQq+ssSIwZ0U9eM5JhF4sZPyJLc7prxVcX/M20JSkRyf7xfXoURFKpBvetlX6XXcubpzlqJVD1Ib3nDNyiCIQ1S+yBpB3JR3Q+kDVI48OOLyKkdgVkgf7Vov0WEOE3qMni6a0ZrG/A3czoA49IQswwtfCF1VDS6D9R03c2K0a1VlWigk2LQc+DdRIWm2/WqxKZ2IetWSe5SGK1kpYrwrLylFpb2IAS1Hjh0iDEaD6IXkoBXch7yobBDpTpw8Uwl1AW57T5B9pvSM8Gi+mri/L6SnUS951KsoqJmwoxN/zwYTMa721jxwgMhiGKgst5d/HNaeYxn5NWh8WJWd59Fhnkq6XhI9qjnq9GL7GRnZO2R4VMATh53S9fWaN/nT1pIkSwaN2MVmAcNocMxNW/ZhmZ9GDKYHjuDmKkDGamebQqHWjyDldrkph3va3p9MAPfF5PtIgIlp6KZw7XmMUwVHAGkUGG9CdkcUSnoIfjaahKhcU84XF4FGl13tVP1+eMX2p8K43r89qbOZpckRI4UeU0ak1PUcE4Qu1tVBPZNgWEZGZSYFvJDClyrzrPoUux9nFxYTlwchV0Pyt1lp3R9EUihvjaaz3aAT5ktTQDBRnv1V6eLkM96Pc6eLCADUAWGQG8JLMUVs6MOvGGXJ0Pq1+s4E3JXanKXsxelJSyPOgSI/IRa4ebj2Qcydb9X1tB6t41/9sOME5u6d66H1VxVeEgEZan49dgfb2xosc9QEdXeH7lu/I1/8D7tbk+qWjRzoAAAAASUVORK5CYII=') 14 /  14px / 0 round;
    border-width:  20px;
    border-image-outset: 12px;
    border-style:  solid; 
  
}

.todo-container p {
  font-family: 'oi-regular';
  color: var(--secondary-color);
  font-size: 1.2em;
}


#todo-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.todo-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px;
    gap: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 5px 0;
    transition: all 0.3s ease; /* Smooth transition for all changes */
}

.todo-text {
    overflow-wrap: break-word;
    color: black;
    position: relative;
    transition: color 0.3s ease;
}

/* Strikethrough animation */
.todo-text::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--tertiary-color);
    transition: width 0.5s ease;
    transform: translateY(-50%);
}

/* Fix the CSS selector - add the missing dot */
.todo-item.completed {
    background-color: #e8e8e8; /* Slightly different background for completed items */
    transform: scale(0.98); /* Slightly shrink completed items */
    animation: completeTask 0.5s ease-in-out;
}

.todo-item.completed .todo-text {
    color: #888; /* Fade text color */
    opacity: 0.7;
}

.todo-item.completed .todo-text::after {
    width: 100%; /* Animate strikethrough from 0 to full width */
}

/* Optional: Add a bounce effect when marking as complete */
@keyframes completeTask {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(0.98); }
}

.todo-item > div {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: flex-end;
}

.todo-item button {
    min-width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.todo-item button:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Style each button differently */
.todo-item button:nth-child(1) { /* Complete button (Y) */
    background-color: #27ae60;
    color: white;
}

.todo-item button:nth-child(2) { /* Edit button (E) */
    background-color: #f39c12;
    color: white;
}

.todo-item button:nth-child(3) { /* Delete button (X) */
    background-color: #e74c3c;
    color: white;
}

.hidden {
    display: none !important;
}

/* Timer Select Styles */

.timer-select-container {
    position: relative;
    display: flex;
    border-radius: 0.5rem;
    background-color:  var(--primary-color);
    box-sizing: border-box;
    padding: 0.25rem;
    width: auto;
    font-size: 14px;
    gap: 0.25rem;
    margin-bottom: 2.5rem;
}

.timer-select {
    position: relative;
    flex: 1;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'synemono';
    font-size: 1em;
    text-align: center;
    color: var(--tertiary-color);
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3; /* Inactive buttons are faded */
    width: 80px; /* Fixed width for each button */ 
    height: 80px; /* Fixed height for each button */
}

#work-timer-select {
    background-image: url('graphics/tomato-unripe.png');
}

#break-timer-select {
    background-image: url('graphics/tomato-semiripe.png');
}

#longbreak-timer-select {
    background-image: url('graphics/tomato-ripe.png');
}

.timer-select.active {
    color: var(--primary-color);
    font-weight: bold;
    opacity: 1; /* Active button is fully visible */
    transform: scale(1.1); /* Slightly larger when active */
}