/* 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 {
    /* Space */
    padding: 0;
    margin:  0;

    /* Size */
    width:     100%;
    max-width: 42cm;
}

h1 {
    text-align: center;
}

main {
    display:         flex;
    flex-flow:       row nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

@media (max-aspect-ratio: 1 / 1) {
    main {
        flex-flow: column nowrap;
    }
}

.services {
    display:         flex;
    flex-flow:       row nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

@media (max-aspect-ratio: 1 / 1) {
    .services {
        flex-flow: column nowrap;
    }
}

.service {
    flex: 1; min-width: 0;
}

img {
    width: 100%;
}

.content {
    padding: 1rem;
}

.content h2 {
    margin: 0;
}

article {
    /* Space */
    padding: 1rem;
    margin:  0;

    /* Border */
    border-width:  0;
    border-radius: 0 1rem 1rem 0;

    /* Size */
    width:     100%;
    max-width: 21cm;
}

@media (min-aspect-ratio: 1 / 1) {
    article {
        margin-right: 1rem;
    }
}

@media (max-aspect-ratio: 1 / 1) {
    article {
        width: auto;
    }
}

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

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

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

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

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

/* Fonts */

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

.services {
    font-family: sans-serif;
}

.content h2 {
    font-weight: 300;
}

.content p {
    font-weight: 200;
}

footer {
    font-family: sans-serif;
}

/* Theme */

html {
    color:      white;
    background: #222;
}

.service {
    background: #111;
    opacity:    0.5;
}

.service:hover {
    /* Color */
    background: #FFF1;
    opacity:    1;

    /* Misc. */
    transform: translateY(-0.5rem);
}

article {
    color:      silver;
    background: #141414;
}

footer {
    border-style: solid;
    border-color: gainsboro;
}

footer a {
    color: gainsboro;
}

footer a:hover {
    background: #FFF1;
}

/* Animations */

html {
    animation: devanece 1s;
}

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

.service {
    transition: transform 0.25s;
}