h4 {
  padding: 20px;
  font-size: 1.1rem;
}
.cv-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  padding: 20px;
  /* border-top: solid 2px #2e88a3; */
}
.cv-grid h3 {
  border-bottom: solid 2px #2e88a3;
}
.left-column {
  /* background-color: hsl(44, 27%, 84%); */
  background-color: #f7f7f7;
  /* padding: 20px; */
  border-radius: 10px;
  margin-right: 30px;
}

.right-column {
  padding: 20px;
  padding-left: 0px; /* adds space between content and line */
  border-left: 2px solid #2e88a3; /* 👈 this is the dividing line */
}
.right-column p {
  color: hsl(217, 12%, 43%);
  padding-left: 40px;
}

.right-column h3 {
  position: relative;
  padding-left: 30px; /* отступ от линии */
  margin: 30px 0;
  color: #2e88a3;
}

.right-column h3::before {
  content: "";
  position: absolute;
  left: -6px; /* Расположение точки левее текста */
  top: 50%; /* По центру высоты заголовка */
  transform: translateY(-50%); /* Корректно выравнивает по вертикали */
  width: 10px;
  height: 10px;
  background-color: #2e88a3; /* Цвет точки */
  border-radius: 50%; /* Делаем круглую точку */
}
.kuva {
  text-align: center;
  margin-bottom: 20px;
}

.kuva img {
  width: 100%;
  max-width: 200px;
  border-radius: 50px;
  object-fit: cover;
  margin-top: 20px;
}

.kuva .text h1 {
  font-size: 1.5em;
  margin-top: 10px;
  color: #2c3e50;
}

ol {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
  color: #444;
}

li {
  padding: 3px;
  margin-bottom: 5px;
}
#esi {
  text-align: center;
  background-color: hsl(195, 56%, 94%);
  /* background-color: #ebebf6; */
  padding: 5px;
}

ul li,
.right-column li {
  margin-left: 30px;
  padding: 3px;
}

.right-column li:nth-child(odd) {
  font-weight: bold;
}
/*for dark theme*/

body.dark-theme .left-column,
body.dark-theme #esi {
  background-color: #555;
}
body.dark-theme .left-column {
  background-color: #444;
  color: #f1f1f1;
}

body.dark-theme .left-column h1,
body.dark-theme .left-column h2,
body.dark-theme .left-column h3 {
  color: #f1f1f1;
}

body.dark-theme .left-column li,
body.dark-theme .left-column ol,
body.dark-theme .right-column li,
body.dark-theme .left-column p,
body.dark-theme .harrastus ul li {
  color: #ddd;
}

body.dark-theme .kuva img {
  filter: brightness(0.7);
}

body.dark-theme .kuva .text h1 {
  color: #eee;
}

body.dark-theme .left-column #esi {
  /* background-color: #666; */
  color: #f1f1f1;
}
@media (max-width: 768px) {
  body {
    font-size: 16px;
    /* line-height: 1.5; */
  }
  .cv-grid {
    grid-template-columns: 1fr;
  }
  .left-column {
    width: 100%;

    margin-left: 10px;
  }
  .harrastus {
    display: none;
    /* display: flex;
    flex-direction: column;

    align-items: center; */
  }
  .kuva {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
  }
}