/* =========================================================
   BIO
   ========================================================= */

#bio {
    position: relative;

    width: 600px;
    max-height: 500px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    margin: auto;

    background: var(--glass-dark);

    border-top: 2px solid var(--glass-border);
    border-bottom: 2px solid var(--glass-border);
}

#bio-text {
    padding: 20px;
}


/* ---------------------------------------------------------
   Bio Side Effects
   --------------------------------------------------------- */

#bio::before,
#bio::after {
    content: "";

    position: absolute;

    top: -2px;
    bottom: -1.5px;

    width: 100px;

    border-top: 2px solid var(--glass-border);
    border-bottom: 2px solid var(--glass-border);

    pointer-events: none;
}


/* ---------------------------------------------------------
   Bio Left
   --------------------------------------------------------- */

#bio::before {
    left: -100px;

    background: linear-gradient(
        to left,
        var(--glass-dark),
        transparent
    );
}


/* ---------------------------------------------------------
   Bio Right
   --------------------------------------------------------- */

#bio::after {
    right: -100px;

    background: linear-gradient(
        to right,
        var(--glass-dark),
        transparent
    );
}