/* reset rule */
*, *:before, *:after {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
    line-height: 1.4;
}

img {
    max-width: 100%;
}

body {
    background-color: #E7E7E7;
    color: #345678;
    font-family: verdana;
}

header {
    border-bottom: 2px solid orangered;
    padding: 8px;
}

h1 {
    text-align: center;
    font-weight: normal;
    text-transform: lowercase;
}

.mainmenu {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin: 24px 0;
    gap: 12px;
}

.mainmenu a {
    flex: 0 0 120px;
    aspect-ratio: 1;
    background-color: #454545;
    color: #EEE;
    padding: 4px;
    text-decoration: none;
    border-left: 2px solid orangered;
    border-radius: 4px;
    transition: all 300ms ease-in-out;
}

.mainmenu a:hover {
    background-color: #121212;
    color: #FF6;
}

article {
    background-color: #d6d6d6;
    margin: 8px; padding: 8px;
}

article h2 {
    text-align: center;
    margin: 12px;
}

aside {
    float: right;
    border: 4px solid #454545;
    width: 320px; min-height: 500px;
    margin: 8px; padding: 8px;
}

aside h2 {
    font-weight: normal;
    text-align: center;
    color: orangered;
    margin: 8px 0;
}

aside p {
    font-size: .9em;
    margin: 8px 0;
}

.citation {
    font-size: .8em;
    font-style: italic;
    text-align: center;
    border-top: 1px solid #222;
    margin-top: 24px;
}