:root {
    --black: #24283b;
    --blue: #7aa2f7;
    --cyan: #7dcfff;
    --green: #9ece6a;
    --orange: #ff9e64;
    --red: #db4b4b;
    --grey: #c0caf5;
    --purple: #9d7cd8;
    --pink: #ff007c;

    --xx-small: 1px;
    --x-small: 3px;
    --small: 5px;
    --medium: 7px;
    --large: 9px;
    --x-large: 11px;
    --xx-large: 14px;
}

body {
    background-color: var(--black);
    color: var(--grey);
    font-family: "Nova Mono", monospace;
    font-size: var(--x-large);
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom-width: var(--x-small);
    border-left-width: var(--xx-small);
    border-right-width: var(--xx-small);
    border-color: var(--purple);
    border-radius: var(--small);
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    margin-bottom: 3px;
    padding: 2px;
}

.container {
    margin: 3px;
}

#stat-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#skills {
    border-top-width: var(--xx-small);
    border-bottom-width: var(--xx-small);
    border-color: var(--purple);
    border-radius: var(--small);
    border-top-style: solid;
    border-bottom-style: solid;
    align-items: center;
}

#player {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}