.title {
    color: #f5e0c3;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);

  font-family: "Fleur De Leah", cursive;
  font-weight: 400;
  font-style: normal;
    font-size: 150px;

    }

body{
    background-image: url(https://i.pinimg.com/736x/7c/5b/b3/7c5bb34a0eb3f2837c804b2db5c49717.jpg);
    background-size:auto;
    
    
    
    
    
}

.text-box {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -10%);
    font-size: 30px;
    border: dotted#4f2c0f;
    padding: px; /*15px on top, right, bottom, left*/
    width: 470px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #74472f;
    
}
.text-box p {
    color: #f5e0c3;
  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;
    margin: 0;
    padding: 0;
  font-size: 30px;
}
.text-box3{
    position: absolute;
    top: 55%;
    left: 70%;
    transform: translate(-50%, -10%);
    font-size: 200%;
    text-align: center;
    padding: 30px;
    width: 20%;
  height: 20%;
    border: 2px solid;
    border-radius: 10px;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0,0,0.3);
      display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5 rem;
  padding: 2rem;
    

  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;
  /*Phones*/
  @media (max-width:480px){
    body{
      font-size: 14px;
      padding: 5px;
    } 
     }

  
    border-color: #4f2c0f;
    background-color: #74472f;
    color: #f5e0c3;   
}
.text-box4 {
  position: absolute;
    top: 55%;
    right: 50%;
    transform: translate(-50%, -10%);
    font-size: 200%;
    text-align: center;
    padding: 30px;
    width: 20%;
    height: 20%;
    border: 2px solid;
    border-radius: 10px;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0,0,0.3)  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5 rem;
  padding: 2rem;
    

  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;
  
  
    border-color: #4f2c0f;
    background-color: #74472f;
    color: #f5e0c3;   
  
    /*Phones*/
  @media (max-width:480px){
    body{
      font-size: 14px;
      padding: 5px;
    } 
     }
}
.text-box5 {
   position: absolute;
    top: 105%;
    left: 70%;
    transform: translate(-50%, -10%);
    font-size: 200%;
    text-align: center;
    padding: 30px;
    width: 20%;
  height: 20%;
    border: 2px solid;
    border-radius: 10px;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0,0,0.3);
      display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5 rem;
  padding: 2rem;
    
  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;

  
    border-color: #4f2c0f;
    background-color: #74472f;
    color: #f5e0c3;    
  
    /*Phones*/
  @media (max-width:480px){
    body{
      font-size: 14px;
      padding: 5px;
    } 
     }
}
.text-box6 {
   position: absolute;
    top: 105%;
    right: 50%;
    transform: translate(-50%, -10%);
    font-size: 200%;
    text-align: center;
    padding: 30px;
    width: 20%;
  height: 20%;
    border: px solid;
    border-radius: 10px;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0,0,0.3);
      display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5 rem;
  padding: 2rem;
    
  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;
  
    border-color: #4f2c0f;
    background-color: #74472f;
    color: #f5e0c3;     
  
    /*Phones*/
  @media (max-width:480px){
    body{
      font-size: 14px;
      padding: 5px;
    } 
     }
}

.container {
position: absolute;
  top: 60%;
  left: 6%;
  height: auto;
   width: 50% !important;
  
  
}
.container2 {
  position: absolute;
  top: 39%;
  width: 80% !important;
  height: auto;
  left: 73%
}
.container3 {
  top: 94%;
}
.container4 {
  position: absolute;
  top: 12%;
  width: 60% !important;
  height: auto;
  left: 80%;
  z-index: 999;
}
.container5 {
    position: absolute;
  top: 61%;
  width: 37% !important;
  height: auto;
  left: 88%;
}
.container6{
  position: absolute;
  top: 100%;
  width: 82% !important;
  height: auto;
  left: 81%;
}
.container7 {
    position: absolute;
  top: 94%;
  width: 42% !important;
  height: auto;
  left: 78%;
}
.container8 {
    position: absolute;
  top: 88%;
  width: 78% !important;
  height: auto;
  left: 0%;
}
.container9 {
    position: absolute;
  top: 41%;
  width: 55% !important;
  height: auto;
  left: 7%;
}
.container10 {
    position: absolute;
  top: 0%;
  width: 118% !important;
  height: auto;
  left: 78%;
}
 .container11 {
    position: absolute;
  top: 47%;
  width: 59% !important;
  height: auto;
  left: 33%;
} 
.container12 {
    position: absolute;
  top: 45%;
  width: 149% !important;
  height: auto;
  left: 0%;
  z-index: -1;
} 
 .container13 {
    position: absolute;
  top: 90%;
  width: 115% !important;
  height: auto;
  left: 24%;
}
   
 .container14 {
    position: absolute;
  top: 134%;
  width: 69% !important;
  height: auto;
  left: 0%;
}   
   
  .container15 {
    position: absolute;
  top: 134%;
  width: 69% !important;
  height: auto;
  left: 55%
}
  .container16 {
    position: absolute;
  top: 134%;
  width: 69% !important;
  height: auto;
  left: 12%;
}   
  .container17 {
    position: absolute;
  top: 134%;
  width: 69% !important;
  height: auto;
  left: 25%;
}   
 .container18 {
    position: absolute;
  top: 134%;
  width: 69% !important;
  height: auto;
  left: 38%;
}   
 .container19 {
    position: absolute;
  top: 134%;
  width: 69% !important;
  height: auto;
  left: 51%;
}   
 .container20 {
    position: absolute;
  top: 134%;
  width: 69% !important;
  height: auto;
  left: 68%;
}   
  .container21 {
    position: absolute;
  top: 134%;
  width: 67% !important;
  height: auto;
  left: 81%;
}   
 .container22 {
    position: absolute;
  top: 134%;
  width: 62% !important;
  height: auto;
  left: 87%;
}   
  .container23 {
    position: absolute;
  top: 91%;
  width: 88% !important;
  height: auto;
  left: 40%;
}
  .container24 {
    position: absolute;
  top: 55%;
  width: 60% !important;
  height: auto;
  left: 42%;
}   
   .container25 {
    position: absolute;
  top: 70%;
  width: 103% !important;
  height: auto;
  left: 30%;
filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
z-index: -1;
}