/* css styles */

#gimmick {
    position: relative;
    width: 100%;
    height: 300px;
}

#aboutme {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 80%;
    overflow: auto;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* FIXME: blur does not work that well anymore since quarto 1.4 */
    backdrop-filter: blur(7px) grayscale(0.8);
    -webkit-backdrop-filter: blur(10.1px);
    padding: 1em 1em 0em 1em;
    text-align: justify;
    font-family: "Helvetica";

    /* Centering */
    transform: translate(-50%, -50%);
}


/* make the text flow around the image */
#aboutme p {
    text-align: justify;
    float: left;
}

#aboutme img {
    float: left;
    margin: 0 1em 0 0;
    width: 20%;
    height: auto;
}

#gimmick iframe {
    position: absolute;
}