/* ----------------common---------------------- */
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&family=Roboto&display=swap");
:root {
  --border--radius: 15px;
  --color-deep-coral: rgb(252, 106, 53);
  --color-warm-white: rgb(255, 255, 255);
  --color-light-gray: rgb(226, 226, 226);
  --color-light-green: rgb(52, 204, 85);
  --color-indicator-dot-active: #fdd835;
  --color-indicator-dot-default: #b5b5b5;
  --color-indicator-bg: #fdd835;
}
html {
  scroll-behavior: smooth;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}
.bg {
  background-color: black;
  background: linear-gradient(#000000, #140088, #540085, #e66465, #e5de91);
  /* background: url("./images/bg.svg") center / cover; */
  z-index: -10;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.bg i {
  opacity: 0;
  position: absolute;
  height: 200px;
  /* background: linear-gradient(transparent, #ffea06); */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 20px;
  animation: shootingStar 3s linear infinite;
  animation-timing-function: cubic-bezier(0.16, 0.76, 0.15, 1.12);
}

.bg i:nth-child(3n + 1) {
  background: linear-gradient(transparent, #ff0cef);
}
.bg i:nth-child(3n + 2) {
  background: linear-gradient(transparent, #9710ff);
}
.bg i:nth-child(3n + 3) {
  background: linear-gradient(transparent, #ffd208);
}

@keyframes shootingStar {
  0% {
    transform: rotate(60deg) translateY(-300px);
    opacity: 0;
  }
  3% {
    opacity: 0.9;
  }
  8% {
    opacity: 0.9;
  }
  12% {
    opacity: 0;
  }
  100% {
    transform: rotate(60deg) translateY(calc(200vh));
  }
}

.bg .wave {
  position: absolute;
  width: 4000px;
  height: 100px;
  opacity: 0.95;
  transform: translate(0, 0);
}

.bg .wave-1 {
  background: url("./images/wave-1.svg");
  bottom: 10px;
  animation: wave 2s linear infinite, floating 5s ease infinite;
  /* 	  swell 8s ease -1.25s infinite; */
}

.bg .wave-2 {
  background: url("./images/wave-2.svg");
  bottom: -20px;
  animation: wave 3s linear infinite;
  animation-delay: -0.5s;
  /* 	  swell 8s ease -1.25s infinite; */
}

.bg .wave-3 {
  background: url("./images/wave-3.svg");
  bottom: -50px;
  /* animation-delay: 4s; */
  animation: wave 8s linear infinite;
  /* 	  swell 8s ease -1.25s infinite; */
  /* animation-delay: -4s; */
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -800px;
  }
}

@keyframes floating {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 20%);
  }
  100% {
    transform: translate(0, 0);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", "Nanum Gothic Coding", monospace, sans-serif;
}
a,
a:link,
a:visited {
  text-decoration: none;
  color: inherit;
}
*::-webkit-scrollbar {
  display: none;
}
li {
  list-style: none;
}

h2 {
  font-size: 3rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25em;
}
i {
  pointer-events: none;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

section {
  background-color: transparent;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  scroll-snap-align: start;
}

section .container {
  background-color: var(--color-warm-white);
  width: 100%;

  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 4% 4% 4%;
}

section .container .title {
  margin-bottom: 3%;
}
section .container .title h4 {
  color: var(--color-deep-coral);
}

/* ----------------common---------------------- */

/* -----------------------------헤더-nav------------------- */

header nav {
  position: fixed;
  z-index: 10;
  right: 5%;
  top: 5%;
}
header nav ul {
  transition: all 0.4s;
  display: inline-flex;
  flex-direction: column;
  color: black;
  transform: translate(50%, 0);
  opacity: 0;
  pointer-events: none;
}
header nav ul.show {
  transform: translate(0);
  opacity: 1;
  pointer-events: initial;
}

header nav ul li a {
  font-size: 1.2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  position: relative;
}
header nav ul li a span {
  background-color: var(--color-indicator-bg);
  opacity: 0;
  transition: all 0.2s;
  padding: 5px 10px;
  position: relative;
  left: 4px;

  display: flex;
  align-items: center;
  border-radius: 3px;
}
header nav ul li.active span {
  opacity: 1;
  left: -20px;
}
@media screen and (min-width: 565px) {
  header nav ul li:hover span {
    opacity: 1;
    left: -20px;
  }
}

header nav ul li a span::after {
  content: "";
  border: solid;
  border-width: 5px 5px 5px 7px;
  border-color: transparent transparent transparent var(--color-indicator-bg);

  position: absolute;
  right: 0;
  transform: translate(100%, 0);
}

header nav ul li a::after {
  z-index: 100;
  transition: all 0.3s;
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--color-indicator-dot-default);
  border-radius: 50%;
}

header nav ul li.active a::after {
  background-color: var(--color-indicator-dot-active);
  transform: scale(1.4);
}
button.down {
  position: absolute;
  padding: 30px;
  bottom: 0;
  font-size: 2rem;
  animation: jump 1s infinite alternate;
  transition: all 1s;
  opacity: 0;
  color: white;
}

button.down.show {
  opacity: 1;
}
@keyframes jump {
  0% {
    bottom: 2rem;
  }
  100% {
    bottom: 3.5rem;
  }
}

/* ---------------------------헤더-nav------------------- */

/* ---------------home------------------ */
section#home {
  color: white;
}
section#home .container {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0px;
}

section#home .container span {
  /* position: relative; */
  width: 100%;
  word-break: break-all;
  font-size: 2.5rem;
  pointer-events: none;
  text-align: center;
}
section#home .container span.active {
  pointer-events: initial;
}
section#home .container span.blinkOn::after {
  position: absolute;
  margin-top: 4px;
  content: "";
  height: 2.5rem;
  width: 3px;
  background-color: white;
}

/* ---------------home------------------ */

/* ------------about--------------- */

section#about .container .contents {
  display: flex;
  justify-content: space-between;
}

section#about .container .contents .left {
  /* border: solid black 3px; */
  width: 47%;
  height: 500px;
  display: flex;
  align-items: center;
  background: url("./images/profile_img.webp") no-repeat center/cover;
  /* background-size: contain;
  background-position: center; */
}

section#about .container .contents .right {
  width: 47%;
}
section#about .container .contents .right > * {
  margin-bottom: 1rem;
}
section#about .container p {
  font-size: 1.2rem;
  font-weight: bold;
}

.social {
  font-size: 2.5rem;
}
/* ------------about--------------- */

/* -----------skills--------------- */
section#skills .container i {
  font-size: 35px;
  display: block;
  color: var(--color-deep-coral);
}
section#skills .container .contents {
  background-color: rgb(255, 255, 255);
  border-radius: var(--border--radius);

  display: flex;
  flex-direction: column;
}
/* section#skills .container .contents ul#icons {
  display: flex;
  flex-wrap: wrap;
} */
/* section#skills .container .contents ul#icons > * {
  margin-right: 10px;
} */
section#skills .container .contents > div {
  position: relative;
}
section#skills .container .contents > div > hr {
  margin-bottom: 20px;
}
section#skills .container .contents > div > h4 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(10%, -55%);
  background-color: white;
  padding: 0 10px;
  color: rgb(46, 46, 46);
}
section#skills .container .contents > div > ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
section#skills .container .contents > div > ul > li {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin: 10px;
  background-color: var(--color-light-gray);
  border-radius: 10px;
  box-shadow: 2px 2px 3px 1px gray;
}
section#skills .container .contents > div > ul > li > img {
  width: 30px;
}
section#skills .container .contents > div > ul > li > h5 {
  font-size: 16px;
  margin-left: 10px;
}
/* -----------skills--------------- */

/* ------------------projects------------------------- */

section.projects .container .contents {
  border-radius: var(--border--radius);
}
section.projects .container .contents > ul {
  display: flex;
  overflow-x: scroll;
}
section.projects .container .contents > ul > li {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 15px;
  width: 350px;
  height: 450px;
  background-color: var(--color-light-gray);
  border-radius: var(--border--radius);
  box-shadow: 3px 3px 5px 1px gray;
  margin: 6px 3px;
  margin-right: 15px;
}

section.projects .container .contents > ul > li:last-child {
  margin-right: 10px;
}
section.projects .container .contents > ul > li > *:not(:last-child) {
  margin-bottom: 10px;
}
section.projects .container .contents > ul > li > div {
  height: 50%;
  position: relative;
}
section.projects .container .contents > ul > li p {
  flex: 1;
  background-color: white;
  padding: 10px;
  border-radius: 10px;
}
section.projects .container .contents > ul > li > div:hover .hoverBox {
  opacity: 1;
}

section.projects .container .contents ul li .project-icons {
  display: flex;
  flex-wrap: wrap;
  color: #badcff;
}
section.projects .container .contents ul li .project-icons li {
  margin-right: 3px;
}
section.projects .container .contents ul li .project-icons > li img {
  border-radius: 5px;
  height: 23px;
}
.hoverBox {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.684);
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: all 0.3s;
  opacity: 0;
  padding: 0 10%;
}
section.projects .hoverBox a {
  padding: 10px;
  border-radius: 5px;
  font-size: 35px;
  color: var(--color-deep-coral);
  transition: all 0.3s;
}
section.projects .hoverBox a:hover {
  background-color: var(--color-light-gray);
  background-color: rgba(128, 128, 128, 0.61);
  color: var(--color-light-green);
}

section.projects .container .contents ul li div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
section.projects .container .contents ul li ul {
  display: flex;
}

section.projects .container ul li ul li i {
  margin: 5px;
  font-size: 35px;
  display: block;
  color: var(--color-deep-coral);
}

section.projects .container .button-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

section.projects .container .button-box .project-nav {
  font-size: 30px;
  border-radius: 5px;
  padding: 3px 6px;
  transition: all 0.15s;
  /* position: absolute; */
  flex: 1;
}

section.projects .container .button-box .project-nav:hover {
  background-color: rgba(169, 169, 169, 0.504);
}
section.projects .container .button-box .project-nav.left {
  /* top: 50%;
  left: 0; */
}

/*----------------------contact-------------------------- */

section#contact .alert {
  width: 100px;
  height: 100px;
  background-color: var(--color-light-green);
  position: fixed;
  left: 50%;
  top: 50%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 1.2rem;
  padding: 15px;
  font-weight: bold;
  opacity: 0;
  transition: all 0.4s;
  transform: translate(-50%, -50%);
}
section#contact .alert.show {
  opacity: 0.8;
  transform: translate(-50%, -50%);
}
section#contact ul {
  display: flex;
  flex-direction: column;
}

section#contact .contents li {
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-light-gray);
  box-shadow: 2px 2px 3px 1px gray;
  margin-bottom: 10px;
  max-width: 600px;
  border-radius: 10px;
}
section#contact li > div {
  display: flex;
  align-items: center;
  height: 100%;
}
section#contact li > div > i {
  font-size: 2.5rem;
  text-align: center;
  width: 50px;
  margin-right: 5px;
}
section#contact li > div > div {
  width: 80%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
section#contact li > div > div:last-child {
  word-break: break-all;
}
section#contact li > div h5 {
  margin-bottom: 5px;
}
section#contact button {
  font-size: 2rem;
  margin: 0;
  padding: 10px;
  transition: all 0.1s;
}
section#contact button:hover {
  color: var(--color-deep-coral);
}
section#contact button:active {
  transform: scale(0.9);
}

@media screen and (max-width: 565px) {
  /* ----------------common---------------------- */
  h2 {
    font-size: 2.5rem;
    margin-bottom: 10%;
  }
  h4 {
    font-size: 1.25rem;
  }

  /* ----------------common---------------------- */

  /* ------------------header---------------- */

  /* ------------------header---------------- */
  /* welcom--------------- */
  section#home .container {
    display: flex;

    align-items: center;
  }

  section#home .container p {
    font-size: 2.5rem;

    pointer-events: none;
  }
  /* ----------------about---------------- */
  section#about .contents {
    flex-direction: column;
    align-items: center;
  }
  section#about .container .contents .left {
    width: 100%;
    margin-bottom: 15px;
  }
  section#about .container .contents .right {
    width: 100%;
    padding: 0 5px;
  }
  /* -----------------about------------ */

  /* --------------projects--------------- */
  section.projects .container .contents ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    justify-content: flex-start;
  }
  section.projects section.projects .container .contents > ul > li {
    width: 100%;
    margin: 0;
  }
  section.projects ul > li {
    flex: none;
  }

  /* --------------projects--------------- */
}