body {
  background-image: linear-gradient(to bottom, #101c31 , #c54400);
 background-attachment: fixed;
  color: DarkRed;
  height:100%;
  font-family: "Normal";
  
  
}


h1 {
  margin:auto;
  font-family: "Rawr";
  
}

p {
  
  line-break: loose;
  font-size: 20px;
  
}

/*formatting overall, big box */

.penlarge {
  font-size:25px;
}
.breaker {
  height:10px;
  color: DarkRed;
  line-break: loose;
  font-size: 50px;
}
.boxy {
      width: 50%;
      height: 200px;
      display: inline-flex;
      }

.floatLeft {
      float:left;
     text-align:center;
}

.hug {
      display:inline;
      padding: 20px;
}
.container {
width:100%;
 margin:auto;
  text-align:center;
}
.container2 {
  width:900px;
  margin:auto;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  text-align: center;
}

.item {
flex: 1 1 200px; /* Flexible width with a minimum of 200px */
background-color: lightblue;
padding: 20px;
text-align: center;

}
/* DISPLAY FLEX IS WHAT ALLOWS ROWS, YOU CAN ALSO USE 
    flex-direction: column/row which makes wrappers align in rows inside thsis container from first-to-last corresponding from left to right
    or flex-basis,which can allow you to make a grid,
    
    learn more about this later cause i want to make a flex grid with many different boxes for website layout
*/

.wrapper1 {
  
    width: 500px;
  margin:auto;
 
  text-align:center;
  background-image: linear-gradient(to bottom, #ff617b, #c54400);
}

.wrapper1D {
  
    width: 600px;
  margin:auto;
 
  text-align:center;
 background-color: #c54400;
}

.wrapperRight {
  float:right;
  right:0;
  width:250px;
 margin-right:auto;
 background-image: linear-gradient(to bottom, #ff617b, #c54400);
}

.wrapperLeft {
  float:left;
  left:0;
  width:250px;
 margin-left:auto;
 background-image: linear-gradient(to bottom, #ff617b, #c54400);
}
.wrapperLeftD {
  float:left;
  left:0;
  width:250px;
 margin-left:auto;
background-color: #c54400;
}
.wrapperRightD {
  float:right;
  right:0;
  width:250px;
 margin-right:auto;
 background-color: #c54400;
}

  .middler {
   width:500px;
  margin: auto; 
     font-family: "Rawr";
  }
  

/* formatting inside the abovementioned box */

.babywrapperpre {
     color: DarkRed;
    text-align:left;
    margin:auto;


  
  
}

.babywrapper1 {
  
    width: 200px;
    text-align:center;
    margin:auto;
  padding: 10px;

  
  
}
.babywrapper2 {
  
    width: 180px;
    margin-left:20% ;
    margin-right:20%; 
    max-width: 90%;
  padding: 10px;
  background-color: red;
  
  
}


.Textwrapping {
  width:400px;
  margin: auto;

}
  
  

  .colum1 {
  column-count: 6;
  column-gap: 10px;
  /* background-color: #c54400; */
  
}
  
/* fonts */
  
.roarfont2 { 
  font-family:"Rawr";
}

.roarfont { 
  font-family:"Normal";
}