@import 'styles.css';
@import 'header_footer.css';

#about {
    margin-top: 100px;
	min-height: 100vh;
    background-attachment: fixed;
	background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        url('/images/ID27.png');
	background-size: cover;
    background-position:top;
    
    display: flex;
    flex-direction: column;
    /*justify-content:space-around; /* Push content to the bottom */
}

#about h1 {
    text-align: center;
    letter-spacing: 2px;
    font-size: 2rem;
    font-weight: 600;
}


.about-book {
    display: flex;
    flex-direction: row;
    justify-content:space-around ;
    width: 100%;
    padding: 2rem 0;
}

.about-book-particle {
    width: 60%; /* Makes the image responsive */
    height: auto; /* Maintains aspect ratio */
    padding: 2rem;
}

.about-book-particle-img {
    display: block; /* Prevent extra space caused by inline images */
    width: 30%; /* Makes the image responsive */
    height: auto; /* Maintains aspect ratio */
    padding: 2rem;
    display: flex;
    justify-content: center;
}

.about-book-particle-img img {
    display: block; /* Prevent extra space caused by inline images */
    width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains aspect ratio */

}

#about p {
    color: var(--font-clr-dark-grey);
    text-align: justify;
    line-height: 1.4;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.about-box {
    width: 400px; /* Controls the box width */
    margin: 2rem; /* Centers the box and adds vertical spacing */
    padding: 1.5rem;
    /*background-color: rgba(255, 255, 255, 0.9); /* #f9f3e8; /* Light background color for the box */
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    text-align: left; /* Center-aligns text */
}

/* ============ Small screens ============== */

@media(max-width: 850px) {
	.about-book {
		flex-direction: column;
	}

    .about-book-particle, .about-book-particle-img {
        width: 100%;
    }
}