@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600&display=swap');

:root {
 --primary: #05B0FFD5;
 --secondary: #F35660CB;
 --light: #FFFFFF;
 --dark: #000000;
 --disabled: #E7E7E7;
}

::-webkit-scrollbar {
 width: 0px;
}

* {
 font-family: 'Josefin Sans', sans-serif;
}

body {
 margin: 0;
 height: 100vh;
 background-color: var(--disabled);
}

input:first-letter, .task:first-letter {
 text-transform: capitalize;
}

.round_border {
 border-radius: 5px;
}

.list {
 margin: 25px auto;
 padding: 25px;
 background-color: var(--light);
 width: 100%;
 max-width: 350px;
}

.date {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.date_right {
 display: flex;
 align-items: center;
}

#date_number {
 font-size: 50px;
}

#date_text {
 letter-spacing: 3px;
 text-transform: uppercase;
}

#date_month, #date_number, #date_text {
 font-weight: bold;
}

#date_month, #date_year {
 margin-left: 7px;
 font-size: 20px;
}

form {
 margin: 20px 0;
 display: grid;
 grid-auto-flow: column;
 grid-template-columns: auto 35px auto;
 grid-column-gap: 15px;
}

input {
 border: none;
 padding-left: 10px;
 background-color: var(--disabled);
}

input:focus {
 outline: none;
}

.add_task, .order_tasks {
 border: none;
 font-weight: bold;
 cursor: pointer;
}

.add_task {
 height: 35px;
 border-radius: 50%;
 font-size: 18px;
 background-color: var(--disabled);
}

.order_tasks {
 background-color: var(--secondary);
 color: var(--light);
}

.task {
 background-color: var(--primary);
 padding: 15px;
 margin-top: 15px;
 color: var(--light);
 cursor: pointer;
}

.done {
 background-color: var(--diabled);
 text-decoration: line-through;
 color: var(--dark);
}

p.author {
 display: flex;
 justify-content: center;
 font-variant: JIS04;
 gap: 7px;
 color: #000000;
}

p.author a {
 text-decoration: none;
 font-weight: 700;
 color: #000000;
}