@font-face {
  font-family: "Sen";
  src: url("./assets/fonts/Sen-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Sen", sans-serif;
  font-size: 20px;
  color: #34535c;
  line-height: 1.5;
  padding: 20px;
}

h1 {
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  margin: 20px 0;
}

h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 15px;
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

p {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 10px;
}

header {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  & .photo-link {
    display: block;
    width: 150px;
    height: 150px;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid #333;
    }
  }
  & nav {
    display: flex;
    gap: 20px;
    justify-content: center;
    & a {
      text-decoration: none;
      font-weight: 600;
      color: #34535c;
      &:hover {
        color: #ff4757;
        text-decoration: underline;
        text-decoration-color: #93cdac;
        transition: color 0.3s ease;
      }
    }
  }
}

main {
  max-width: 1000px;
  margin: 0 auto;
  & section {
    margin: 40px 0;
    &#personal-information {
      position: relative;
      padding-left: 20px;
      &::before {
        content: "";
        background-color: #ff4757;
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
      }
      & h2::first-letter {
        font-size: 3rem;
        font-weight: 900;
        color: #ff4757;
      }
      & p {
        text-indent: 40px;
      }
    }
    &#work-experience {
      & .job-list,
      .duty-list {
        list-style-type: none;
      }
      & .job-list {
        & > li {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 20px;
          text-align: center;
          word-spacing: 7px;
          &::before {
            content: "★";
            color: #ff4757;
            font-weight: bold;
          }
        }
        & .duty-list {
          margin-left: 40px;
          & li {
            font-size: 0.95rem;
            text-transform: lowercase;
            &::before {
              content: "➤";
              color: #93cdac;
              font-weight: bold;
              padding-right: 10px;
            }
          }
        }
      }
    }
    &#skills {
      text-align: center;
      background-color: #ebeaea;
      padding: 5px;
      & p {
        letter-spacing: 7px;
      }
    }
    &#contacts {
      & .links {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 20px;
        & a.contact-link {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          text-decoration: none;
          color: #34535c; 
          transition: color 0.3s ease;
          & svg {
            width: 40px;
            height: 40px;
            fill: currentColor; 
            transition: fill 0.3s ease;
          }
          &:hover {
            color: #ff4757; 
            & span {
              text-decoration: underline;
              text-decoration-color: #93cdac;
            }
          }
        }
      }
    }
  }
}