@import url(/fonts.css);

:root {
    --header-height: 108px;
    --accent: #f5abb9;
    --accent2: #5bcffa;
    --link: #065E7F;
}

body {
    margin: 0;
    background: white;
    font-family:Arial, Helvetica, sans-serif;
}

p a, li a {
    color: var(--link);
}

header {
    background: var(--accent);
}

.header-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

#home {
    text-decoration: none;
    display: flex;
    flex-flow: row;
    height: 100%;
    align-items: center;
}

header h1 {
    font-family: 'THE BOLD FONT';
}

header a, h2 a {
    color: black;
}

header a.header-link {
    text-align: center;
    width: var(--header-height);
    height: 100%;
    display: inline-block;
    line-height: var(--header-height);
    text-decoration: none;
    transition: background .25s;
}

header > * {
    height: 100%;
}

header a.header-link:hover {
    background: #eaa4b1;
}

main, .header-container {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px; 
    padding-right: 20px;
}

.card {
    border-left: 5px dotted var(--accent2);
    padding-left: 20px;
    margin-bottom: 40px;
}

.post-date {
    color: #666;
}

#index-content {
    font-size: 14pt;
}

.logo {
    max-height: 128px;
}

#logos {
    text-align: center;
}

figure {
    text-align: center;
}

@media (min-width: 790px) {
    figure img {
        max-width: 50%;
    }
}

@media (max-width: 790px) {
    .header-link {
        height: 64px !important;
        line-height: 64px !important;
    }

    figure img {
        max-width: 100%;
    }
}