/*
 * Custom CSS
 */

:root {
  --bs-body-bg: var(--bs-gray-100);
}
body {
  font-family: "Lato"; font-weight: "400";
}

a { text-decoration: underline; color: darkorange; }

h1 { font-size: 70px; font-weight: 700; line-height: 90%; font-family: "Lato"; font-weight: "900"; margin-top: 20px; }
h2 { font-size: 40px; }
.icon { border-radius: 30px; }
.girl { width: 200px; height: 200px; border-radius: 100px; border-width: 5px; border-color: black; border-style:solid; }


.characterName {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.85);
  color: white;
  font-family: "Permanent Marker", sans-serif;
  font-size: 30px;
  margin-top: 10px;
}

.chatSampleImg {
  border-radius: 10px;
  width: 100%;
}

.chatSampleText {
  font-family: "Permanent Marker", sans-serif;
  color: black;
  font-size: 25px;
}

.carousel-item { height: 300px; }
.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit:contain;  /* This will make sure your images cover the area without distortion */
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  background-color: black; /* This will change the whole square containing the arrow */
  border-radius: 3px;
}