:root {
    --logo-red-1: #eb2424;
    --logo-blue-1: #22286e;
    --logo-gray-1: #e2cdd6;
    --logo-mix-1: #9083b4;
    --logo-red-2: #f37275;
    --logo-blue-2: #6c74b3;
    --logo-mix-2: #875c70;
    --logo-white-1: #f7edf2;
    --logo-blue-1-transparent: rgba(34,40,110, 0.75);
    /*
            --logo-red-1: rgb(235,36,36);
            --logo-blue-1: rgb(34,40,110);
            --logo-gray-1: rgb(226,205,214);
            --logo-mix-1: rgb(144,131,180);
            --logo-red-2: rgb(243,114,117);
            --logo-blue-2: rgb(108,116,179);
            --logo-mix-2: rgb(135,92,112);
            --logo-white-1: rgb(247,237,242);
    */
}

html {
    font-size: 14px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--logo-white-1);
}

h1 {
    color: var(--logo-red-1);
}

i.construction {
    color: orange;
}

.to-do {
    margin: 50px;
    padding: 10px;
    border: 3px solid var(--logo-blue-2);
    border-radius: 10px;
    box-shadow: 5px 5px 5px var(--logo-blue-2);
}

    /*title*/
    .to-do > div:first-child {
        color: var(--logo-red-1);
        font-size: 1.5rem;
        font-weight: bolder;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--logo-blue-2);
    }