@charset "UTF-8";


/* variables */
:root {
    --hero-image-height: 10rem;
    --figure-caption-line-height: 0.85rem;
    --figure-caption-font-size: small;
    --figure-image-border-size: 3px;
    --figure-image-padding: calc(var(--pico-spacing) / 4);
    --screenshot-width: 9rem;
}


/* small device viewport stuff */
/* there also are media queries adjacent to the declarations lower in file */
@media (max-width: 500px) {
    .hide-small {
        display: none;
    }
}


/* nav */
nav img {
    max-width: none;
    height: 3rem;
}
/* hide text for social icons when small screen */
@media (max-width: 800px) {
    nav .social li a span {
        display: none;
    }
}


/* social icons */
.social a {
    font-size: small;
    text-decoration: none;
    text-align: center;
}


/* footer */
footer {
    text-align: center;
    color: var(--pico-muted-color);
}
footer article {
    margin: calc(var(--pico-spacing) * 1.5) 0;
}
footer .social {
    font-size: small;
}
footer .social a {
    margin: calc(var(--pico-spacing) / 4);
}
footer small {
    font-size: x-small;
    opacity: 0.5;
}


/* buttons */
button.small {
    font-size: small;
    padding: 0.15rem 1rem;
    position: relative;
    margin-right: 0.5rem;
    top: -0.1rem;
}
button.tiny {
    color: var(--pico-muted-color);
    font-size: x-small;
    padding: 0 0.30rem;
    position: relative;
    top: -0.1rem;
}
@media (max-width: 500px) {
    button.small {
        font-size: x-small;
        margin: 0.1rem;
        padding: 0.15rem 0.5rem;
    }
}
@media (max-width: 319px) {
    button.small {
        font-size: xx-small;
        margin: 0.1rem;
        padding: 0.15rem 0.5rem;
    }
}
[data-tooltip]:not(a, button, input) {
    border-bottom: none;
}


/* hero */
#hero img {
    height: var(--hero-image-height);
}
#hero hgroup {
    margin: 1rem 0;
}
#hero h1 small {
    font-size: x-large;
    color: var(--pico--color);
}
#hero .brand {
    text-align: right;
}
#hero .details hgroup h1 small {
    position: relative;
    top: -0.25rem;
}
@media (max-width: 767px) {
    #hero .details {
        text-align: center;
    }
}


/* icon header */
.icon-header {
    color: var(--pico-primary);
}
.icon-header i {
    float: left;
    color: var(--pico-primary-hover);
    font-size: 3rem;
    vertical-align: middle;
    margin: 0 0 2rem 0;
    padding: 0 1rem;
}


/* media */
#screenshots figure {
    width: var(--screenshot-width);
}
figcaption {
    color: var(--pico-primary-underline);
    font-size: var(--figure-caption-font-size);
    line-height: var(--figure-caption-line-height);
}
figure img {
    padding: var(--figure-image-padding);
    border-radius: var(--pico-border-radius);
    border: var(--figure-image-border-size) solid var(--pico-muted-border-color);
}
figure a:link img, 
figure a:visited img {
    border-color: var(--pico-muted-border-color);
    transition: border-color var(--pico-transition);
}
figure a:hover img, 
figure a:active img {
    border-color: var(--pico-contrast-hover-border);
    transition: border-color var(--pico-transition);
}


/* utility classes */
.fa-ul li {
    list-style: none;
}
.muted {
    color: var(--pico-muted-color);
    border-color: var(--pico-muted-color);
}
.very-muted {
    color: var(--pico-muted-color);
    border-color: var(--pico-muted-color);
    opacity: 0.75;
}
.group {
    white-space: nowrap;
}
.spacer {
    clear: left;
    opacity: 0;
}
.spacer-small {
    clear: left;
    margin: calc(var(--pico-spacing) / 4) 0;
    opacity: 0;
}
.spacer-tiny {
    clear: left;
    margin: calc(var(--pico-spacing) / 12) 0;
    opacity: 0;
}
.indented {
    margin-left: 3rem;
}