:root {
  --logo-img-size: 50px;
}

.logo-container {
  cursor: pointer;
}
.container {
  background-color: white;
}
/* LOGO TEXT */
.hover-fly-text {
  list-style-type: none;
  position: absolute;
  margin-left: var(--logo-img-size);
  padding: 0;
}
.hover-fly-text li {
  display: inline-block;
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--logo-img-size) / 2);
  line-height: 50px;
  letter-spacing: 0.04em;

  color: #ed8074;
  opacity: 1;
  transition: all 1.5s ease;
  cursor: default;
}
.hover-fly-text.hidden li {
  opacity: 0;
  transform: translateX(-300px);
}

.main-content {
  width: 66%;
  margin: auto;
  margin-top: 2em;

  display: flex;
  flex-direction: column;

  border-width: 0px 1px 0px 1px;
  border-style: solid;
  border-color: #1d7a8c;
}

.sub-container {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

.sub-container > * {
  display: flex;
}

.sub-container p {
  font-family: "sansation_lightlight";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 200%;
  /* or 36px */

  letter-spacing: 0.11em;

  color: #1e1e1e;

  mix-blend-mode: normal;
}

#row1,
#row2 {
  justify-content: space-between;
  margin-bottom: 2rem;
}

#row1 p,
#row2 p {
  width: 80%;
  align-self: center;
}

#row3 p {
  text-align: center;
}

/* IMAGES MAIN CONTENT */
.main-content img {
  height: 198px;
  width: 161px;
  border-radius: 100px;
}

.main-content::before {
  content: "";
  background-color: #1d7a8c;

  height: 1px;
  width: 25%;

  position: relative;
  right: 0;
}

.main-content::after {
  content: "";
  background-color: #1d7a8c;

  height: 1px;
  width: 25%;
  position: relative;
  left: 75%;
}