html{

    scroll-behavior:smooth;
    
    }

    .larger {
        font-size: larger;
        font-weight: bolder;
    }
    
    .img1 {
        float: right;
        margin: 5px;
        width:250px;
        max-width: 50%;
    }
    
    table {
        width: 60%;
        border-collapse: collapse;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    th, td {
        border: 1px solid black;
        text-align: center;
        font-size: 20px;  
        padding: 8px;
    }
    
    .image.featured4 {		
        height:auto;
        max-width: 50%;
        width:300px;
        display:block;
        margin:auto;
        border:none;
        
    }

    .image.featured5 {		
        height:auto;
        max-width: 90%;
        width:100px;
        display:block;
        margin:auto;
        border:none;
        
    }

    img.ad {
      height:auto;
        max-width: 90%;
        width:600px;
        display:block;
        margin:auto;
        border:none;
    }

    hr {
        width: 10%;
    }

    .wrapped-image {
        float: left; /* Make the image float to the left of the text */
        margin: 10px; /* Add a 10px gap around the image */
        width:250px;
        max-width: 50%;
      }
    
    @media screen and (max-width: 750px) {
    
        .image.featured4 {
            width: 100%;
            margin: 0 auto 15px; /* Center the image and add bottom margin */
       
        }
        .clear {
        clear: both;
        }
        table {
        width: 80%;
        border-collapse: collapse;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    }

    .text-with-image {
        display: flexbox;
        align-items: flex-start; 
        gap: 10px; 
    }
    
    .text-with-image img {
        float: left; 
        min-width: 250px; 
        width: 30%;
        margin: 0 10px 10px 0; 
    }
    
    .text-with-image1 {
        display: flexbox;
        align-items: flex-start; 
        gap: 10px; 
    }
    
    .text-with-image1 img {
        float: right; 
        min-width: 250px; 
        width: 30%; 
        margin: 0 10px 10px 0; 
    }
    
    .text-container {
                clear: both; 
            }
    
    
    
    @media screen and (max-width: 500px) {
        .text-with-image {
            flex-direction: row;
            align-items: center;
        }
    
        .text-with-image img {
            margin-left: 10px;
            margin-right: 10px;
            width: 90%;
            align-items: center;
            display: block;
        }
        .text-with-image1 {
            flex-direction: row;
            align-items: center;
        }
    
        .text-with-image1 img {
            margin-left: 10px;
            margin-right: 10px;
            align-items: center;
            width: 90%;
            display: block;
            float: left;
        }
    }