body {
  background: #8A6C49;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

    display: grid;

  place-items: center;

  color: #eae5df;

  
  /* The stroke is now much thicker */
  -webkit-text-stroke: 15px #8A6C49;
  text-stroke: 15px #8A6C49;

}

.container {
  font-family: "Roboto Slab", serif;
  font-size: 250pt;
  font-weight: 1000;
}

.shadow-layer, .top-layer {
  position: absolute;
  top: 0;
  left: 0;
}

.shadow-layer {
  color: black;
  /* font-size: 252pt; */
  -webkit-text-stroke: 5px black;
  /* This creates the offset */
  transform: translate(20px, 20px); 
}

.top-layer {
  color: #8A6C49;
  -webkit-text-stroke: 5px #8A6C49;
}

.blocky {
  margin-top: 1500px;
  font-size: 250pt;
  color: #8A6C49;
  font-weight: 1000;
  
  /* The stroke is now much thicker */
  -webkit-text-stroke: 15px #8A6C49;
  text-stroke: 15px #8A6C49;


  /* 3D EXTRUSION FITTED TO THE STROKE:
     The shadow now starts at 15px to clear the new, thicker stroke
     and continues to 35px to maintain a similar depth.
  */
  text-shadow:
    /* --- Start of shadow layers --- */
    4px 9px 0 #000, 5px 9px 0 #000, 6px 9px 0 #000,
    4px 10px 0 #000, 5px 10px 0 #000, 6px 10px 0 #000, 7px 10px 0 #000,
    5px 11px 0 #000, 6px 11px 0 #000, 7px 11px 0 #000,
    5px 12px 0 #000, 6px 12px 0 #000, 7px 12px 0 #000, 8px 12px 0 #000,
    6px 13px 0 #000, 7px 13px 0 #000, 8px 13px 0 #000,
    7px 14px 0 #000, 8px 14px 0 #000, 9px 14px 0 #000,
    7px 15px 0 #000, 8px 15px 0 #000, 9px 15px 0 #000,
    8px 16px 0 #000, 9px 16px 0 #000, 10px 16px 0 #000,
    9px 17px 0 #000, 10px 17px 0 #000, 11px 17px 0 #000,
    9px 18px 0 #000, 10px 18px 0 #000, 11px 18px 0 #000,
    10px 19px 0 #000, 11px 19px 0 #000, 12px 19px 0 #000,
    11px 20px 0 #000, 12px 20px 0 #000, 13px 20px 0 #000,
    11px 21px 0 #000, 12px 21px 0 #000, 13px 21px 0 #000,
    12px 22px 0 #000, 13px 22px 0 #000, 14px 22px 0 #000,
    13px 23px 0 #000, 14px 23px 0 #000, 15px 23px 0 #000,
    13px 24px 0 #000, 14px 24px 0 #000, 15px 24px 0 #000,
    14px 25px 0 #000, 15px 25px 0 #000, 16px 25px 0 #000,
    15px 26px 0 #000, 16px 26px 0 #000, 17px 26px 0 #000,
    15px 27px 0 #000, 16px 27px 0 #000, 17px 27px 0 #000,
    16px 28px 0 #000, 17px 28px 0 #000, 18px 28px 0 #000,
    17px 29px 0 #000, 18px 29px 0 #000, 19px 29px 0 #000,
    17px 30px 0 #000, 18px 30px 0 #000, 19px 30px 0 #000,
    18px 31px 0 #000, 19px 31px 0 #000, 20px 31px 0 #000,
    19px 32px 0 #000, 20px 32px 0 #000, 21px 32px 0 #000,
    19px 33px 0 #000, 20px 33px 0 #000, 21px 33px 0 #000,
    20px 34px 0 #000, 21px 34px 0 #000, 22px 34px 0 #000,
    21px 35px 0 #000, 22px 35px 0 #000, 23px 35px 0 #000,
    21px 36px 0 #000, 22px 36px 0 #000, 23px 36px 0 #000,
    22px 37px 0 #000, 23px 37px 0 #000, 24px 37px 0 #000,
    23px 38px 0 #000, 24px 38px 0 #000, 25px 38px 0 #000,
    23px 39px 0 #000, 24px 39px 0 #000, 25px 39px 0 #000,
    24px 40px 0 #000, 25px 40px 0 #000, 26px 40px 0 #000,
    25px 41px 0 #000, 26px 41px 0 #000, 27px 41px 0 #000,
    25px 42px 0 #000, 26px 42px 0 #000, 27px 42px 0 #000,
    26px 43px 0 #000, 27px 43px 0 #000, 28px 43px 0 #000,
    27px 44px 0 #000, 28px 44px 0 #000, 29px 44px 0 #000,
    27px 45px 0 #000, 28px 45px 0 #000, 29px 45px 0 #000,
    
    /* --- EXTENDED LAYERS START HERE --- */
    28px 46px 0 #000, 29px 46px 0 #000, 30px 46px 0 #000,
    29px 47px 0 #000, 30px 47px 0 #000, 31px 47px 0 #000,
    30px 48px 0 #000, 31px 48px 0 #000, 32px 48px 0 #000,
    30px 49px 0 #000, 31px 49px 0 #000, 32px 49px 0 #000,
    31px 50px 0 #000, 32px 50px 0 #000, 33px 50px 0 #000,
    32px 51px 0 #000, 33px 51px 0 #000, 34px 51px 0 #000,
    32px 52px 0 #000, 33px 52px 0 #000, 34px 52px 0 #000,
    33px 53px 0 #000, 34px 53px 0 #000, 35px 53px 0 #000,
    34px 54px 0 #000, 35px 54px 0 #000, 36px 54px 0 #000,
    34px 55px 0 #000, 35px 55px 0 #000, 36px 55px 0 #000,

    /* The final blurred layer is adjusted to the new, bigger end position */
    37px 56px 15px rgba(0,0,0,0.5);
}