:root{
    --dark:#40403f;
    --darker:#1F2937;
    --light:#EEE;
    --darkest:#111827;
    --grey:#8e8f92;
    --blue:#1b8edb;
    --green:#27d39a;
    --t:#27d3b3;
    --t1:#2e09e7;
    
}

*{
    box-sizing:border-box;
    margin:0;
    font-family:'Fira sans',sans-serif;

}
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:var(--dark);
    color: #FFF;
}
header{
       padding:3rem 1rem;
       max-width:800px;
       width:100%;
       margin: 0 auto;
}
header h1{
    font-size:2.5rem;
    font-weight: 300;
    color:var(--grey);
    margin-bottom:1rem;
    background-image: linear-gradient(to left, var(--blue), var(--green));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#new-task-form{
    display:flex;

}

input, button{
    appearance:none;
    border: none;
    outline:none;
    background:none;

}

#new-task-input{
    flex: 1 1 0;
    background-color: var(--darker);
    padding: 1rem;
    margin-right:1rem;
    color:var(--light);
    font-size:1.25rem;
    border-radius:1rem;

}

#new-task-submit {
	font-size: 1.25rem;
	font-weight: 700;
	background-image: linear-gradient(to right, var(--blue), var(--green));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	cursor: pointer;
	transition: 1s;  
}

#new-task-submit:active {
	opacity: 0.6;
}

main {
	flex: 1 1 0%;
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

.task-list {
	padding: 1rem;
}

.task-list h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--grey);
	margin-bottom: 1rem;
    background-image: linear-gradient(to right, var(--t), var(--t1));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#tasks .task {
	display: flex;
	justify-content: space-between;
	background-color: var(--darkest);
	padding: 1rem;
	border-radius: 1rem;
	margin-bottom: 1rem;
}
.task .content {
	flex: 1 1 0%;
}

.task .content .text {
	color: var(--light);
	font-size: 1.125rem;
	width: 100%;
	display: block;
	transition: 1s;
}
.task .content .text:not(:read-only) {
	color: var(--blue);
}

.task .actions {
	display: flex;
	margin: 0 -0.5rem;
}

.task .actions button {
	cursor: pointer;
	margin: 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	transition: 0.4s;
}
.task .actions button:hover {
	opacity: 0.8;
}

.task .actions button:active {
	opacity: 0.6;
}

.task .actions .edit {
	background-image: linear-gradient(to right, var(--blue), var(--green));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.task .actions .delete {
	color: rgb(20, 220, 150);
}