:root {
    --lifebear: #234cad;
    --blue: #425fc9;
    --red: #ed4e60;
    --yellow: #ffd52d;
    --green: #0eae95;
    --text: #65727f;
    --title: #444f5a;
    --hr: #65727f;
}
body, header, main {
    display: flex;
    flex-flow: column;
    align-items: center;
}

header, main{
    max-width: 720px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: large;
    line-height: 1.4em;
    margin: 0;
    color: var(--text);
}

section {
    margin-left: 32px;
    margin-right: 32px;
    margin-top: 80px;
}

img {
    width: 100%;
}

header p {
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: 32px;
    margin-right: 32px;
}

section p, section img {
    width: 100%;
}

h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--title);
    font-size: 1em;
}

hr {
    color: var(--hr);
}

ol {
    padding-left: 24px;
}

ul {
    padding-left: 0px;
    list-style-type: none;
}

ul li:before {
    content: "";
    border-radius: 100%;
    display: inline-block;
    position: relative;
    left: -4px;
    width: 12px;
    height: 12px;
}
li {
    text-indent: 4px;
}
.today ul li:before {
    background: var(--red);
}
.shortcut ul li:before {
    background: var(--blue);
}
.todo ul li:before {
    background: var(--green);
}
.note ul li:before {
    background: var(--yellow);
}
.updates {
    color: black;
    margin-top: 0px;
    align-self: flex-start;
}

.review {
    color: black;
    text-align: center;
    font-size: 0.9em;
    margin-top: 67px;
    margin-bottom: 48px;
}

.button-flat {
    display: inline-block;
    width: 100%;
    height: 44px;
    font-size: 18px;
    line-height: 44px;
    text-decoration: none;
    text-align: center;
    background: black;
    color: white;
    border-radius: 4px;
}

.button-flat-lifebear {
    display: inline-block;
    width: 100%;
    height: 48px;
    font-size: 18px;
    font-weight: 600;
    line-height: 48px;
    text-decoration: none;
    text-align: center;
    background: var(--lifebear);
    color: white;
    border-radius: 4px;
}

.star {
    max-height: 22px;
    margin-top: 0;
    margin-bottom: 12px;
}

.bold {
    font-weight: 600;
}

.red {
    color: var(--red);
}
.blue {
    color: var(--blue);
}
.green {
    color: var(--green);
}
.yellow {
    color: var(--yellow);
}