body{
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #6D343C;
}
header{
    background-color: #66202b;
    display: flex;
    flex-direction: row;
    padding: 1%;
    padding-left: 23%;
    padding-right: 20%;
    align-items: center;
    justify-content: space-between;
    font-size: 130%;
    text-shadow: 1px 1px 10px rgba(243, 58, 73, 0.692);
}
header h1{
    color: #E6C5C0;
}
.header-list{
    display: flex;
    list-style: none;
    align-items: center;    
    gap: 30px;
}
.header-list li{
    display: block;
    padding-left: 0;
    color: #E6C5C0;
    padding: 12px 22px; 
    border: 1px solid #E6C5C0; 
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1); 
}
.header-list li a{
    text-decoration: none;
    transition: font-size 0.4s;
}
.header-list li a:link {
    color: #E6C5C0;
  }
  .header-list li a:visited {
    color: #E6C5C0;
  }
  .header-list li a:hover {
    color: #e47662;
    font-size: 150%;
    
  }
  .header-list li a:active {
    color: #b65746;
  }
main{
    margin: 4% 25%;
    background-color: #dab6af;
    border: 10px solid #dab6af;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(243, 58, 73, 0.692), 0 6px 20px 0 rgba(233, 39, 39, 0.342);;
}
.container{
    display: grid;  
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    padding: 20px;
    font-size: 165%;
    color: #7c333d;
    line-height: 1.5;
    align-items: center; 
    justify-content: center; 
}
.image img{
    width: 90%;
    border-radius: 10%;
    box-shadow: 0 4px 8px 0 rgba(243, 58, 73, 0.5), 0 6px 20px 0 rgba(233, 39, 39, 0.19);
} 

/*  */

@media (max-width: 1024px) {
    main {
        margin: 4% 5%; /* Further reduce margins on smaller screens */
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column; /* Stack header elements vertically */
        padding-left: 5%;
        padding-right: 5%;
    }
    header h1{
        padding-left: 26px;
    }
    
    .header-list {
        justify-content: center; /* Center links on smaller screens */
        gap: 20px; /* Reduce gap for smaller screens */
        padding-right: 3%;
    }

    .container {
        grid-template-columns: 1fr; /* Stack image and text vertically */
        text-align: center; /* Center text in smaller viewports */
    }

    .image img {
        width: 100%; /* Full width for images on small screens */
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 150%; /* Increase header text size for small screens */
    }

    .header-list li {
        padding: 8px 15px; /* Reduce padding for smaller buttons */
    }

    main {
        margin: 2% 3%; /* Reduce margin further on very small screens */
    }
}