@charset "utf-8";

body {
  background: var(--color-bg);
  color: var(--color);
  font-family: var(--font-family);
  font-size: 14px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: calc(100% - 8px);
}

header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  background: inherit;
  border-bottom: 1px solid #2a2b2c;
  padding: 4px 0;

  .container {
    display: flex;
    align-items: center;

    .logo-link {
      @media (hover: hover) {
        &:hover {
          filter: brightness(1.1);
        }
      }
    }
  }
}

main {
  margin-top: 41px;
  padding: 16px 0 32px;

  .hero-section {
    text-align: center;

    .logo-img {
      margin: 0 auto;
    }

    h1 {
      font-size: 24px;
    }

    h1+p {
      margin-top: 8px;
    }

    p+p {
      margin-top: 4px;
    }
  }

  .project-section {
    margin-top: 24px;

    .container {
      display: flex;
      justify-content: center;

      .inner-container {
        h2 {
          font-size: 14px;

          &:nth-of-type(n+2) {
            margin-top: 8px;
          }

          a {
            color: var(--color-link);
            text-decoration: none;

            @media (hover: hover) {
              &:hover {
                filter: brightness(1.1);
                text-decoration: revert;
              }
            }
          }
        }

        .project-list {
          margin-top: 2px;
          padding-left: 8px;

          .project-item {
            .project-link {
              color: var(--color-link);
              text-decoration: none;

              @media (hover: hover) {
                &:hover {
                  filter: brightness(1.1);
                  text-decoration: revert;
                }
              }
            }
          }
        }
      }
    }
  }
}

footer {
  padding: 16px 0;
  text-align: center;
  background: #2b3035;

  .container {
    .menu-list {
      display: flex;
      justify-content: center;
      gap: 4px;

      .menu-item {
        display: flex;
        gap: 4px;

        &+& {
          &::before {
            content: '|';
            color: #555;
          }
        }

        .menu-link {
          color: inherit;
          text-decoration: none;

          @media (hover: hover) {
            &:hover {
              filter: brightness(1.1);
              text-decoration: revert;
            }
          }
        }
      }
    }

    .copyright {
      margin-top: 8px;
    }
  }
}