/* Give website a "custom-designed" look: */
body {
    font-family: 'General Sans', sans-serif;
    line-height: 1.6;
}

h1 {
    font-weight: 700;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* NOTE: USING BOOTSTRAP FOR THE STYLES WHICH CAN BE APPLIED THROUGH IT. */

/* Bootstrap doesn't provide a built-in class for rem width — it uses a predefined scale (like 25, 50, 75, 100, auto,
and fractional classes like w-25, w-50 which refer to percentages). */
.dp-navbar {
    width: 2.5rem;
}

.dp-lg {
    width: 8rem;
}

.dp-md {
    width: 4rem;
}

.dp-sm {
    width: 2rem;
}

/* Bootstrap doesn't have a built-in utility class specifically for `white-space: pre-wrap`. */
.post-content {
    white-space: pre-wrap; /* show new lines */
}

.limit-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* show only 5 lines with ellipsis ("...") */
    overflow: hidden; /* hide overflown text */
}

/* Prevents Chrome autofill flashing background on dark theme
(comment out to see the problem, give it to chatgpt to know what this fix does) */
input:-webkit-autofill {
    transition: background-color 86400s steps(1, end), color 86400s steps(1, end);
}

/* Heart animation */
.heart {
    display: inline-block;
    animation: pulse 1s infinite;
    transform-origin: center;
    color: red;  /* for class `glow` */
}

@keyframes pulse {
    0%, 100% {
        transform: scale(.8);
    }
    50% {
        transform: scale(1.2);
    }
}

.glow {
    text-shadow: 0 0 1rem;
}