:root {
  --primary: #001f3d;
  --secondary: #045174;
  --third: #f8dcbf;
  --forth: #e87a00;
  --fifth: #fa9939;

  --background: var(--secondary);
  --container: var(--primary);
  --text: var(--third);
  --first-bar: var(--third);
  --second-bar: var(--forth);
  --active-star-: var(--forth);
  --inactive-star: var(--third);
  --tech-container: var(--third);
  --tech-text: var(--primary);
  --break-line: var(--fifth);

  --size-large: 1.5rem;
  --size-medium: 1.3rem;
  --size-medium-small: 1.15rem;
  --size-small: 1rem;

  --break-small: 5px;

  --title-font: 'Roxborough CF', serif;
  --text-font: "Sorts Mill Goudy", serif;
}

@font-face {
  font-family: 'Roxborough CF';
  src: url('./assets/font/roxborough-cf-regular.woff2') format('woff2'),
       url('./assets/font/roxborough-cf-regular.woff') format('woff');
}

body {
  background-color: var(--background);
  color: var(--text);
}

body p {
  font-family: var(--text-font);
  color: var(--text);
  margin: 0;
  font-size: var(--size-small);
}

h1 {  
  font-family: var(--title-font);
}

h2 {
  margin: 0 0 10px 0;
  font-size: var(--size-medium);
  font-family: var(--title-font);
}

a {
  color: var(--text);
  text-decoration: none;
  font-family: var(--text-font);
}

.main-container {
  padding: 2% 5%;
  /* width: calc(100vw-(100vw*0.08)); */
}

.profile-container {
  background-color: var(--container);
  padding: 40px 40px 10px 40px;
  height: 100%;
}

.detail-container {
  background-color: var(--container);
  padding: 40px;
  height: 100%;
}

/* Profile */

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 15px;
}

.profile > h1 {
  margin: 15px 0px 0px 0px;
  font-size: var(--size-large);
}

.profile > img {
  border-radius: 50%;
}

.profile > p {
  text-align: center;
}


.profile-box {
  border-top: 2px solid var(--break-line);
  padding: 30px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  padding-bottom: var(--break-small);
  gap: 10px;
}


.contact-item > a{
  font-size: var(--size-small);
}

.education-item {
  display: flex;
  align-items: self-start;
  gap: 10px;
}

.tech-skill-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-skill-item {
  display: flex;
  justify-content: center;
  background-color: var(--tech-container);
  padding: 2px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.skill-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.star {
  font-size: var(--size-medium);
  line-height: 1;
}

.active-star {
  color: var(--active-star-);
}

.inactive-star {
  color: var(--inactive-star);
}

/* Detail */

.detail-items {
  position: relative;
}

.bar {
  position: absolute;
  height: 100%;
  width: 10px;
  background-color: var(--color);
  left: -20px;
  border-radius: 10px;
}

.detail-item {
  list-style: none;
}

.detail-items > ul {
  padding-left: 0;
  margin-bottom: 0;
}

.item-title p {
  font-size: var(--size-medium-small);
  padding-bottom: 5px;
}

.time-experience, .time-project {
  text-align: right;
}

.item-title a {
  font-size: var(--size-medium-small);
  color: var(--second-bar);
}

.detail-item > ul {
  padding-left: 20px;
  padding-bottom: 5px;
}

.list {
  font-family: var(--text-font);
  font-size: var(--size-small);
  padding-bottom: var(--break-small);
}

.list p {
  display: inline-block;
  background-color: var(--tech-container);
  color: var(--tech-text);
  border-radius: 20px;
  padding: 2px 10px;
}

@media (max-width: 1400px) {
  .time-experience {
    text-align: left;
  }
}

@media (max-width: 576px) {
  .time-project {
    text-align: left;
  }

  .list p {
    margin-bottom: 5px;
  }
}