/* Basic */
html {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  background-color: rgb(0, 0, 0);
  color: white;
  font-size: 10px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 1280px;
  min-height: 720px;
}

img {
  object-fit: contain
}

/* Header */
header {
  position: fixed;
  right: 0;
  left: 0;
  background: black;
  border-bottom: 0.3rem solid dimgray;

  nav {
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: space-between;
  }

  nav ul {
    margin: 0;
    float: right;
    list-style: none;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  nav ul li a {
    padding: 1rem 2rem;
    color: dimgray;
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;

    transition: background-color 0.3s ease, color 0.3s ease;
  }

  nav ul li:first-child a {
    padding-left: 0;
  }

  nav ul li:last-child a {
    padding-right: 0;
  }

  .circle {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 0;
    margin: 0.5rem;
    width: 3.3rem;
    height: 3.3rem;
    background: white;
    display: inline-block;
    cursor: pointer;
  }

  .logo {
    font-size: 2.7rem;
    font-weight: 500;
    left: 0.3rem;
    color: black;
    text-decoration: none;
    letter-spacing: -0.3rem;
    text-align: center;
    position: relative;
  }

  .active {
    color: white;
  }

 
}



/* Main content area */
main {
  padding: 0;
  margin: 0;
  left: 0;
  right: 0;

  .intro {
    height: 95.3rem;
    color: black;
    background-color: white;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    .headline {
      margin-left: 20rem;

      h1 {
        font-size: 7.5rem;
        font-weight: 600;
        margin: 0;
      }

      p {
        font-size: 1.5rem;
        font-weight: 500;
        margin: 0;
      }
    }

    img {
      width: 35rem;
      padding-left: 20rem;
      margin-right: 21.5rem;
    }
  }

  .about_me {
    margin: 0;
    background-color: black;
    padding-top: 15rem;
    padding-bottom: 10rem;

    .heading {
      display: block;
      padding-bottom: 18rem;

      h2 {
        text-align: center;
        font-size: 7rem;
        font-weight: 500;
      }
    }

    .contents {
      --size-container: 15rem;
      justify-content: space-between;
      display: flex;
      flex-flow: row wrap;
      text-align: center;
      margin-left: 20rem;
      margin-right: 20rem;

      .container {
        border-radius: 50%;
        width: var(--size-container);
        height: var(--size-container);
        border: solid white 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-color: white;
        flex-shrink: 0;
      }

      span {
        font-size: 1.5rem;
      }

      .school img {
        width: calc(var(--size-container) + 0.5rem);
      }

      .location img {
        width: calc(var(--size-container) + 3rem);
      }

      .music img {
        width: var(--size-container);
      }

      .birthday img {
        width: calc(var(--size-container) - 5rem);
      }
    }
  }

  .skills {
    margin: 0;
    background-color: black;
    padding-top: 15rem;
    padding-bottom: 10rem;

    .heading {
      display: block;
      padding-bottom: 20rem;

      h2 {
        color: white;
        text-align: center;
        font-size: 7rem;
        font-weight: 500;
      }
    }

    .contents {
      gap: 3rem;
      flex-wrap: wrap;
      justify-content: center;
      display: flex;
      margin: 0;
      padding: 0;
      margin-left: 20rem;
      margin-right: 20rem;

      div {
        width: 10rem;
        height: 12rem;
        padding: 1.5rem 2rem;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(22, 22, 23);

        &:hover {
          background-color: dimgrey;
        }

        span {
          font-size: 1.2rem;
          margin-top: 1rem;
          padding: 0;
          box-sizing: border-box;
          list-style: none;
          text-decoration: none;
          color: white;
        }

        img {
          width: 7rem;
          height: 7rem;
        }
      }
    }
  }

  .education {
    margin: 0;
    background-color: black;
    padding-top: 15rem;
    padding-bottom: 10rem;

    .heading {
      display: block;
      padding-bottom: 10rem;

      h2 {
        color: white;
        text-align: center;
        font-size: 7rem;
        font-weight: 500;
      }
    }

    .contents {
      .school {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 0;
        padding: 0;
        margin-left: 20rem;
        margin-right: 20rem;

        .container {
          background-color: white;
          border-radius: 50%;
          width: 25rem;
          height: 25rem;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          margin: 0;
          flex-shrink: 0;

          img {
            width: 23rem;
            height: 23rem;
          }
        }

        .explanation {
          text-align: center;

          p.degree {
            font-size: 3rem;
            font-weight: 500;
          }

          p.additional_explanation {
            color: darkgrey;
            font-size: 2rem;
          }
        }
      }
    }
  }

  .experience {
    margin: 0;
    background-color: black;
    padding-top: 15rem;
    padding-bottom: 10rem;
    display: flex;
    flex-flow: column;
    justify-content: center;

    .heading {
      display: block;
      padding-bottom: 10rem;

      h2 {
        color: white;
        text-align: center;
        font-size: 7rem;
        font-weight: 500;
      }
    }

    .contents {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      margin: 0;
      padding: 0;
      margin-left: 20rem;
      margin-right: 20rem;
      margin-bottom: 10rem;

      .job {
        justify-content: flex-start;
        display: flex;
        flex-flow: row nowrap;
        margin: 0;
        margin-left: 13%;

        .container {
          margin-top: 5rem;
          margin-right: 5rem;
          background-color: white;
          border-radius: 50%;
          width: 23rem;
          height: 23rem;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          flex-flow: column nowrap;
          flex-shrink: 0;

          .army {
            width: 15rem;
            height: 15rem;
          }

          .osu {
            width: 14rem;
            height: 14rem;
          }

        }


        .description {
          padding-left: 7rem;
          border-left: solid 0.2rem white;
          align-items: center;
          padding-top: 8rem;
          margin: 0;
          padding-bottom: 15rem;

          div:nth-child(1) {
            margin-bottom: 10rem;
          }

          h3 {
            margin-top: 0rem;
            margin-bottom: 0rem;
            font-size: 4rem;
          }

          .workplace {
            color: darkgray;
            font-size: 1.5rem;
          }

          ul {
            font-size: 1.5rem;
            padding-left: 2rem;
          }

        }

        &:last-child .description {
          padding-bottom: 5rem;
        }
      }

    }
  }
}

/* Footer styling */
footer {
  text-align: center;
  padding-bottom: 0.5rem;
  background: rgb(22, 22, 23);
  color: white;

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0rem;

    i {
      font-size: 4rem;
      padding: 2rem;
      padding-bottom: 0.5rem;
      color: white;
    }

    img {
      height: 4rem;
      padding: 1.5rem;
      padding-bottom: 0rem;
    }
  }

  p {
    font-size: 1.1rem;
  }
}