* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    line-height: 150%;
}

main {
    width: 1230px;
    margin: 31px auto 0;
    display: flex;
}

.data {
    margin-right: 30px;
    color: #888888;
    font-size: 12px;
}

h2 {
    font-size: 20px;
    margin-bottom: 23px;
}

.tag {
    color: #ffffff;
    padding: 3px 14px;
    font-weight: 600;
    font-size: 11px;
    margin-right: 30px;
    display: inline-block
}

.tag.yellow {
    background: #E7C652;;
}

.tag.green {
    background: #68E082;
}

.tag.blue {
    background: #609FFF;
}

.tag.red {
    background: #F34C4C;
}

.tag.darkgreen {
    background: #97CC00;
}

.tag.orange {
    background: #FFAD33;
}

.tag.violet {
    background: #8100E6;
}

.tag.lightblue {
    background: #00C8D4;
}

.tag.lightred {
    background: #F15A2A;
}

.button-container button {
    padding: 12px 32px 16px;
    border: none;
    background: none;
    font-weight: 500;
}

.button-container button.add-button {
    background: #FF1850;
    color: #ffffff;
    font-weight: 600;
}

[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-text)
}