/* Import */
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700&display=swap');

/* Global */
:root {
  /* Color */
  --color-white: #fff;
  --color-yellow: rgb(255, 181, 43);
  --color-light-white: #eee;
  --color-dark-white: #bdbdbd;
  --color-grey: #777777;
  --color-dark-grey: #404040;
  --color-black: #000;
  --color-background: rgb(242 242 240);

  /* Font Size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-middle: 20px;
  --font-regular: 16px;
  --font-small: 14px;
  --font-micro: 12px;

  /* Font weight */
  --fweight-bold: 700;
  --fweight-semi-bold: 600;
  --fweight-medium: 500;
  --fweight-regular: 400;
  --fweight-light: 300;
  --fweight-extra-light: 200;
  --fweight-thin: 100;

  /* Size */
  --size-border-radius: 15px;

  /* Animation */
  --animation-duration: 300ms;
}

/* Universal tags */
* {
  box-sizing: border-box;
  font-family: 'Gothic A1', sans-serif;
}
body {
  margin: 0;
  cursor: default;
}
a {
  text-decoration: none;
  color: var(--color-dark-grey);
}
ul {
  list-style: none;
  padding-left: 0;
}
button {
  background-color: transparent;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0;
}

/* Typography */
h1 {
  font-size: var(--font-large);
  font-weight: var(--fweight-semi-bold);
  color: var(--color-black);
  margin: 16px 0;
}
h2 {
  font-size: var(--font-medium);
  font-weight: var(--fweight-semi-bold);
  color: var(--color-black);
  margin: 8px 0;
}
h3 {
  font-size: var(--font-middle);
  font-weight: var(--fweight-semi-bold);
  color: var(--color-black);
  margin: 40px 0 16px;
  text-align: center;
}
h4 {
  font-size: var(--font-middle);
  font-weight: var(--fweight-light);
  color: var(--color-black);
  margin: 10px 0 16px;
}
p {
  font-size: var(--font-regular);
  font-weight: var(--fweight-extra-light);
  color: var(--color-black);
  margin: 8px 0;
}

/* Navbar */
#navbar {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  transition: all var(--animation-duration) ease-in-out;
  z-index: 1;
}
#navbar.navbar--dark {
  background-color: var(--color-light-white);
}
.navbar__logo {
  display: flex;
  align-items: center;
}
.navbar__logo > img {
  width: 23px;
  height: 23px;
  background-color: var(--color-white);
  border-radius: 40%;
  margin: 0 10px;
}
.navbar__logo > a {
  font-size: var(--font-regular);
  font-weight: var(--fweight-thin);
}
.navbar__menu {
  display: flex;
}
.navbar__menu__item {
  padding: 8px 12px;
  margin: 0 8px;
  font-size: var(--font-regular);
  font-weight: var(--fweight-thin);
  cursor: pointer;
  border-radius: var(--size-border-radius);
}
.navbar__menu__item.active {
  background-color: #f8f8f8;
}

.navbar__menu__item:hover {
  background-color: #f8f8f8;
}
.navbar__toggle-btn > i {
  font-size: var(--font-middle);
  color: var(--color-dark-grey);
}
.navbar__toggle-btn {
  position: absolute;
  right: 10px;
  display: none;
}

/* Home */
#home {
  padding: 40px;
  padding-top: 100px;
  text-align: center;
}
.home__avatar {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}
.home__contact {
  font-size: var(--font-regular);
  font-weight: var(--fweight-extra-light);
  margin: 24px;
  padding: 8px 12px;
  border: 2px solid var(--color-light-white);
  border-radius: var(--size-border-radius);
  position: relative;
}
.home__contact::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: var(--size-border-radius);
  background-color: transparent;
  transition: all 250ms ease-in-out;
}
.home__contact:hover {
  color: var(--color-white);
  transition: all 250ms ease-in-out;
}
.home__contact:hover::after {
  background-color: rgb(0, 0, 0);
  z-index: -1;
  transition: all 250ms ease-in-out;
}

/* Section common */
.section {
  padding: 50px;
  max-width: 1200px;
  text-align: justify;
  margin: auto;
}
/* .section__container{
  max-width: 1200px;
  margin: 0 auto;
} */

/* About */
.school,
.experience {
  display: flex;
}
.about__logo {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  margin-top: 10px;
}
.about__period {
  font-size: var(--font-small);
}

/* Skills */
.skillset {
  display: flex;
  border: 2px solid var(--color-light-white);
  border-radius: var(--size-border-radius);
  padding: 20px;
  margin-top: 40px;
}
.skillset__left {
  flex-basis: 60%;
  display: flex;
  flex-flow: column nowrap;
  padding: 0 40px 0 20px;
}
.skillset__right {
  flex-basis: 40%;
  display: flex;
  flex-flow: column nowrap;
}
.skill__description,
.tools__list > li,
.etc__list > li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.skillset i {
  font-size: 22px;
  display: inline-block;
  width: 30px;
}
.skill__description > span,
.tools__list span,
.etc__list span,
.skill__certificate {
  font-weight: var(--fweight-thin);
  font-size: var(--font-regular);
}
.skill__certificate {
  font-size: var(--font-small);
}
.skill:last-child {
  margin-bottom: 10px;
}
.skill__bar {
  width: 95%;
  height: 10px;
  background-color: rgb(240, 240, 240);
  margin-bottom: 14px;
  border-radius: var(--size-border-radius);
}
.skill__value {
  height: 10px;
  background-color: rgb(218, 231, 255);
  border-radius: var(--size-border-radius);
}
.etc {
  margin-top: 20px;
}
.fa-html5 {
  color: rgb(211, 70, 0);
}
.fa-css3-alt {
  color: rgb(0, 126, 185);
}
.fa-js {
  color: rgb(248, 216, 8);
}
.fa-react {
  color: #5ed4f2;
}
.fa-t {
  color: rgb(0, 126, 185);
}
.fa-paintbrush {
  color: rgb(112 126 255);
}
.fa-figma {
  color: rgb(0, 174, 201);
}
.fa-square-github {
  color: #444;
}
.fa-n {
  color: rgb(0, 0, 0);
}

.skill__description,
.tools__list > li,
.etc__list {
  width: fit-content;
  transition: all 300ms ease;
}
.skill__description:hover i,
.tools__list > li:hover i,
.etc__list > li:hover i {
  transform: rotate(-15deg) scale(1.2);
}

/* Work */
.work__categories {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}
.category__btn {
  border: 1px solid var(--color-light-white);
  border-radius: 10px;
  padding: 8px 25px 8px 35px;
  font-size: var(--font-regular);
  font-weight: var(--fweight-thin);
  margin: 10px 10px 10px 0;
}
.category__count {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 20px;
  background: var(--color-yellow);
  border-radius: 50%;
  color: var(--color-white);
  font-size: var(--font-small);
  position: relative;
  top: -20px;
  left: 4px;
  transition: all var(--animation-duration) ease-in;
  opacity: 0;
}
.category__btn.selected,
.category__btn:hover {
  background-color: rgb(251, 251, 251);
}
.category__btn.selected .category__count,
.category__btn:hover .category__count {
  opacity: 1;
  top: 0;
}
.work__projects {
  display: flex;
  flex-wrap: wrap;
  opacity: 1;
  transition: all var(--animation-duration) ease-out;
}
.work__projects.anima-out {
  opacity: 0;
  transform: scale(0.98) translateY(40px);
}
.project {
  display: block;
  width: 260px;
  height: 230px;
  margin: 5px;
  background-color: var(--color-light-white);
  position: relative;
}
.project.invisible {
  display: none;
}
.project__img {
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.webpage-busan {
  background: url(./imgs/webpage.png) 50% 50% no-repeat;
  background-size: cover;
}
.webpage-hilton {
  background: url(./imgs/webpage-hilton.jpg) center center no-repeat;
  background-size: cover;
}
.jjangGame {
  background: url(./imgs/jjangGame.png) center center no-repeat;
  background-size: cover;
}
.todoList {
  background: url(./imgs/todolist.png) center 0 no-repeat;
  background-size: cover;
}
.shoppingList {
  background: url(./imgs/shoppinglist.png) 50% 0 no-repeat;
  background-size: cover;
}
.youtube {
  background: url(./imgs/youtube.png) 0 50% no-repeat;
  background-size: cover;
}
.webpage-teamProject {
  background: url(./imgs/webpage-teamProject.png) center center no-repeat;
  background-size: cover;
}

.project__description {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--animation-duration) ease-in;
}
.project:hover .project__description {
  transform: translateY(0);
  opacity: 0.8;
}
.project__description h3,
.project__description span {
  color: var(--color-white);
  margin: 0 0 5px 0;
  font-weight: var(--fweight-semi-bold);
}
.project__description h3 {
  color: var(--color-yellow);
}
.project__description h3::after {
  content: '';
  display: block;
  position: relative;
  left: 50%;
  margin: 15px 0;
  transform: translateX(-50%);
  width: 50px;
  height: 1px;
  background-color: var(--color-white);
}

/* Contact */
.contact__email {
  margin: 20px 0;
}
.contact__links > a {
  margin-right: 15px;
}
.contact__links > a > i {
  font-size: var(--font-medium);
  color: var(--color-grey);
  transition: all 100ms ease-in;
}
.contact__links > a > i:hover {
  color: rgb(167, 223, 255);
  transform: scale(1.1);
}
.contact__right {
  font-size: var(--font-small);
  margin-top: 40px;
}

/* Arrow up */
.arrow-up {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 50px;
  right: 50px;
  font-size: 30px;
  width: 40px;
  height: 40px;
  background-color: var(--color-dark-white);
  color: var(--color-white);
  border-radius: 50%;
  transition: all var(--animation-duration) ease;
  opacity: 0;
  pointer-events: none;
}
.arrow-up:hover {
  background-color: var(--color-dark-grey);
}
.arrow-up.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive */
/* For below 768px screen width*/
@media screen and (max-width: 768px) {
  :root {
    /* Font Size */
    --font-large: 30px;
    --font-medium: 20px;
    --font-middle: 18px;
    --font-regular: 16px;
    --font-small: 14px;
    --font-micro: 12px;
  }
  .section {
    padding: 20px;
    padding-top: 50px;
  }
  p {
    text-align: initial;
  }
  .arrow-up {
    font-size: 20px;
    width: 30px;
    height: 30px;
    bottom: 30px;
    right: 20px;
  }
  /* Navbar */
  .navbar__toggle-btn {
    display: block;
  }
  #navbar {
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-light-white);
  }
  .navbar__menu {
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin: 6px 0;
    display: none;
  }

  .navbar__menu.open {
    display: block;
  }
  .navbar__menu__item {
    margin: 0 0 5px;
  }
  .navbar__logo,
  .navbar__toggle-btn {
    margin: 16px 0;
  }

  /* Skill */
  .skillset {
    flex-direction: column;
  }
  .skillset__left {
    flex-basis: 100%;
    padding: 0;
    margin-bottom: 10px;
  }
  .skillset__right {
    flex-basis: 100%;
  }

  /* Work */
  .work__categories {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
  }
  .category__btn {
    margin: 5px;
  }
  .project {
    margin-bottom: 10px;
    flex-grow: 1;
  }

  /* Contact */
  .contact__container {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
  }
}