body {
    color: #333;
}

.todo {
    background-color: lightblue;
    padding: 0.5em;
    border-radius: 1em;
    border: 0.3em solid gray;
    list-style: none;
}

.error_explanation {
    background-color: #e60e27da;
    color: white;
}

.notice_explanation {
    background-color: cyan;
    padding: 0.5em;
    border-radius: 1em;
    border: 0.3em solid gray;
    list-style: none;
}

.todo::after {
    content: "";
    display: block;
    clear: both;
}

.form-task {
    width: 80%;
}

.button {
    all: unset;
    display: inline-block;
    margin: 10px 3px;
    padding: 0.5em 1.0em;
    background-color: #61b0e2;
    box-shadow: 0 5px 0 #369ada;
    border-radius: 2em;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    -1px 1px 3px rgba(0,0,0,0.3),
    1px -1px 3px rgba(0,0,0,0.3),
    -1px -1px 3px rgba(0,0,0,0.3);
}

.button-align-left {
    float: left;
}

.button-yellow {
    background-color: #ffd150;
    box-shadow: 0 5px 0 #ffc41d;
}

.button-red {
    background-color: #fe344c;
    box-shadow: 0 5px 0 #c90f25;
}

.button-gray {
    background-color: #aaa;
    box-shadow: 0 5px 0 #888;
}

.button:hover {
    box-shadow: none;
    transform: translateY(5px);
}

.button:active {
    box-shadow: none;
    transform: translateY(5px);
}

form {
    input, select {
        color: #333;
    }
}

ul.todo {
    margin: 0;
}

.spaced {
    margin: 1em 0;
}

header {
    background: linear-gradient(90deg, rgb(4, 126, 174), rgb(0, 255, 255));
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    margin-bottom: 10px;
}

.header-left .page-title {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

.header-list li {
    list-style: none;
    font-size: 20px;
    margin-left: 30px;
    display: inline-block;
}

.header-list li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    text-shadow:
    1px 1px 3px rgba(0,0,0,0.3),
    -1px 1px 3px rgba(0,0,0,0.3),
    1px -1px 3px rgba(0,0,0,0.3),
    -1px -1px 3px rgba(0,0,0,0.3);
}