div.diag-content {
    position: relative;
    padding: 20px;
    background-color: var(--bg);
    border-radius: 75px;
    margin-top: auto;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);

    width: 500px;
    height: fit-content;

    p {
        padding: 20px;

        text-align: left;
        font-size: 1.4em;

        color: white;

        z-index: 1;
    }

    &::before {
        content: ' ';
        position: absolute;
        transform: rotateZ(45deg);
        width: 80px;
        height: 80px;
        background-color: var(--bg);
        bottom: -25px;
        left: 100px;
        z-index: -1;
    }
}

@media screen and (max-width: 600px) {
    div.diag-content {
        width: 95%;
        padding: 5px !important;
        border-radius: 35px;
        margin: auto;

        p {
            font-size: 0.8em;
        }
        
        &::before {
            left: 100px;
        }
    }
}

@media screen and (min-width: 600px) and (max-width: 1400px) {
    div.diag-content {
        padding: 25px;
        margin-top: 25%;
        width: 80%;

        p {
            font-size: 1.2em;
        }

        &::before {
            left: 180px;
        }
    }    
}