:root {
  --black: #000000;
  --blue: #0000ff;
  --green: #00ff00;
  --cyan: #00ffff;
  --red:#ff0000;
  --pink: #ff00ff;
  --yellow: #ffff00;
  --white: #ffffff;
}

@font-face {
    font-family: Bedsted;
    src: url(../fonts/bedstead-extended.otf);
}

body {
    background-color: #26262b;
}

main {
    background-color: var(--black);
    margin: 10px auto 0 auto;
    padding: 20px 0 1px 0;
    width: 900px;
}

main p{
    font-family: Bedsted;
    font-size: 30px;
    line-height: 0px;
    white-space: pre-wrap;
    margin-top: -0.3px;
}

a {
    text-decoration: none;
}

#pageNum {
    font-family: Bedsted;
    font-size: 30px;
    background: none;
    border: none;
    color: white;
    width: 135px;
    padding: 0;
    margin: -22px 0 -22px 0;
}

#pageNum::placeholder {
    color: white;
}

#pageNum:focus {
    outline: none;
}

#pageNumButton {
    display: none;
}

.black {
    color: var(--black);
}

.blue {
    color: var(--blue);
}

.green {
    color: var(--green);
}

.cyan {
    color: var(--cyan);
}

.red {
    color: var(--red);
}

.pink {
    color: var(--pink);
}

.yellow {
    color: var(--yellow);
}

.white {
    color: var(--white);
}

.bg-black {
    background-color: var(--black);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-green {
    background-color: var(--green);
}

.bg-cyan {
    background-color: var(--cyan);
}

.bg-red {
    background-color: var(--red);
}

.bg-pink {
    background-color: var(--pink);
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-white {
    background-color: var(--white);
}