body {
    background-color: white;
    font-family: Arial, sans-serif;
    box-shadow: 0 -4px -15px rgba(0, 0, 0, 0.1);
    /* margin: 9%; */
    /* padding: 3%; */
    /* align-self: center; */
    /* margin-right: 9%; */
    /* width: 100%; */
    /* outline-style: solid; */
}

#first_screen {
    max-width: 500px;
}
/* Style for the div with ID #brief */
#brief {
    background-color: #e0f7fa;
    border-radius: 15px;
    padding: 20px;
    padding-top: 1%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 940px;
    margin-left: 5%;
    font-family: Droid Sans, Arial;
    margin-right: 7%;
}
#EXP {
    margin-right: 7%;
}
/* Style for the heading inside the #brief div */
#brief h2 {
    color: #00796b; /* Darker blue text color */
    margin-bottom: 15px; /* Space between the heading and the paragraph */
}

/* Style for the paragraph inside the #brief div */
#brief p {
    color: #004d40; /* Darker blue text color */
    line-height: 1.6; /* Line height for better readability */
    text-align: left; /* Align text to the left */
}

#myAPI div {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    background-color: white;
    border-radius: 8px;
}

#myAPI p {
    padding: 0px;
    margin: 0px;
}
h1, h2, h3 {
    color: #333;
}

p {
    line-height: 1.6;
    color: #555;
}

ul {
    list-style-type: disc;
    padding-left: 20px;
}

.preserve-whitespace {
    white-space: pre-line;
}

/* Style for the A4-sized div */
.a4-page {
    width: 210mm; /* Width of A4 page */
    height: 297mm; /* Height of A4 page */
    margin: 20mm auto; /* Center the div and add some margin */
    padding: 20mm; /* Padding inside the div */
    background-color: #ffffff; /* White background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position: relative; /* Positioning context for potential child elements */
    overflow: hidden; /* Hide any overflow content */
}

/* Optional: Add a watermark or any other content inside the A4 page */
.a4-page::before {
    content: "A4 Page";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #ccc; /* Light gray color for the watermark */
    opacity: 0.5; /* Semi-transparent watermark */
}

/* New styles for the BIOcontainer, text, and photo classes */
.BIOcontainer {
    display: flex;
    padding: 10px;
    max-width: 1000px; /* Optional: Limit the BIOcontainer width */
    margin: 10
}

.text {
    flex: 1;
    padding: 10px;
}

.photo {
    border-radius: 15px;
    flex: 1;
    padding-top: 5%;
    padding-bottom: 0px;
    text-align: center;
    margin-left: 30%;
}

.photo img {
    max-width: 100%;
    max-height: 210px;
    width: auto;
    height: auto;
}