:root {
  --french-rose: #e64e8dff;
  --misty-rose: #f3e0daff;
  --salmon-pink: #e99497ff;
  --dark-cyan: #2a8691ff;
  --azure: #1784fbff;
}

body {
  overflow: hidden;
}

.content-container {
  width: 100%;
  position: absolute;
  height: 100%;
  z-index: 10;
  display: flex;
}

.side-container {
  display: flex;
  flex-direction: column;
  width: 25%;
}

.dot-container {
  background: url("../assets/images/larger-dots.webp") repeat;
  opacity: 50%;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  z-index: 12;
}

.dot-container-top {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  top: 0;
  left: 0;
}

.top-container {
  height: 25%;
  top: 0;
  position: relative;
  background-color: var(--azure);
}

.bottom-container {
  height: 75%;
  width: 100%;
  background-color: var(--salmon-pink);
  display: flex;
  align-items: center;
  padding: 25px 50px;
  z-index: 15;
}

.diamond-container {
  background: url("../assets/images/diary/diamond.webp") space;
  width: 100%;
  position: absolute;
  bottom: 10px;
  z-index: 12;
  box-sizing: border-box;
  background-size: 15px 20px;
  height: 20px;
  filter: invert(100%);
}

.striped-background {
  background-image: repeating-linear-gradient(
    to bottom,
    /* Angle of the stripes */ #f0f0f0 0,
    /* First color, starting at 0px */ rgb(240, 240, 240) 5px,
    /* First color, ending at 10px (width of the first stripe) */
      var(--misty-rose) 5px,
    /* Second color, starting at 10px */ var(--misty-rose) 10px
      /* Second color, ending at 20px (width of the second stripe) */
  );
  width: 75%;
  height: 100%;
  position: relative;
  z-index: 15;
}

.spacer {
  background-color: var(--azure);
  height: 2.5%;
  width: 100%;
}

.spacer:first-child {
  border-radius: 10px 10px 0 0;
}

.spacer:last-child {
  border-radius: 0 0 10px 10px;
}

.side-text-content {
  height: 95%;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.side-text-title {
  font-family: "Tactic Sans Bold", Impact, Haettenschweiler, "Arial Narrow Bold",
    sans-serif;
  padding: 0 15px;
  font-size: 24px;
  display: flex;
  flex-direction: column;
}

.hover-underline {
  position: relative; /* Crucial for positioning the pseudo-element */
  display: inline-block;
  text-decoration: none; /* Remove default underline */
  padding-bottom: 5px; /* Add some space for the underline */
}

.hover-underline::after {
  content: "";
  position: absolute;
  bottom: 0; /* Position at the bottom */
  left: 0;
  width: 0; /* Start with zero width */
  height: 2px; /* Thickness of the line */
  background: linear-gradient(to right, #1784fbff, rgb(91, 170, 255));
  transition: width 0.3s ease-out; /* Animate width change */
}

.side-text-main {
  flex-direction: column;
  padding: 0 15px;
  display: flex;
  flex-grow: 1;
  overflow: auto;
  gap: 15px;
  font-family: Helvetica, Arial, sans-serif;
}

.side-text-main div {
  cursor: pointer;
}

.hover-underline:hover::after {
  width: 100%; /* Expand to full width on hover */
}

.side-text {
  width: calc(100% - 100px);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 10px solid black;
  background-color: white;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  box-sizing: border-box;
}

.title {
  font-family: "Tactic Sans Bold", Impact, Haettenschweiler, "Arial Narrow Bold",
    sans-serif;
  color: orange;
  text-shadow: 0px 10px 0.02px #000, 9.8px 2.1px 0.02px #000,
    4.2px -9.1px 0.02px #000, -8px -6px 0.02px #000, -7.6px 6.5px 0.02px #000,
    4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10px 0.02px #000,
    -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000,
    7.1px -7px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000,
    1.4px 9.9px 0.02px #000, 10px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000,
    -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8px 0.02px #000,
    9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000,
    -10px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000,
    6.1px -8px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000,
    2.7px 9.6px 0.02px #000, 10px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000,
    -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7px 7.2px 0.02px #000,
    8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000,
    -9.9px 1.3px 0.02px #000, -0.8px 10px 0.02px #000, 9.6px 2.9px 0.02px #000,
    4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000,
    -8.1px 5.9px 0.02px #000, 4px 9.2px 0.02px #000, 9.8px -2px 0.02px #000,
    0.2px -10px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9px 0.02px #000,
    7.9px 6.1px 0.02px #000;
}

.title > svg {
  width: 50px;
  height: 50px;
}

.title > svg > path {
  filter: drop-shadow(0 2px 0.5px #000) drop-shadow(0 -2px 0.5px #000)
    drop-shadow(2px 0 0.5px #000) drop-shadow(-2px 0 0.5px #000)
    drop-shadow(1px 1px 0.5px #000) drop-shadow(-1px -1px 0.5px #000);
}

.diary-container {
  width: 90%;
  height: 90%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(
      rgba(212, 212, 212, 0.5),
      rgba(212, 212, 212, 0.5)
    ),
    url("../assets/images/diary/graph.png");
  background-size: cover;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1), inset 0 0 10px rgba(0, 0, 0, 1);
  border: 20px solid var(--french-rose);
  border-bottom: 0;
}