/* CSS for Topics Page */

body{
    margin:0;
    font-family: Futura, Arial, Helvetica, sans-serif; 
        background-color:#f2eae6 ;
}
  a{
text-decoration: none;
}
  
.banner{
padding-bottom: 1%;
padding-left: 3%;
display: flex;
background-color: #c9b1af;
justify-content: space-around;
gap: 8px;
}

h2{
font-size: 24px;
color: #f9faf9;
}
.banner a:hover{
    background-color:#b19897 ;
}

.icons button{
    width: 150px;
    height: 150px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.icons button:hover{
    transform: translateY(-5px);
}

.icons button:hover h4{
    opacity: 0;
}
  
.links{
align-content: center;
font-size: 18px;
color: #E5E7EB;
}

a.top{
padding-right: 23px;
}

.icons{
    margin: 0 auto;
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
    
    img.food-space{
    margin:5px;
    }
    img.food-space:hover{
    transform:translateY(4px);
    
    }
    .custom{
    grid-column: 2;
    grid-row: 2;
    }
    .mom{
    grid-column: 3;
    grid-row: 1;
    }
    .dad{
    grid-column: 3;
    grid-row: 2;
    }
    
    .hungry{
    grid-column: 1;
    grid-row: 2;
    }
    
        .section-2{
    margin-top: 5%;
    margin-bottom: 5%;
    
    }
    
    h4#two{
   
    text-shadow: grey 2px 2px;
    position: absolute;
    text-align: center;
    width: 100px;
    color: white;
    }

    /*Styling the buttons*/

    button {
        align-items: center;;
        margin-bottom: 20px;
        margin-top: 100px;
    }