:root {
    --blue: #2060DF;
    --bluefaded: #c8cfde;
    --white: #ffffff;
    --red: #AF291D;
    --grey: #EFF1F4;
}

/* ##### UTILITIES ##### */

.full-height {
    height: 100%;
}

.border-radius-3 {
    border-radius: 3px;
}

.text-center {
    text-align: center;
}

.text-light {
    color: var(--white);
}

.no-bottom-margin {
    margin-bottom: 0px;
}

.mx-20 {
    margin: 0px 20px 0px 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.p-10 {
    padding: 10px;
}

.icon-link {
    text-decoration: none;
}

.background-grey {
    background-color: var(--grey);
}

.background-blue {
    background-color: var(--blue);
    color: var(--white);
}

.background-red {
    background-color: var(--red);
    color: var(--white);
}

.background-white {
    background-color: white;
}

#about-article{
    line-height: 1.5;
}

.badge {
    background-color: var(--blue);
    border-radius: 5px;
    padding: 5px;
    color: var(--white);
}

.emphasis {
    color: var(--blue);
    text-shadow: 0px 0px 1px var(--red)
}

article {
    border-radius: 3px;

}

.article-border {
    border: var(--bluefaded) 1px solid;
}

.pico-box-shadow {
    box-shadow: var(--pico-card-box-shadow);
}

.contact-bar {
    padding: 8px 0px 10px 0px;
    margin-bottom: 20px;
}

.margin-auto {
    display: block;
    margin: auto;
}

.page-header {
    color: var(--blue);
    font-family: "Spectral SC", serif;
    font-weight: 700;
    font-size: 3rem;
    font-style: normal;
}

.page-subheader {
    color: var(--red);
    font-family: "Spectral SC", serif;
    font-weight: 800;
    font-style: normal;
}

.origin-grid {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 0px;
}

#fb-post-summary {
    font-size: 29.75px;
    font-weight: 700;
    font-family: var(--pico-font-family);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    box-shadow: var(--pico-card-box-shadow);
    border: 2px solid transparent;
    border-radius: 3px;
}

#fb-post-summary:hover {
    border: var(--blue) 2px solid;
    border-radius: 3px;
}

/* ############ OVERIDE PICO ############ */

section {
    padding-bottom: 40px;
}

#posts-section {
    padding: 10px;
    border: 2px dashed var(--blue);
    border-radius: 3px;
}

.slideshow-image {
    max-height: 300px;
}

/* Fading animation */

.fade {
  animation-name: fade;
  animation-duration: 4s;
}

@keyframes fade {
  from {opacity: .3}
  to {opacity: 1}
}