* {
    margin:0;
    padding:0;
    outline:none;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif, arial;
    transition:all ease 0.3s;
}
:root {
    --primary-color:#262D37;
    --secondary-color:#3C424B;
    --text-color:#F1F1F1;
}
body {
    color:var(--text-color);
    background-color:var(--primary-color);
}
.container {
    width:800px;
    display:flex;
    justify-content:center;
}
main {
    display:flex;
    justify-content:center;
    margin-top:40px;
}
h1 {
    font-size:30px;
    margin-bottom:10px;
}
input {
    width:100%;
    height:60px;
    padding:10px;
    font-size:18px;
    border-radius:10px;
    border:2px solid #CCC;
}
ul {
    list-style:none;
}
li {
    font-size:20px;
    padding:0px 0px 5px 10px;
}
#start {
    width:100%;
    height:50px;
    cursor:pointer;
    margin-top:10px;
    border-radius:10px;
    font-size:20px;
    font-weight:700;
    border:2px solid #CCC;
    color:var(--text-color);
    background-color:var(--secondary-color);
}
#start:hover {
    background-color:#2ba7f3;
}
#tarefas {
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.add {
    display:flex;
}
.add button {
    cursor:pointer;
    border-radius:10px;
    font-size:20px;
    font-weight:700;
    padding:10px;
    margin-left:10px;
    border:2px solid #CCC;
    color:var(--text-color);
    background-color:var(--secondary-color);
}
.add button:hover {
    background-color:#2ba7f3;
}
#assunto {
    margin-top:20px;
}
#assunto span {
    font-size:30px;
    color:#2ba7f3;
}
#lista {
    width:100%;
    display:flex;
    margin-top:20px;
    flex-direction:column;
}
@media(max-width:490px) {
    input,
    #start {
        width:310px;
    }
    #pergunta {
        display:flex;
        align-items:center;
        flex-direction:column;
        text-align:center;
    }
    #assunto {
        text-align:center;
    }
    .add {
        flex-direction:column;
    }
    .add button {
        margin-left:0;
        margin-top:10px;
    }
}