.about {
    background: linear-gradient(
        rgba(249, 247, 244,1) 0%,
        rgba(249, 247, 244,0) 20%,
        rgba(249, 247, 244,0) 80%,
        rgba(249, 247, 244,1) 100%
    ),
    url(../img/about.jpeg) center/cover no-repeat;
    height: 100dvh;
    min-height: 100svh;
    padding: 1rem;
    display: flex;
    align-items: flex-end;

    font-family: var(--font-biasa);
}

.content-about {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 0.5rem;
    font-family: var(--font-biasa);
    font-size: 1rem;
    color: var(--secondary-text-color);
    padding: 1rem;
}

.content-about h1 {
    font-family: var(--font-kaligrafi);
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.content-about p {
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

.content-about a {
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--accent-color);
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.5s ease, color 0.5s ease;
}

.content-about a:hover {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.content-about i {
    margin-right: 5px;
}

.btn-about {
    margin-bottom: 1rem;
}