:root {
    --o_width: 0px; /* optische Sternenbreite */
    --i_width: 0px; /* inhaltliche Sternenbreite */
}

body {
    height: 100vh;

    font-family: Bahnschrift, Verdana, 'Segoe UI', Geneva, Tahoma, sans-serif;
    font-size: 24px;
    font-weight: bold;

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
}

main {
    background-color: rgba(220,220,220,0.8);
    padding: 10px;
    border-radius: 5px;

    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-template-columns: auto;
    align-items: center;
    gap: 10px;
    justify-items: center;
    align-content: center;
}

.stern_empty {
    width: 315px;
    height: 61px;
    background-image: url(../img/stern_empty.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.stern_full {
    height: 61px;
    background-image: url(../img/stern_full.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    transition: all 500ms;
}

.opt.stern_full {
    width: var(--o_width);
}

.inh.stern_full {
    width: var(--i_width);
}

main p {
    padding: 0px;
    margin: 0px 0px 20px 0px;
}

main h1 {
    font-size: 24px;
}

main textarea {
    width: 100%;
    height: 100px;
    resize: none;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    font-family: Bahnschrift, Verdana, 'Segoe UI', Geneva, Tahoma, sans-serif;
    font-size: 16px;
}

main textarea:focus {
    outline: 0px;
    box-shadow: 5px 5px 5px black;
}