/** Set front page specific CSS **/

h1 {
    visibility: hidden;
    font-size: 0;
}

h2.front {
    margin-top: 2rem;
}

.bd-container__inner.bd-page-width {
    max-width: 100% !important;
}

.bd-article-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.bd-article {
    padding: 0 !important;
}

ul.postlist {
    padding-left: 0;
}

html[data-theme="dark"] {
    --alternate-bg-color: #1e1e1e;
}

html[data-theme="light"] {
    --alternate-bg-color: #1e1e1e0f;
}

.alternate-bg {
    background: var(--alternate-bg-color);
}

.section-flex {
    display: flex;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
}

.section-contents {
    width: 100%;
    max-width: 66rem;
}

.grid-container {
    display: grid;
    row-gap: 1em;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-item {
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
}

@media (min-width:576px) {
    .grid-sm-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:768px) {
    .grid-md-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width:992px) {
    .grid-lg-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width:1200px) {
    .grid-xl-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/** Add animation for front page SVG **/
circle.big {
    animation: animate-circles 1s;
}
@keyframes animate-circles {
    0% {
        /* transform: scale(0.95); */
        opacity: 0.8;
    }

    100% {
        /* transform: scale(1); */
        opacity: 1;
    }
}

/** timeline **/
/** highlight future events **/
ol.timeline-default>li.timeline>div.tl-item.dt-future {
    outline-color: #30B808;
}

body {
    --tl-dot-color: #FF7D17;
}

/** adapt for dark-mode **/
body[data-theme="dark"] {
    --tl-item-outline-color: #383838;
    --tl-item-tail-color: #747474;
    --tl-item-shadow: 0 2px 6px 0 rgba(100, 100, 100, 0.2), 0 4px 8px 0 rgba(100, 100, 100, 0.19);
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) {
        --tl-item-outline-color: #383838;
        --tl-item-tail-color: #747474;
        --tl-item-shadow: 0 2px 6px 0 rgba(100, 100, 100, 0.2), 0 4px 8px 0 rgba(100, 100, 100, 0.19);
    }
}