body{
    background-color: rgb(230, 184, 0);
}

h1{
font-size: 48px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left: 50px;
}

h3{
    font-size: 32px;
    margin-left: 10px;
}

.container {
    display: flex;
    justify-content: space-around;
}

img{
    width: auto;
}

figcaption{
    width: 256px;
}
.section-two{
    background-color: rgb(218, 209, 162);
    border: 5px dotted #3b013b;
    border-radius: 10px ;
    width: 35%;
    height: 430px;   
}
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    color: #000;
    width: auto;
    margin: auto;
    margin-top: 50px;
}
 
th,  td { 
    border: 1px solid black;
    padding: 3px;
    text-align: left;
}
 
th {
    text-align: center;
    background-color: #e0a72b;
}
 
td {
    background-color: #e0a72b;
    font-size: small;
}
@media (max-width: 1100px) {
   h1{
    font-size: 38px;
    }
   
   th {
    text-align: center;
    background-color: #e0a72b;
    font-size: 10px;
}
 
td {
    background-color: #e0a72b;
    font-size: 9px;
}

}
@media (max-width: 900px) {
    h1{
     font-size: 32px;
     }
    
    th {
     text-align: center;
     background-color: #e0a72b;
     font-size: 10px;
 }
  
 td {
     background-color: #e0a72b;
     font-size: 9px;
 }
h3{
    font-size: 24;
}
 }
 @media (max-width: 744px) {
    h1{
     font-size: 24px;
     }
    
    th {
     text-align: center;
     background-color: #e0a72b;
     font-size: 10px;
 }
  
 td {
     background-color: #e0a72b;
     font-size: 8px;
 }
 .section-two{
    font-size: 10px;
    height: 330px;
 }
 h3{
    font-size: 20px;
 }
 img{
    width: 200px;
    height: 300px;
 }
 figcaption{
    font-size: 10px;
 }
 }
 @media (max-width: 684px) {
    h1{
     font-size: 20px;
     }
    
    th {
     text-align: center;
     background-color: #e0a72b;
     font-size: 9px;
 }
  
 td {
     background-color: #e0a72b;
     font-size: 7px;
 }
 .section-two{
    font-size: 9px;
 }
 h3{
    font-size: 15px;
 }
 figcaption{
    font-size: 8px;
 }
 }
 @media (max-width: 600px) {
    h1{
     font-size: 16px;
     }
    
    th {
     text-align: center;
     background-color: #e0a72b;
     font-size: 7px;
 }
  
 td {
     background-color: #e0a72b;
     font-size: 5px;
 }
 .section-two{
    font-size: 7 px;
 }
 h3{
    font-size: 10px;
 }
 img{
    width: 100px;
    height: 150px;
 }
 figcaption{
    font-size: 6px;
 }
 }