html {
    text-align: center;
    font-family: "Roboto Slab", serif;
    
}

body {
    width: 60%;
    margin: auto;
    text-align: left;
}

#red-blanket {
    margin: 20px;
    max-width: 100%
}

.body-text {
    column-count: 2;
    column-gap: 50px;
}

.body-text > p {
    break-inside: avoid-column;
}

canvas {
    margin: auto;
}

button {
    font-family: "Roboto Slab", serif;
    width: 175px;
    padding: 2ch;
    border: none;
    margin: 10px;
}

button:hover {
    cursor: pointer;
}

.selected {
    border: 3px green solid;
}

#pattern-settings {
    text-align: center;
}

#pattern-text {
    column-count: 3;
}

#pattern-abbreviations {
    margin-bottom: 20px;
}

#abbreviations-box {
    column-count: 3;
}

#abbreviations-box > p {
    break-inside: avoid-column;
}

@media (max-width : 600px) {
    
    #abbreviations-box {
        column-count: 1;
    }

    #pattern-text {
        column-count: 1;
    }

    .body-text {
        column-count: 1;
    }

    body {
        width: 80%;
        margin: auto;
        text-align: left;
        font-size: 14px;
    }

    .settings-buttons {
        display: flex;
    }

    .settings-buttons > button {
        flex: 1;
        margin: 5px;
        padding: 1ch;
    }
}