@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap");

.regular {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.bold {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    font-style: normal;
}

body {
    background-color: #ffffff;
    max-width: 800px;
    margin: auto;
}

h1 {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    font-style: normal;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 4rem;
    color: #000000;
    border-bottom: 0.5px #000000 solid;
    text-align: center;
}

h2 {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    font-style: normal;
    margin-top: 40px;
    margin-bottom: 0;
    font-size: 2rem;
    color: #000000;
    border-bottom: 0.5px #000000 solid;
    margin-bottom: 20px;
}

#demo {
    display: none;
}

#dividend {
    margin-top: 0;
}

input {
    color: #000000;
    outline: none;
    border: 0px solid;
    background-color: #ffffff;
    font-size: 2rem;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}

#divisor {
    margin-top: 20px;
}

::placeholder {
    color: #999999;
    font-weight: 400;
}

.desc {
    color: #000000;
    font-size: 1rem;
}

.faded {
    margin-top: 20px;
    color: #999999;
    font-size: 1rem;
}

.accent {
    color: #ffa500;
}

.greyed {
    color: #999999;
}

.linked {
    color: #ffa500;
    text-decoration: underline;
    font-weight: 700;
}

.hint {
    color: #999999;
    font-size: 0.75rem;
    display: none;
}

#steps {
    display: none;
}

#demoNumber {
    font-size: 2rem;
    width: 100%;
}

.inline-layered {
    display: inline-grid;
}

.inline-layered > * {
    grid-column-start: 1;
    grid-row-start: 1;
}