/* 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." */

@font-face { 
  font-family: 'patrickhand-regular';
  src: url(https://odd-plant-therapy-wiki.neocities.org/PatrickHand/patrickhand-regular-webfont.woff) format("truetype");
}

@font-face { 
  font-family: 'josefinsans';
  src: url(https://odd-plant-therapy-wiki.neocities.org/JosefinSans/josefinsans-variablefont_wght-webfont.woff2) format("woff2"),
       url(https://odd-plant-therapy-wiki.neocities.org/JosefinSans/josefinsans-variablefont_wght-webfont.woff) format("woff");
}

body {
  background-color: white;
  color: seagreen;
  font-family: "patrickhand-regular", Verdana;
}

.divider {
  border: none;
  border-top: 2px solid #4a8b46;
  width: 600px;
  margin: 15px auto;
}

/* STYLING FOR SECONDARY TEXT BELOW */

.secondary-text {
  padding: 5px;
  margin: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: "josefinsans", Verdana;
  font-size: 20px;
  color: #858B46;
  font-weight: 700;
  line-height: 1.2;
  -webkit-text-stroke-width: 0.4px;
  -webkit-text-stroke-color: #858B46;
}

.secondary-text-BOLD {
  padding: 5px;
  margin: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: "josefinsans", Verdana;
  font-size: 20px;
  color: #858B46;
  font-weight: 700;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #858B46;
}


/* STYLING FOR BUTTONS BELOW */

.button-text {
  padding: 5px;
  margin: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: "patrickhand-regular", Verdana;
  font-size: 27px;
  color: #4a8b46;
}


button:hover {
  background-color: #C5EDC6;
}

/* STYLING FOR DIALOGUE BELOW */

.dialogue-container {
  /* 1. Use the image as a background */
  background-image: url("dialogue box crop.png");
  background-size: contain; /* Ensures the image fits the div */
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;

  /* 2. Set dimensions to match your image */
  width: 700px;
  height: 120px;
  padding: 10px 20px;
  
  /* 3. Flexbox makes centering effortless */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center */
  margin-bottom: 20px;
  
  /* Optional: debug background to see the container limits */
  background-color: transparent; 
}

.dialogue-text {
  margin: 0;
  padding: 0 100px; /* Keeps text from touching the very edges */
  text-align: center;
  color: black;
  
  font-size: 1.1rem;   /* Using rem or em makes it easier to scale */
  line-height: 1.2;    /* Tightens the space between lines */
  max-height: 100%;    /* Keeps text from leaving the box */
  
  font-family: "patrickhand-regular"; /* Or your preferred font */
}

/* H3 = BIGGER DIALOGUE (LESS TEXT) !! H5 = SMALLER DIALOGUE (MORE TEXT) */

h3.dialogue-text { font-size: 45px; overflow: auto; padding: 20px 50px;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 0.2px;
  -webkit-text-stroke-color: black;}
h5.dialogue-text { font-size: 27px; 
  -webkit-text-stroke-width: 0.2px; overflow: auto; padding: 10px 80px;
  -webkit-text-fill-color: aliceblue;
  -webkit-text-stroke-color: black;}