@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

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

body {
    font-family: "Noto Sans", sans-serif;
    text-align: center;
    background-image: url('background.png');
    background-size: contain;
    background-repeat: repeat;
    color: #374151;
    padding: 2rem;
}

h1 {
    color: #4b5563;
    margin-bottom: 1.5rem;
}

#timer {
    font-size: 50px;
}

#timer-counter {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.content-container {
    display: flex;
    border-radius: 20px;
}

.content-section {
    border: 1px solid #646365;
    min-height: 100px;
    box-shadow: 10px;
}

#timer-container {
    width: 60%;
    box-shadow: 10px;
    background-color: #e1e5ef;
}

#todo-container {
    width: 60%;
    background-color: #dadbdd;
    font-size: 1.5vw;
}

#task-header {
    margin-bottom: 2rem;
}

#task-list {
    margin-bottom: 2rem;
}

.content-section>div {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#timer-select {
    font-size: 2rem;
    font-weight: bold;
    color: #66629d;
    margin-top: 5px;
    margin-left: 5rem;
    margin-right: 5rem;
    border: 3px solid #66629d;
    border-radius: 0.500rem;
    box-shadow: 0 10px 10px rgba(1, 0, 0, 0.3);
}

#custom-timer-input {
    margin-top: 10px;
    margin-left: 10rem;
    margin-right: 10rem;
}

.timer-controls {
    font-size: 1.2vw;
    width: 100%;
    margin-bottom: 2rem;
}

#add-task-button {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

#task-name,
#task-time {
    border: 3px solid #66629d;
    border-radius: 0.500rem;
    box-shadow: 0 10px 10px rgba(1, 0, 0, 0.3);
}

button {
    width: 30%;
    font-size: 2vw;
    padding: 15px;
    background-color: #66629d;
    box-shadow: 8px;
    color: #846767;
    border: 3px solid #66629d;
    border-radius: 0.500rem;
    cursor: pointer;
    transition: background-color 0.1s;
    box-shadow: 0 10px 10px rgba(1, 0, 0, 0.3);
}

button:hover {
    background-color: #a7a6b8;
}

.custom-border {
    border: 3px solid #66629d;
    border-radius: 0.5rem;
    color: #846767;
    box-shadow: 0 10px 10px rgba(1, 0, 0, 0.3);
    padding: 0.25rem 0.5rem;
    outline: none;
}

ul {
    text-decoration: none;
    list-style: none;
}