html::before {
    background: url('img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(80%) blur(1px);
}

h1 {
    font-size: calc(30 / 1920 * 100vw);
    text-shadow: 5px 5px 8px #000000; /* Black shadow for better readability */
}

h2 {
    text-shadow: 5px 5px 10px #000000; /* Black shadow for better readability */
}

p, li, h3 {
    text-shadow: 5px 5px 6px #000000; /* Black shadow for better readability */
}

.conference-container {
    display: flex;
    align-items: flex-start;
    padding: calc(120 / 1080 * 100vh) calc(32 / 1920 * 100vw);
}

.quotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    row-gap: calc(122.5 / 1080 * 100vh);
    column-gap: calc(28 / 1920 * 100vw); /* Adjust gap between images */
    justify-content: center;
    margin-left: calc(99 / 1920 * 100vw); /* Space between images and bio text */
    margin-top: calc(26 / 1080 * 100vh);
}

.quote {
    width: 100%; /* Keep image original width */
    max-width: calc(487.5 / 1920 * 100vw); /* Maximum width */
    margin-bottom: calc(31.25 / 1080 * 100vh);
    border-radius: calc(16 / 1920 * 100vw);
}

.conference-content {
    width: 36%; /* Adjust width according to the space taken by profile pictures */
    padding-left: calc(34 / 1920 * 100vw);
}

.conference-content h1 {
    text-decoration: underline;
}

.conference-content h2 {
    font-size: calc((2.1 * 16) / 1920 * 100vw);
    margin-top: calc(53.75 / 1080 * 100vh);
    margin-bottom: calc(12.5 / 1080 * 100vh);
}

.conference-content p, .conference-content h3, .conference-content li {
    font-size: calc((1.6 * 16) / 1920 * 100vw);
    color: #fff; /* Text color */
    line-height: 1.6;
}

#green {
    color: #00b050;
}

#purple {
    color: #9933ff;
}

#orange {
    color: #de5a18;
}

#brown {
    color: #80350d;
}

#magenta {
    color: #d501bc;
}

#blue {
    color: #0000ff;
}