:root {
    --main-color: rgb(42 42 42);
    --accent-color: #C69DD2;
    --main-font: 'Roboto', sans-serif;
}

body {
    margin: 20px;
}

h1 {
    display: inline;
    position: relative;
    margin: 0;
    color: var(--accent-color);
    font-family: var(--main-font);
}

h1:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 5px;
    background: var(--accent-color);
}

#contenteditable {
    display: inline-block;
    font-size: 100px;
    font-weight: 300;
    width: 100%;
    color: var(--main-color);
    line-height: 1.2;
    margin: 30px 0;
    outline: none;
    caret-color: var(--accent-color);
    font-family: var(--main-font);
}

.Ptk, .Th, .W, .V, .Ng, .Ch, .Dj {
    font-weight: 700;
}

.Ptk {
    color: #7F7EFF;
}

.Th {
    color: #A390E4;
}

.W {
    color: #C69DD2;
}

.V {
    color: #CC8B8C;
}

.Ng {
    color: #C68866;
}

.Ch {
    color: #417B5A;
}

.Dj {
    color: #4B3F72;
}

#max-length-text {
    font-family: var(--main-font);
    color: var(--main-color);
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
}

#max-length-text.hidden {
    display: none;
}

footer {
    position: relative;
    font-family: var(--main-font);
    color: var(--main-color);
    padding-top: 20px;
}

footer::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent-color);
}

footer a {
    text-decoration: none;
    font-family: var(--main-font);
    color: var(--accent-color);
}