@charset "UTF-8";

:root {
  --text-color: rgb(215, 230, 248); /* Set your desired text color */
  --text-color2: rgb(147, 155, 172);
  --side-padding: 20px;
}

@font-face {
  font-family: "Koz";
  src: url("../fonts/cmunti.ttf") format("truetype"); /* Modern Browsers */
  /* Add more formats if needed */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Koz-Bold";
  src: url("../fonts/cmunbi.ttf") format("truetype"); /* Modern Browsers */
  /* Add more formats if needed */
  font-weight: normal;
  font-style: normal;
}

.beliefs-frame {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 80vh;
  font-family: "Koz", serif;
  background-color: var(--text-color2);
  overflow: hidden;
}

.border {
  /* border: 2px solid var(--text-color); */
  margin: 10px;
  height: 65vh;
  overflow: hidden;
  /* height: 65vh; */
}

.line {
  position: relative;
  width: 97%;
  height: 0;
  transform: translate(-50%, -50%);
  left: 50%;
  border-top: 2px solid var(--text-color);
}

.img-container {
  z-index: -5;
  position: absolute;
  display: none;
  transform: translate(-50%, 50%);
  top: 0;
  left: 0;
  text-align: center;
  width: 30vw; /* Adjust to your desired width */
  height: fit-content; /* Adjust to your desired height */
  background-color: rgba(147, 155, 172, 1);
  /* backdrop-filter: blur(10px); */

  /* border: 2px solid var(--text-color); */
  /* box-shadow: 0 0 10px rgba(215, 230, 248, 0.7); */
}
.my-img {
  position: relative;
  width: 14vw;
  transform: translateX(-50%);
  /* top: 50%; */
  left: 50%;
  /* flex: 1; */
  /* margin: 10px; */
  padding: 10px 0px 10px 0px;
}

/* #container {
  display: none;
} */

.img-background {
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 2px solid var(--text-color);

  box-shadow: 0 0 20px rgba(215, 230, 248, 0.7);
}

.overlay-text {
  position: relative;
  width: 90%;
  text-align: center;
  transform: translateX(-50%);
  left: 50%;

  /* flex: 3; */
  padding: 0px 10px 10px 10px;
}

h6 {
  font-size: 1.7em;
  font-family: "Koz-Bold", serif; /* Fallback to a generic sans-serif font */
  color: var(--text-color);
  line-height: normal;
  width: fit-content;
  display: inline-block;
}
/* .highlight-header {
  display: inline;
  background: var(--text-color);
  box-shadow: 0.5em 0 0 var(--text-color), -0.5em 0 0 var(--text-color);
} */

.p3 {
  font-size: 1.3em;
  /* line-height: normal; */
  color: var(--text-color);
}

/* .highlight {
  display: inline;
  background: var(--text-color);
  box-shadow: 0.5em 0 0 var(--text-color), -0.5em 0 0 var(--text-color);
} */

#beliefs {
  cursor: pointer;
}

.img-container.active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}