/*
Responsive layout without bootstrap!!
1. Begin each new section with a section tag and class="Marge" 
2. Except the first section.  Omit the class in the first section.
3. For figure tags, use class="square".
4. For img tags, use class="responsive"
*/
/* 
    Created on : Sep 30, 2022, 9:11:38 AM
    Author     : Narlin
*/
        
    body {
      margin: 40px;      
      padding: 10px;
    
    }
    
    .example {
    border: 2px #000062 solid;
    padding: 4px;
    margin: 4px;
    overflow: hidden;
    color: #0B5420;
    background-color: #F5F8B2;
}

   .wideexample {
    width: 100%;
    border: 2px #000062 solid;
    padding: 4px;
    margin: 4px;
    <!-- overflow: hidden; -->
    color: #0B5420;
    background-color: #F5F8B2;
}

 .responsive {
            width: 100%;
            height: auto;
}
    
  .square {
            max-width: 40%;
           /* height: 347px; */
            /* border-radius: 50%; */
            text-align: left;
            font-size: 12px;
            float: left;     /* &lt;== Causes the text wrap */
            font-weight: bold;
            border: green solid 1px;
            padding: 20px;
            margin-right: 20px; /*&lt;== Keeps the text away from the border. */
      }
      
@media only screen and (max-width: 600px) {
   .square {
            max-width: 100%;
           /* height: 347px; */
            /* border-radius: 50%; */
            text-align: left;
            font-size: 12px;
            float: right;     /* &lt;== Causes the text wrap */
            font-weight: bold;
            border: green solid 1px;
            padding: 20px;
            margin-right: 20px; /*&lt;== Keeps the text away from the border. */
      }
}
      
    figcaption {
            background-color: #000062;
            color: white;
            padding: 2px;
            text-align: left;
}

   h2,h3,h4 {
      color: red;
     text-align: center;

    }
    
section {
  clear: left;               /* Start with a clean slate!! Each section will go under the prior one. */  
}
 
.Marge {
     margin-top: 10em; /* Keep away from the section above */   
}

    p {
      text-align: justify;
      font-size: 20px;
      color: blue;
    }
    
    .flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #0B5420;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: normal;
  font-size: 12px;
}