/* this file: https://dataswamp.org/~incal/bad-www/bad.css */

:root {
    --white:  #fffefd;
    --black:  #010203;
    --green:  #014502;
    --yellow: #fefd11;
    --blue:   #01ddff;
    --grey:   #e1e2e3;
}

body > * {
    margin-inline: 2rem;
}

body {
    font-family: Garamond, Georgia, Arial, serif;
    margin:      auto;
}

#bob {
    background-color: var(--black);
    color:            var(--grey);
}

.align-left, .align-right, .date {
    font-family: "Courier New", monospace;
}
.align-left  { float: left;  }
.align-right { float: right; }

.date {
    margin-top:    14px;
    margin-bottom: 16px;
    text-align:    center;
}

.ul {
    text-decoration: underline;
}

.small {
    font-family: "Courier New", monospace;
    font-size:   small;
}

/* imgs */

figure {
    padding: 1rem;
}

figure img {
    margin-top:    0;
    margin-bottom: auto;
    height:        auto;
    width:         90%;
}

figcaption {
    font-family:   monospace;
    font-size:     small;
    margin-top:    2px;
    margin-bottom: 12px;
    width:         90%;
}

/* headers */

h1 {
    color:        var(--white);
    font-size:    medium;
    margin-top:   20px;
    margin-left:  auto;
    margin-right: auto;
    text-align:   center;
}

h2 {
    font-size:    medium;
    color:        var(--grey);
    margin-top:   20px;
    margin-left:  auto;
    margin-right: auto;
}

p {
    margin-top:   1em;
    width:        85%;
}

a:link, a:visited {
    color:           var(--blue);
    font-weight:     bold;
    text-decoration: none;
}

/* it is quite difficult for me now to see birch leaves as I saw */
@media only screen and (min-width: 630px) {
    h1 { font-size: x-large; }
    h2 { font-size: large;   }
    body {
        max-width: 630px;
        font-size: large;
    }
    figcaption { font-size: large; }
    .align-left, .align-right, .date {
        font-size: large;
    }
}