p {
      font-family: "Bradley Hand ITC", cursive, monospace;
      font-size: 26px;
      text-align:center;
      color: white;
      line-height: 1.3;
    }
    
h1 {
      
      font-family: "Monaco", black, monospace;
      font-size: 70px;
      text-align:center;
      color: #C9ECF2;
      line-height: 1.5;
      background-image: url('https://lgymh.neocities.org/Fam.jpg');
       box-shadow: 0 4px 10px rgba(0,0,0,1);
      background-size: cover;
      background-position: center;
      padding: 40px;
      border-radius: 30px;
      background-blend-mode: multiply;
      background-color: rgba(0,0,0,0.4);
    }
    
    h3 {
      
      font-family: "Monaco", black, monospace;
      font-size: 90px;
      text-align:center;
      color: #BA4FE8;
      line-height: 1.5;
      background: linear-gradient(90deg, #F89CFF, #FC6F93);
      box-shadow: 0 4px 10px rgba(0,0,0,0.8);
      background-size: contain;
      background-position: center;
      border-radius: 32px;
      padding: 10px;
      width: 100%;
      display: inline-block;
      justify-content: center;
      height: 100px;
    }
    
    h4 {
      
      font-family: "Monaco", black, monospace;
      font-size: 50px;
      text-align:center;
      color: #7BB9ED;
      line-height: 1.5;
      background: linear-gradient(90deg, #D4F6FF, #BFB8FF);
      box-shadow: 0 4px 10px rgba(0,0,0,0.8);
      background-size: contain;
      background-position: center;
      border-radius: 16px;
      padding: 20px;
      width: 50%;
      display: inline-block;
      justify-content: center;
      height: 50px;
    }
    
    h5 {
      
      font-family: "Monaco", black, monospace;
      font-size: 50px;
      text-align:center;
      color: white;
      line-height: 1.5;
      background-color: black;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.8);
      background-size: contain;
      background-position: center;
      width: 100%;
      display: inline-block;
      justify-content: center;
      height: 400px;
    }
    
ul {
      font-family: "Bradley Hand ITC", cursive,  monospace;
      font-size: 30px;
      text-align:left;
      color: white;
      line-height: 1.3;
    }

body {
  display: flex;
  flex-direction: column;
  Align-items: center;
  justify-content: center;
  text-emphasis: center;
  background-color: #471212;
  
  
}

.container{
  width: 100%;
  display: flex;
 justify-content: center;
 height: 300px;
 gap: 16px;
  transition: .5s;
}
.container li{
  position: relative;
  overflow:hidden;
  flex: 0 0 360px;
  border-radius: 360px;
  cursor: pointer;
  border: 1px solid #ddd;
} 


.container li img{
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container li,
.container li img
{
    transition: 0.5s;
}

.container li .content{
  transition:1.5 ease;
}

.container span{
  text-align: center;
  width: 75%;
}

.container h2{
  font-weight: 100;
  font-size: 25px;
  line-height: 15px;
  margin-bottom: 2px;
  white-space: nowrap;
  color: white;
}

.container p{
  color: grey;
  font-size: 20px;
  width: 200%;
}

.container li .content{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color:red;
  padding: 10px;
  background:
  linear-gradient(
    0deg, rgb(0 0 0 / 70%) 10%,
    rgb(255 255 255 / 0%) 100%
  );
  opacity: 0;
  visibility: hidden;
}

.container:hover{
  gap: 0
}

.container li .content span{
  position: absolute;
  z-index: 3;
  left: -8%;
  bottom: 0px;
  scale: 0.09;
  visibility: hidden;
  opacity: 0;
}

.container li:hover{
  flex: 0 1 360px;
  scale: 1.86;
  z-index: 10;
  opacity: 1;
}

.container li:hover .content{
  opacity: 1;
  visibility: visible;
}

.container li:hover span{
  scale: 0.5;
  opacity: 1;
  visibility: visible;
}