/* Misc. */

a {
    text-decoration: none;
}

/* Organization */

html {
    /* Space */
    padding: 0;
    margin:  0;

    /* Size */
    width:  100%;
    height: 100%;

    /* Layout */
    display:         flex;
    align-items:     flex-start;
    justify-content: safe center;
}

body {
    /* Size */
    width:     100%;
    max-width: 67rem;

    /* Space */
    padding: 0 2rem;
    margin:  0;

    /* Alignment */
    text-align: center;

    /* Misc. */
    box-sizing: border-box;
}

nav {
    /* Space */
    gap: 1rem;

    /* Layout */
    display: grid;
    align-items: stretch;
    justify-content: safe center;
    grid-template-columns: repeat(auto-fill, 15rem);
}

nav a {
    /* Space */
    padding: 2rem 1rem;
    margin:  0;

    /* Border */
    border-width:  1px;
    border-radius: 1rem;
}

nav img {
    height: 5rem;
}

footer {
    /* Space */
    padding: 2rem 0;
    margin:  0;

    /* Space */
    display:         flex;
    flex-flow:       row wrap;
    align-items:     flex-start;
    justify-content: space-between;
}

footer a {
    /* Space */
    padding: 0.5rem;
    margin:  0;

    /* Border */
    border-width:  1px;
    border-radius: 8px;

    /* Layout */
    display: inline-block;
}

/* Font */

html {
    font-family: serif;
    font-size:   14pt;
}

h1 {
    font-size: 3rem;
}

p {
    font-family: sans-serif;
}

footer a {
    font-family: sans-serif;
    font-weight: bold;
}

/* Theme */

html {
    background: #FAFAFA;
}

nav a {
    /* Color */
    background: white;

    /* Border */
    border-style: solid;
    border-color: gainsboro;

    /* Shadow */
    box-shadow: 0 4px 0 0 gainsboro;
}

nav a:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 0 0 gainsboro, 0 12px 8px 0 #0001;
}

nav a:active {
    filter: brightness(99%);
    transform: translateY(4px);
    box-shadow: none;
}

h1, h2 {
    color: #222;
}

p {
    color: #666;
}

footer a:first-child {
    /* Color */
    color:      #666;
    background: white;

    /* Border */
    border-style: solid;
    border-color: gainsboro;

    /* Shadow */
    box-shadow: 0 4px 0 0 gainsboro;
}

footer a:last-child {
    /* Color */
    color:      white;
    background: #333;

    /* Border */
    border-style: solid;
    border-color: #222;

    /* Shadow */
    box-shadow: 0 4px 0 0 #222;
}

footer a:hover {
    filter: brightness(105%);
}

footer a:active {
    filter: brightness(95%);
    transform: translateY(4px);
    box-shadow: none;
}

/* Animation */

html {
    animation: devanece 1s;
}

nav a, footer a {
    transition: transform 0.2s, box-shadow 0.2s;
}

@keyframes devanece {
    from {
        opacity: 0;
        transform: translateY(-2rem);
    }
    to {
        opacity: 1;
    }
}