/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;

}
@font-face {
  font-family: myFont; /* set name */
  src: url(Hanazome3.ttf); /* url of the font */

}
*{
  font-family: myFont;
  font-size:26px;
}
body {
  background-color: #FFDBE7 ;
  color: black;
  font-family: "Brush Script MT", cursive;
}
.bigbox {
  width: 1000px;
  height: auto;  /* Let it grow based on content */
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: black;
  padding: 20px;
  border-radius: 8px;
  text-align: center; /* Optional: center-align text */
  height: calc(100vh - 20px); /* 🔑 constrain height */
  overflow: hidden;          /* contain children */
  top:10px;
  background-color: #870713;
  background-image:repeating-linear-gradient(transparent, transparent 50px, #ab0e1d 50px, #ab0e1d 53px, transparent 53px, transparent 63px, #ab0e1d 63px, #bfa0d1 66px, transparent 66px, transparent 116px, rgba(200, 200, 200, .5) 116px, rgba(200, 200, 200, .5) 166px, rgba(255, 255, 255, .2) 166px, rgba(255, 255, 255, .2) 169px, rgba(200, 200, 200, .5) 169px, rgba(200, 200, 200, .5) 179px, rgba(255, 255, 255, .2) 179px, rgba(255, 255, 255, .2) 182px, rgba(200, 200, 200, .5) 182px, rgba(200, 200, 200, .5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, #ab0e1d 50px, #ab0e1d 53px, transparent 53px, transparent 63px, #bfa0d1 63px, #ab0e1d 66px, transparent 66px, transparent 116px, rgba(200, 200, 200, .5) 116px, rgba(200, 200, 200, .5) 166px, rgba(255, 255, 255, .2) 166px, rgba(255, 255, 255, .2) 169px, rgba(200, 200, 200, .5) 169px, rgba(200, 200, 200, .5) 179px, rgba(255, 255, 255, .2) 179px, rgba(255, 255, 255, .2) 182px, rgba(200, 200, 200, .5) 182px, rgba(200, 200, 200, .5) 232px, transparent 232px);
}
.container{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  margin:0;
  gap: 20px;
  align-items:stretch;
  
}
.leftbox {
  width: 20%;
  height: 100%;  /* Let it grow based on content */

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: black;
  padding: 20px;
  border-radius: 8px;
  text-align: center; /* Optional: center-align text */
 background-color   : #f4f4f4;

  background-position: 0 0, 23px 23px;
  background-size    : 46px 46px;
  border: dashed 2px white;
  padding: 0.2em 0.5em;

}
.rightbox {
  width: 65%;
  height: 100%;  /* Let it grow based on content */
  background-color: turquoise;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: #1a1a1a;
  padding: 20px;
  border-radius: 8px;
  text-align: left; /* Optional: center-align text */
  background: #f4f4f4;
  overflow-y: auto; 
  min-height: 0;
  
  border-left: 6px solid #870713;
 
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-family: 'Inter', sans-serif;

  border: dashed 2px white;
  padding: 0.2em 0.5em;

}
.chamybox {
  width: 1000px;
  height: 300px;  /* Let it grow based on content */
  background-color: #ff6300; /* Tomato Red */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  border-radius: 8px;
  text-align: center; /* Optional: center-align text */

}
.chamabox {
  width: 300px;
  height: auto;  /* Let it grow based on content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 8px;
  text-align: center; /* Optional: center-align text */
}
body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}