guestbook-ng/assets/css/swagg.css

* {
  box-sizing: border-box;
}

body {
    cursor: url('/misc/piz_normal_p1.cur'), auto;
    background: #000;
    margin: 0em;
    color: #00FF00;
    font-family: 'Monaco', monospace;
}

p {
    overflow-wrap: break-word;
}

a {
    color: cyan;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active, a:visited {
    color: violet;
}

td {
    text-align: left;
}

th {
    text-align: right;
}

hr {
    height: 2px;
    color: #00FF00;
    background-color: #00FF00;
    border: none;
}

.inner {
    margin: 0 auto;
    max-width: 50%;
}

.outer {
    margin: 0 auto;
    max-width: 60%;
}

#bonzi {
    position: fixed;
    right: 10%;
    bottom: 10%;
}

#gdpr {
    top: 0;
    position: relative;
    padding: 0.75em;
    text-align: center;
    width: 100%;
    background-color: #BEBEBE;
    color: #000000;
}

.win95button {
    border: 0.25em outset;
    border-color: #000000;
    background-color: #BEBEBE;
    padding: 0.5em;
    width: 10em;
    border-radius: 0%;
}

.win95button:active {
    border: 0.25em inset;
}

img {
    vertical-align: middle;
}

.field {
    display: flex;
    flex-flow: column;
    margin-bottom: 1em;
}

.articles {
    display: flex;
    flex-flow: column;
}

article {
    border-color: #00FF00;
    border-style: ridge;
    padding: 0em 1em;
    margin-bottom: 1em;
}

article .message.field {
    font-family: 'Bradley Hand', 'Apple Chancery', cursive;
    font-size: 1.25em;
    margin-bottom: 0em;
    white-space: pre-wrap;
}

article h3 {
    margin-bottom: 0em;
}

.captcha {
    display: grid;
    grid-template-columns: 3ch auto;
}

footer {
    font-style: italic;
    text-align: center;
}

nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1em;
    margin-bottom: 1em;
}

h1#top {
    text-align: center;
}

.error {
    border-style: dashed;
    border-color: red;
    color: red;
    padding: 1em;
    text-align: center;
    margin-bottom: 1em;
}

.field-with-error {
    border-style: dotted;
    border-color: red;
    padding-left: 1em;
}

@media screen and (max-width: 1023px) {
    .inner {
        max-width: 95%;
    }

    .outer {
        max-width: 99%;
    }
}