:root {
    --oc-primary: #009682;
    --oc-background: #efefef;
    --oc-background-dark: #dfdfdf;
    --oc-white: #FFFFFF;
    --oc-black: #000000;
    --oc-text: #000000;
    --oc-danger: #e74c3c;
    --oc-secondary: #00634E;
}

/* typography */

a,
a:hover,
a:visited,
a:focus {
    color: var(--oc-primary);
}

.h1, h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.h2, h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.h3, h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.h4, h4 {
    font-size: 1rem;
}
.hero h1 {
    font-size: 3rem;
}

form {
    margin-bottom: 1.2rem;
}

.references strong {
    font-weight: 600;
}

/* anchor */

:target::before {
    content: '';
    display: block;
    height:      60px;
    margin-top: -60px;
}


/* layout */

#body-wrapper .container {
        padding-top: 1rem;
        padding-bottom: 4rem;
    }
}

.hero {
    margin-top: 45px;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.bricklayer {
    margin-right: -25px;
}

/* mobile */

.mobile-menu .button_container span {
    background-color: var(--oc-black);
}
.treemenu .toggler {
    color: var(--oc-primary);
}
.mobile-logo {
    background-color: var(--oc-primary);
    height: 64px;
}

/* header */

#header {
    background-color: var(--oc-primary);
}
#header .dropmenu > ul > li a {
    transition: color 0.5s ease;
}
#header .dropmenu > ul > li a,
#header .dropmenu > ul > li a.active,
#header .dropmenu > ul > li a:visited,
#header .dropmenu > ul > li a:hover,
#header .dropmenu > ul > li a:focus {
    color: var(--oc-black) !important; /* important in upstream theme... */
}
#header .dropmenu > ul > li a:hover {
    color: var(--oc-white) !important; /* important in upstream theme... */
}
#header .dropmenu > ul > li > ul > li > a:hover {
    color: var(--oc-primary) !important; /* important in upstream theme... */
}

#header .dropmenu ul li a:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f078';
}
#header .dropmenu ul ul li a:before {
    content: '\f054';
}
#header .dropmenu ul li a:only-child:before {
    content: '';
}

/* footer */

#footer {
    text-align: left;
    padding: 2rem 0;

    background-color: var(--oc-black);
}
#footer img.logo {
    margin-bottom: 1rem;

    -webkit-filter: invert(1);
    filter: invert(1);
}
#footer p {
    color: var(--oc-white);
}
#footer p:last-child  {
    margin-bottom: 0;
}
#footer h1,
#footer h2,
#footer h3,
#footer h4 {
    margin-top: 0;
    color: var(--oc-white);
}

#bottom {
    font-size: smaller;
    padding: 1rem 0 1rem 0;

    color: var(--oc-black);
    background-color: var(--oc-primary);
}
#bottom p,
#bottom ul {
    margin: 0;
}
#bottom a,
#bottom a:hover,
#bottom a:visited,
#bottom a:focus {
    color: var(--oc-black);
}

/* home */

img.center {
    display: block;
    margin: 0 auto;
    width: 50%;
}

/* blog */

.prev-next {
    position: relative;

    .prev {
        position: absolute;
        left: 0;
    }
    .back {
        text-align: center;
    }
    .next {
        position: absolute;
        right: 0;
    }
}

/* modular */

.modular-text {
    padding-top: 0;
    padding-bottom: 0;
}
.modular-text .container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.modular-text:last-child .container {
    padding-bottom: 4rem;
}

.modular-text.no-bg {
    background-color: white !important;
}
.modular-text.no-bg .container {
    padding-top: 0;
    padding-bottom: 0;
}
.modular-text.no-bg:first-child .container {
    padding-top: 1rem;
}
.modular-text.no-bg:last-child .container {
    padding-bottom: 4rem;
}

/* removes margin-bottom of the last child since it cannot overlap
   with the margin-top of the headline in the next modular */
.modular-text.no-bg.column > p:last-child,
.modular-text.no-bg.column > ul:last-child,
.modular-text.no-bg.column > ol:last-child {
    margin-bottom: 0;
}

/* make a first h2 look like an h1 */
.modular-text:nth-child(3) .container h2:first-child {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

/* if #start is the 3rd child we need to add padding to match the navbar
   if there is a hero image, #start will be the 4th child */
#start:nth-child(3) .modular-text:nth-child(2) .container {
    padding-top: 5rem;
}

.modular-cards .container {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.modular-blog h2 {
    margin-bottom: 30px;
}
.modular-blog h5 {
    margin-top: 0;
}
.modular-blog .modular-blog-twitter {
    margin-top: 86px;
    margin-left: 30px;
    margin-right: 10px;
}
.modular-blog .modular-blog-date {
    margin-bottom: 10px;
}
.modular-blog .dt-published {
    font-size: smaller;
}

.modular-text:nth-child(4n),
.modular-cards:nth-child(4n),
.modular-blog:nth-child(4n) {
    background-color: var(--oc-background);
}

/* cards */

.cards-wrapper .cards {
    @media screen and (min-width: 840px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        margin-right: -20px;
    }
}

.cards-wrapper .card {
    @media screen and (min-width: 840px) {
        flex: 0 1 30%;
    }

    margin-bottom: 1rem;
    margin-right: 1rem;

    padding: 1rem;

    border: 1px solid var(--oc-primary);
    border-top: 5px solid var(--oc-primary);
    border-bottom: 5px solid var(--oc-primary);

    text-decoration: none;
}
.cards-wrapper .card:hover,
.cards-wrapper .card:visited,
.cards-wrapper .card:focus {
    text-decoration: none;
}

.cards-wrapper .card.fix-margin {
    /* increase margin to force wrap after second card */
    margin-right: 2rem;
}

.cards-wrapper .card h4 {
    text-align: center;
}

.cards-wrapper .card p {
    font-size: small;
    text-align: center;
}

.cards-wrapper .card:hover {
    background-color: var(--oc-background);
}

.cards-wrapper .card .card-image-wrapper {
    position: relative;
    height: 6rem;
    margin-top: 1rem;
}

.cards-wrapper .card .card-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
}

.cards-wrapper .card img {
    display: inline-block;
    max-width: 10rem;
    max-height: 4rem;
}

.cards-wrapper .card i {
    display: inline-block;
    color: var(--oc-black);
    line-height: 4rem;
}

.cards-wrapper .card .card-title {
    text-align: center;
    color: #000;
    font-size: 24px;
}

.cards-wrapper .card .card-subtitle {
    text-align: center;
    color: #000;
    font-size: 20px;
}

/* notices */

.notices.green {
    border-left: 10px solid var(--oc-primary);
    background-color: var(--oc-background-dark);
    color: var(--oc-black);
}

/* references */

.references.csl-bib-body .csl-entry {
    margin-bottom: 1rem;
}

/* contributors */

.orcid-logo {
    position: relative;
    top: 2px;
}

/* misc */

.hints {
    height: 3rem;
}