/* Image loading UX */
img {
    background-color: #ebe8e3;
}

img.is-loaded {
    background-color: transparent;
    animation: imgFadeIn 0.35s ease-out;
}

@keyframes imgFadeIn {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

.thesis-page img:not(.is-loaded) {
    min-height: 12rem;
}

@media (min-width: 769px) {
    .thesis-page img:not(.is-loaded) {
        min-height: 18rem;
    }
}

/* Fonts */
@font-face {
    font-family: 'Karla';
    font-display: swap;
}