.windowContent.about{
  padding: 16px;
  color: #3e3e3e;
  overflow: hidden;
}

.mainInfoPanel{
  display: flex;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #3e3e3e;

  transition: border-bottom 0.2s;
}

.avatarContainer{
  transition: transform 0.17s;
}

.avatar{
  width: clamp(140px, 10vw, 153.6px);
}

.nameAbout{
  color: #f59300;
  font-size: clamp(1.7rem, 2vw, 2rem);
  font-weight: 500;

  transition: color 0.2s;
}

.descriptionAbout{
  font-size: clamp(1.25rem, 1.5vw, 1.4rem);
}

.aboutContentContainer{
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;

  transition: scrollbar-color 0.2s;
}

.aboutContentContainer:hover{
  scrollbar-color: #afafaf transparent;
}

@media (hover: none) {
  .aboutContentContainer{
    scrollbar-color: #afafaf transparent;
  }
}

.sectionHeading{
  margin-top: 11px;
  margin-bottom: 0px;
}

.aboutList{
  font-size: 1.15rem;
  margin: 5px 0px;
}

.aboutText{
  font-size: 1.15rem;
  margin-left: 20px;
}

.educationText{
  display: inline-block;
  background-color: #fffcf3;
  border-radius: 5px;
  font-size: 1.15rem;
  margin-left: 20px;
  margin-top: 7.5px;
  padding: 10px 20px;

  transition: background-color 0.2s;
}

@media (max-width: 410px) {
  .mainInfoPanel{
    gap: 8px;
  }
  .descriptionAbout{
    font-size: 1rem;
  }
  .nameAbout{
    font-size: 1.5rem;
  }
  .avatar{
    width: 130px;
  }
}

@media (max-width: 335px) {
  .avatar{
    width: 115px;
  }
}