@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

.terminal {
    --black: #111;
    --red: #c01c28;
    --green: #26a269;
    --yellow: #a2734c;
    --blue: #12488b;
    --magenta: #a347ba;
    --cyan: #2aa1b3;
    --white: #d0cfcc;

    --bblack: #5e5c64;
    --bred: #f66151;
    --bgreen: #33da7a;
    --byellow: #e9ad0c;
    --bblue: #2a7bde;
    --bmagenta: #c061cb;
    --bcyan: #33c7de;
    --bwhite: #ffffff;

    color: var(--white);
    background-color: var(--black);
    font-size: 16px;

    width: calc(100% - 2em);
    height: calc(100% - 2em);
    margin: 0;
    padding: 1em;
	text-wrap: wrap;

    font-family: "Roboto Mono", monospace;
}

.terminal .bold {
    font-weight: bold;
}
.terminal .bgreen {
    color: var(--bgreen);
}
.terminal .bblue {
    color: var(--bblue);
}
.terminal .byellow {
    color: var(--byellow);
}

.terminal .large {
	font-size: 20px;
}
.terminal .normal {
	font-size: 16px;
}
.terminal .small {
	font-size: 12px;
}

.terminal .clickable {
    cursor: pointer;
    text-decoration: none;
}

.terminal .clickable:hover {
    background-color: var(--black);
    color: var(--white);
}
.terminal .clickable.bblue:hover {
    background-color: var(--bblue);
    color: var(--black)
}
.terminal .clickable.blue:hover {
    background-color: var(--blue);
    color: var(--black)
}