style.css

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

html {
    margin: 0 auto;
    padding: 0 auto;
}

@font-face {
    font-family: CMUTypewriter;
    src: url(fonts/cmuntt.ttf);
}

body {
    font-family: 'Source Sans 3';
    font-size: 20px;
    max-width:100%; /* Adjust this value to your desired maximum width */
    margin: 0 auto;
    padding: 0 auto; 
    background-color: white;
}

body p{
    font-size: 20px;
}

.container {
    margin: 0 auto;
    padding: 0 auto;
    
}

a {
    color:#BF6D4E;
    text-decoration: none;
    font-weight: 900;
    font-family: CMUTypewriter;
}

a:hover{
    color: #40251F; /* Change color on hover */
    
}

.title {
    font-family: 'Abril Fatface', cursive;
    color: #8C634A;
    font-size: 50px;
    margin-top: 0px;
    margin-bottom: 15px;
}

/* Style for the navigation */
.navigation {
    background-color: #40251F; /* Background color for the navigation bar */
    color: #fff; /* Text color for the links */
    text-align: center; /* Center the navigation links horizontally */
    padding: 0 auto; /* Add padding above and below the navigation bar */
    margin-bottom: 10px;
}

.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
}

.navigation li {
    display: inline;
    margin: 0 20px; /* Add space between the navigation items */
    padding: 10px;
}

.navigation li:hover {
    /* display: inline; */
    margin: 0 20px; /* Add space between the navigation items */
    background-color: #BF6D4E;
    color: #000;
}

.navigation a {
    font-size: 22px;
    font-style: 600;
    color: white;
    font-family: 'Source Sans 3';
}

/* Style for the content area */
.content {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow columns to wrap to the next row on smaller screens */
    margin: 0 200px 0 200px;
}

/* Style the left column */
.left-column {
    flex: 1.5; /* Make the left column flexible to take up remaining space */
    background-color: #ffffff; /* Add a background color for differentiation */
    padding: 20px; 
    /* Add some padding for spacing */
    padding-left: 0px;
    padding-right: 0px;
    text-align:center;
}

/* Style the "handle" container to display the icon and email on the same line */
.handle {
    /* display: flex; */
    align-items: center;
    margin: 0px;
}

/* Style the mail icon */
.handle i {
    font-size: 24px; /* Adjust the size of the icon as needed */
    margin-right: 10px; /* Add spacing between the icon and email */
    margin-bottom: 0px;
    color: #BF6D4E;
}

.handle i:hover {
    color: #40251F; /* Change color on hover */
}

.handle p {
    margin: 5px;
    /* margin-right: 0px; */
    /* text-align: right; */
}

/* Style the right column */
.right-column {
    flex: 2; /* Make the right column twice as wide as the left column */
    background-color: #ffffff; /* Add a background color for differentiation */
    padding: 20px; /* Add some padding for spacing */
    /* padding-left: 0px; */
    padding-right: 10%;
    /* margin-right: 300px; */
    /* margin-left: 10px; */
}

.image-container {
    background-color: #8C634A; /* Set your desired background color */
    padding: 15px; /* Set your desired padding */
    display: inline-block; /* Prevent the container from taking the full width */
    width: 60%;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-radius: 15px;
}

.image-container img {
    max-width: 100%;
    margin: 0px;
    border-radius: 15px;
}


.content-teach {
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

.links {
    width: 70%;
    margin: 0 auto;
}

.bookshelf p{
    font-size: 16px;
}

.bookshelf{
    width: 70%;
    margin: 0 auto;
}

#book {
    background-color: #8C634A;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    font-size: 18px;
    color: white;
    
}

#book #content {
    display: none;
}

#book:hover {
    background-color:#BF6D4E;
    color: black;
}

#book:hover #title {
    display: none;
}

#book:hover #content {
    display: inline;
}

/* MEDIA QUERIES */

@media (max-width: 1000px) {

    body {
        margin: 0 auto;
        padding: 0 auto;
        background-color: #ffffff;
    }
    body .content {
        max-width: 90%;
        font-size: 15px;
    }
    body p {
        font-size: 19px;
    }
    .content {
        margin: 0 auto;
    }

    .container {
        flex-direction: column; /* Change to a vertical layout */
        background-color: #ffffff;
        
    }

    .left-column {
        text-align: center;
    }

    .left-column,
    .right-column {
        flex: none; /* Remove the flex property to stack the columns */
        width: 100%; /* Set a full width for both columns */
        margin: 0;
        padding: 0;
        background-color: #ffffff;
        
    }

    img {
        max-width: 70%;
        height: auto;
        margin-bottom: 20px;
        padding: 0;
    }

    .links, .bookshelf{
        width: 95%;
    }
}

/* @media (max-width: 1600px) {
    .content {
        margin: 0 100px 0 100px;
    }
} */

/* @media (min-width: 2000px) {
    body {
        max-width: 45%;
    }
} */