main/static/css/main.css

:root {
    --main: #dd9a1a;
    --bg: #111;
    --link: #ffdb96;
    --link-hover: #dd9a1a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--main);
    font-family: "Helvetica", "Arial", sans-serif;
}


div.main-content {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 1rem;
}

header#menu {
    display: flex;
    flex-direction: column;
    border-width: 5px;
    border-color: var(--main);
    border-style: double;
    border-radius: 5px;
    margin-bottom: 2rem;
}

header#menu a {
    padding: 12px;
    color: var(--main);
    text-decoration: none;
    text-transform: uppercase;
    padding-inline: 30px;
    font-weight: bold;
}

header#menu a.active {
    background: var(--main);
    color: var(--bg);
}

header#menu a:hover {
    background: var(--main);
    color: var(--bg);
}

div#top-bar {
    font-family: 'Courier New';
}

article#content {
    display: flex;
    flex-direction: column;
    border-width: 5px;
    border-color: var(--main);
    border-style: double;
    border-radius: 5px;
    margin-top: 2rem;
    padding: 1rem;
    gap: .5rem;
    padding-block: 2rem;
}

footer#footer {
    margin-top: 3rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
}

.link {
    color: var(--link);
    text-decoration: none;
}

.link:hover {
    color: var(--link-hover);
}


footer#footer > *:not(:last-child)::after {
    content: " ~ ";
    margin-left: 0.7rem;
    color: var(--main);
}

pre.ascii {
    margin-bottom: 2rem;
    font-size: 1rem;
    overflow: auto;
}

.user_home {
  display: grid;
  grid-template-columns: 100px 30px 100px 100px 40px 120px 15px;
  font-family: monospace;
  white-space: pre;
}

.form-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .5em;
}
.form-row > label {
  padding: .5em 1em .5em 0;
  flex: 1;
}
.form-row > input,
.form-row > select,
.form-row > textarea {
  flex: 2;
  padding: .5em
}

.form-row > button:hover {
  background: var(--link);
 }
.form-row > button {
  padding: .5em;
  background: var(--main);
  color: white;
  border: 0;
  padding: 1rem;
}

input, textarea, select {
  background: #000;
  color: #fff;
  border: 1px solid var(--main);
}

ul li {
  padding: 0.5rem;
  margin-left: 2rem;
}
@media only screen and (min-width: 900px) {
    div.main-content {
        width: 60%;
    }
}

@media only screen 
    and (min-width: 480px) 
    and (max-width: 900px) {
    header#menu {
        flex-direction: row;
    }
    .form-row {
        flex-direction: row;
    }
}

@media only screen and (max-device-width: 480px) {
    article {
	font-size: 1em;
    }
}