/* <!-- : Global--> */

:root {
  /* Color */
  --color-white: #ffffff;
  --color-light-white: #fbfbfc;
  --color-dark-white: #d8d5cf;
  --color-light-beige: #f0ede8;
  --color-beige: #d9d1c6;
  --color-dark-beige: #d8d5cf;
  --color-dark-grey: #565552;
  --color-grey: #7f7f7f;
  --color-light-grey: #c8c8c8;
  --color-blue: #73aace;
  --color-yellow: #f5efd0;
  --color-orange: #fec978;
  --color-black: #000000;
  --color-green: #7b9979;

  /* Font size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;

  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;

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

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

/* <!-- : Universal tags--> */
html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: #f1f1f1;
}

* {
  box-sizing: border-box;
}

/* <!-- : typography--> */
h1 {
  font-weight: var(--weight-bold);
  color: var(--color-black);
}

h2 {
  font-weight: var(--weight-semi-bold);
  color: var(--color-black);
}

h3 h4 {
  font-weight: var(--weight-regular);
  color: var(--color-black);
}

p {
  font-size: var(--font-regular);
  font-weight: var(--weight-regular);
  color: var(--color-black);
}

/* <!-- : Common--> */
body {
  margin: 0;
  opacity: 1;
  transition-duration: 1s;
  transition-property: opacity;
}

a {
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

li {
  list-style: none;
}

button {
  background-color: transparent;
  cursor: pointer;
  border: none;
  outline: none;
}

.title {
  font-weight: 700;
  font-size: 1rem;
  padding-top: 100px;
}

/* Scroll */
.scrolled-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #333;
}

.scrolled-indicator-fill {
  width: 0%;
  height: 100%;
  background-color: #e76f51;
}

/* Mouse */
#cursor {
  position: fixed;
  top: -5px;
  left: -5px;
  width: 7px;
  height: 7px;
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  cursor: pointer;
}

#cursor-border {
  --size: 30px;
  position: fixed;
  top: calc(var(--size) / -2);
  left: calc(var(--size) / -2);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0, 0, 0);
  pointer-events: none;
  transition: top 0.3s ease-out, left 0.3s ease-out, width 0.3s ease-out,
    height 0.3s ease-out, background-color 0.3s ease-out;
  z-index: 999;
  cursor: pointer;
}


/* go Top btn */
.scroll-top {
  background: #222;
  border: 0;
  border-radius: 50%;
  bottom: 0;
  cursor: pointer;
  height: 50px;
  margin: 30px;
  position: fixed;
  right: -100px;
  transition: right 0.2s ease-in-out;
  width: 50px;
  z-index: 99;
}

.scroll-top.visible {
  right: 0;
}

.arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  margin-top: 5px;
  padding: 4px;
}

.arrow.up {
  transform: rotate(-135deg);
}


/* <!-- : Logo --> */
.st0 {
  fill: none;
  stroke: #231F20;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #231F20;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.st2 {
  fill: none;
  stroke: #231F20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.st3 {
  fill: none;
  stroke: #231F20;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* <!-- : Navbar--> */

.nav_contents>nav {
  display: none;
}

#navbar {
  padding: 20px 100px;
  position: fixed;
  z-index: 1;
  width: 100%;
}

.nav_contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#navbar.navbar_dark {
  background: #2d2d2d;
}

#navbar.white {
  background-color: #fff;
}

.hovertext-container {
  width: 290px;
  height: 30px;
  position: relative;
  overflow: hidden;
}

.hovertext-container p {
  position: absolute;
  display: block;
  top: -10px;
  transition: all 0.5s ease;
  font: 16px sans-serif;
}

.hovertext-container .hovertext-p2 {
  transform: translateY(50px);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  /* background-color: #000000;
  color: #fff; */
  /* padding: 0 10px; */
}

.hovertext-container:hover .hovertext-p1 {
  transform: translateY(-100px);
}

.hovertext-container:hover .hovertext-p2 {
  transform: translateY(0px);
}

.hovertext-container:hover .logo_hover {
  transform: translateY(12px) !important;
}


.navbar_logo_svg {
  width: 23px;
}


.navbar_menu {
  display: flex;
}

.navbar_menu_item {
  padding: 8px 12px;
  margin: 0 15px;
  position: relative;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 300;
  font-family: 'Poppins', sans-serif;
}

/* .navbar_menu_item:hover {
  transition: transform 0.1s ease-in-out;
  transform: scale(1.05);
  font-weight: 600;
} */

.navbar_current {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  background: radial-gradient(590px at 8.2% 13.8%, rgb(183 67 255) 0%, rgb(158 36 255) 18%);
  color: #fff;
  padding: 12px;
  border-radius: 7px;
  margin-left: 10px;
  transition: transform 0.5s ease-in-out;
}


.navbar_current:hover {
  transform: rotateX(360deg);
}


.link_nav {
  margin-top: 4px;
  font-size: 1.3rem;
  margin-right: 20px;
}

.link_nav i {
  margin-left: 1rem;
}

.link_nav i:hover {
  transition: transform 0.1s ease-in-out;
  transform: scale(1.3);
}

/* Linked In */
.nav_right {
  display: flex;
  align-items: center;
}

/* Toggle button */
.navbar_toggle_btn {
  position: absolute;
  top: 10px;
  right: 32px;
  font-size: 24px;
  color: #aeadab;
  display: none;
}

.navbar_toggle_btn_bright {
  color: rgb(255, 255, 255);
  transition: all ease 1s;
}

/* <!-- : Main -->  */
#main {}

/* Background animation color */
.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.7;
}

/* Slide */
.wrapper-titles {
  width: 100vw;
  height: 88px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.m-scroll {
  display: flex;
  position: relative;
  width: 80%;
  height: 100px;
  margin: auto;
  z-index: 1;
}

.m-scroll-title {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  transition: all 1s ease;
}

.m-scroll-title div {
  display: flex;
  animation: scrollText 40s infinite linear;
  /* cambiar animation duration */
}

.m-scroll-title p {
  margin: 0 0 0 10rem;
  color: transparent;
  font-size: 7rem;
  font-weight: 400;
  color: #e8e7e5
}




@keyframes scrollText {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

/* <!-- : Home --> */
#home {
  max-width: 1200px;
  margin: auto;
  padding: 100px;
}

.home_title h1 {
  font-size: 4rem;
  font-weight: 200;
  transition: all ease 1s;
  line-height: 5.5rem;
  color: #000000;
  margin-top: 150px;
}

.home_title span {
  font-weight: 500;
  letter-spacing: -1px;
}

.home_intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 150px;
  padding: 100px;
  max-width: 1200px;
  margin: auto;
  margin-bottom: 100px;
}

.home_intro_content {
  width: 50%;
}

.home_intro img {
  max-width: 50%;
  margin-left: 100px;
}

.home_intro_content span {
  display: block;
}

.home_intro_content span:nth-of-type(1) {
  font-size: 1.75rem;
  margin-bottom: 30px;
}

.home_intro_content span:nth-of-type(2) {
  font-size: 1rem;
  margin-bottom: 10px;
}

.home_intro_content span:nth-of-type(3) {
  font-size: 1rem;
  margin-bottom: 25px;
}

/* CSS */
.competencies_btn {
  font-family: 'Poppins', sans-serif;
  appearance: none;
  background-color: #007bec;
  border-radius: 7px;
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  line-height: 20px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
}

.competencies_btn a {
  color: #fff;
}

#footer {
  background: #e8e7e5;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  width: 100%;
  padding: 150px;
  font-family: 'Poppins', sans-serif;
}

.footer_text {
  max-width: 980px;
  margin: auto;
}

.footer_messages {
  font-size: 1.3rem;
  font-weight: 400;
  background: #ffc466;
  padding: 10px 15px;
  display: inline-block;
}

.footer_text h1 {
  font-size: 3rem;
  font-weight: 400;
}

.footer_nav {
  display: flex;
  justify-content: flex-end;
}

.footer_nav a {
  margin-left: 50px;
  cursor: pointer;
}

.footer_nav i {
  margin-right: 5px;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ABOUT */
/* <!-- : Experience--> */
#experience {
  padding: 100px 100px 0 100px;
  max-width: 1200px;
  margin: auto;
}

#education {
  padding: 0 100px;
  max-width: 1200px;
  margin: auto;
}

.about_dy {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.9rem;
  margin-top: 40px;
}

.about_dy span {
  font-weight: 600;
}

.job_title,
.education_title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
}

.job_title span,
.education_title span {
  color: #434343;
  font-weight: 200;
  border-left: 4px solid #cdcdcd;
  padding-left: 10px;
}

.job_period {
  font-size: 0.8rem;
  line-height: 1.42rem;
  margin: 0 0 0 10px;
  padding-bottom: 10px;
  color: #3f3f3f;
}

.job_period span,
.education_period span {
  color: rgb(63, 63, 63);
}

.description {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  line-height: 1.75rem;
  font-weight: 300;
  margin-left: 10px;
}


#skills .description {
  width: 200px;
  margin: 0;
  padding: 0;
  margin-bottom: 25px;
}

.tools {
  padding-top: 10px;
}

.tools img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.tools img:last-of-type {
  margin-right: 0;
}

#skills_mobile {
  display: none;
}

.skills_icons img:first-of-type {
  margin-left: 0;
}

.skills_icons img {
  width: 50px;
  height: 50px;
  margin: 8px;
}

.skills_icons {
  display: flex;
  max-width: 1200px;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* <!-- Education--> */
.education_period {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  line-height: 1.42rem;
  margin: 4px 0 10px 10px;
  padding-bottom: 10px;
  color: rgb(63, 63, 63);
}

.education_detail {
  width: 100%;
  background-color: rgb(233 233 233);
  padding: 1rem;
  border-radius: 20px;
}

.education_courses {
  display: flex;
  border-top: 1px solid rgb(227, 227, 227);
}

.education_courses span {
  width: 300px;
}

.education_detail p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  line-height: 1.3rem;
  font-weight: 400;
  width: 100%;
}

.education_courses p {
  font-weight: 500;

}

.education_detail div {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5rem;
  font-weight: 300;
}

/* <!-- : Skills and attribute --> */
/* #skills {
  padding: 0 200px;
} */

.skills_title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.3em;
  font-weight: var(--weight-bold);
}

.skills_description {
  font-family: 'Mukta', sans-serif;
  font-size: .875rem;
  line-height: 1.4rem;
  max-width: 700px;
  margin-bottom: 20px;
}

.skillset {
  display: flex;
}



.skills {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.skillset_title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5em;
  font-weight: var(--weight-semi-bold);
  border-bottom: 1px solid #d4cfca;
  padding: 0 0 5px 0;
  width: 100%;
  margin-top: 0;
  margin-bottom: 15px;
}


.skills {
  font-family: 'Mukta', sans-serif;
  font-size: 0.85rem;
}

.skill_bar {
  background-color: #dddcd8;
  width: 100%;
  height: 12px;
  border-radius: var(--size-border--radius);
  margin-bottom: 10px;
  border: 1px solid #d3d3d3b0;
}

.skills i {
  margin: 0 3px;
}

.skill_value {
  height: 10px;
  background-color: #538cd4;
  border-radius: var(--size-border--radius);
  transition-property: background-color;
  transition-duration: 1s;
  animation-name: loading-bar;
  animation-duration: 1500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

.skill_value:hover {
  background-color: #2d7ac4;
}

.skill_percentage {
  font-weight: 600;
  font-size: 0.7rem;
  line-height: 22px;
}

.tools_list,
.courses_list,
.etc_list {
  font-family: 'Mukta', sans-serif;
  font-size: .875rem;
  line-height: 1.4rem;
  margin: 0 0 20px 0;
}

.udemy,
.redi {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 1rem;
}

.courses_list p {
  margin-left: 10px;
  font-size: 0.8rem;
  line-height: 19px;
  margin-top: -5px;
  margin-bottom: 50px;
  width: 90%;
}

.courses_list .skill_bar {
  margin-top: 10px;
}

.courses .skill_value {
  background-color: #7a9eca;
}

.courses_date {
  list-style: none;
  float: right;
  font-size: 0.75rem;
  color: rgb(131, 128, 124);
}

.cv_info {
  font-size: 0.9rem;
  margin-top: 50px;
  margin-bottom: 100px;
}

/* COMMON FOOTER */
#contact {
  padding: 0 100px 50px 100px;
}

#introduction {
  max-width: 1200px;
  margin: auto;
  font-family: 'Poppins', sans-serif;
}

.introduction_title h1 {
  font-size: 4rem;
  font-weight: 200;
  transition: all ease 1s;
  line-height: 5.5rem;
  color: #000000;
  margin-top: 100px;
}

.contact_links {
  display: flex;
}

.contact_links i {
  font-size: 2rem;
  margin: 30px 7px;
  color: #c0bdb9;
}

.contact_links i:hover {
  transform: scale(1.1);
  color: #252525;
}

.contact_container span {
  width: 30px;
  height: 3px;
  background-color: #272727;
  display: flex;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 50px;
}

.contact_rights {
  display: flex;
  justify-content: center;
  font-size: 0.75rem;
  padding: 0;
  font-weight: 400;
}

/* Form */
/* Form */
.form>div~div {
  margin-top: 20px;
}

.form>div.is-hidden {
  display: none;
}

.form-label {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 0.875rem;
  font-weight: 700;
}

.form-control {
  display: block;
  width: 100%;
  padding: 10px;
  font: 0.875rem/1.5 sans-serif;
  color: #333;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-sizing: border-box;
}

.shadow-sm {
  border: none !important;
}

/* PAGES */
#pages {
  max-width: 1200px;
  margin: auto;
  padding: 100px 100px 0 100px;
  margin-bottom: 0;
  font-family: 'Poppins', sans-serif;
}

.pages_title h1 {
  font-size: 4rem;
  font-weight: 200;
  transition: all ease 1s;
  line-height: 5.5rem;
  color: #000000;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

.pages_title span {
  font-weight: 500;
}

.pages_ex {
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.02rem;
}

/* Cases */
#cases {
  padding: 0 100px 0 100px;
  margin: 100px 0;
  max-width: 1200px;
  margin: auto;
}

.cases_section img {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 80%;
}


.cases_content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 50px 0;
  margin: 100px 0;
}


.cases_content h1 {
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -3px;
}

.project_description {
  text-align: center;
  font-size: 0.7rem;
  width: 60%;
  margin-bottom: 20px;
}

.cases_tool_section {
  margin-bottom: 10px;
}

.cases_tool {
  background-color: rgb(216, 216, 216);
  padding: 10px;
  border-radius: 1px;
  margin-bottom: 20px;
  font-size: 0.8rem;
  display: inline-block;
}

/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {

  #cursor {
    display: none;
  }

  #cursor-border {
    display: none;
  }

  .hovertext-p2 {
    display: none;
  }

  /* <!-- Toggle navbar menu --> */
  .nav_contents>nav {
    position: absolute;
    top: 36px;
    left: 100px;
    display: block;
  }

  #menuToggle {
    display: none;
  }

  #menuToggle {
    display: block;
    position: relative;
    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
  }

  #menu li:hover {
    font-weight: 500;
  }


  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
 * Just a quick hamburger
 */
  #menuToggle span {
    display: block;
    width: 23px;
    height: 1px;
    margin-bottom: 5px;
    position: relative;
    background: #2e2e2e;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }

  /*
 * But let's hide the middle one.
 */
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
 * Ohyeah and the last one should go the other direction
 */
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
 * Make this absolute positioned
 * at the top left of the screen
 */
  #menu {
    position: absolute;
    width: 100vw;
    margin: 28px 0 0 -100px;
    padding: 30px 50px;
    background: #fff;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    border-bottom: 5px solid #222;
  }

  #menu li {
    color: #222;
    padding: 10px 0;
    padding: 15px 12px;
    margin: 0 4px;
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
  }

  /*
 * And let's slide it in from the left
 */
  #menuToggle input:checked~ul {
    transform: none;
  }

  .navbar_menu {
    display: none;
  }

  #navbar {
    padding: 20px 50px;
  }

  .content {
    height: 50%;
  }

  .navbar_current {
    font-size: 0.7rem;
  }
}


/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
  #cursor {
    display: none;
  }

  #cursor-border {
    display: none;
  }

  .home_title h1 {
    font-size: 2rem;
    line-height: 3rem;
    margin-top: 100px;
  }

  .footer_messages {
    font-size: 1rem;
    font-weight: 400;
    background: #ffc466;
    padding: 10px 15px;
    display: inline-block;
  }

  #footer {
    padding: 100px;
  }

  .footer_text h1 {
    font-size: 2rem;

  }

  .m-scroll-title p {
    font-size: 5rem;
  }

  .wrapper-titles {
    height: 77px;
  }

  .skills_icons img {
    width: 28px;
    height: 28px;
    margin: 4px;
  }

  .pages_title h1 {
    font-size: 3rem;
  }

  .hovertext-p2 {
    display: none;
  }

  /* <!-- Toggle navbar menu --> */
  .nav_contents>nav {
    position: absolute;
    top: 36px;
    left: 100px;
    display: block;
  }

  #menuToggle {
    display: none;
  }

  #menuToggle {
    display: block;
    position: relative;
    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
  }

  #menu li:hover {
    font-weight: 500;
  }


  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
     * Just a quick hamburger
     */
  #menuToggle span {
    display: block;
    width: 23px;
    height: 1px;
    margin-bottom: 5px;
    position: relative;
    background: #2e2e2e;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
     * Transform all the slices of hamburger
     * into a crossmark.
     */
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }

  /*
     * But let's hide the middle one.
     */
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
     * Ohyeah and the last one should go the other direction
     */
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
     * Make this absolute positioned
     * at the top left of the screen
     */
  #menu {
    position: absolute;
    width: 100vw;
    margin: 26px 0 0 -100px;
    padding: 30px 50px;
    background: #fff;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    border-bottom: 5px solid #222;
  }

  #menu li {
    color: #222;
    padding: 10px 0;
    padding: 15px 12px;
    margin: 0 4px;
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
  }

  /*
     * And let's slide it in from the left
     */
  #menuToggle input:checked~ul {
    transform: none;
  }

  .navbar_menu {
    display: none;
  }

  #navbar {
    padding: 20px 50px;
  }

  .content {
    height: 50%;
  }

  .navbar_current {
    font-size: 0.7rem;
  }
}

@media all and (min-width:480px) and (max-width:654px) {
  #cursor {
    display: none;
  }

  #cursor-border {
    display: none;
  }

  .hovertext-container {
    width: 20px;
  }

  .home_intro {
    flex-direction: column-reverse;
  }

  .home_intro img {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 50px;
  }

  .home_intro_content {
    width: 100%;
  }
}

/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
  #cursor {
    display: none;
  }

  #cursor-border {
    display: none;
  }

  .home_title h1 {
    font-size: 2rem;
    line-height: 3rem;
    margin-top: 100px;
  }

  .footer_messages {
    font-size: 1rem;
    font-weight: 400;
    background: #ffc466;
    padding: 10px 15px;
    display: inline-block;
  }

  #footer {
    padding: 100px;
  }

  .footer_text h1 {
    font-size: 2rem;

  }

  .m-scroll-title p {
    font-size: 5rem;
  }

  .wrapper-titles {
    height: 77px;
  }

  .skills_icons img {
    width: 28px;
    height: 28px;
    margin: 4px;
  }

  .pages_title h1 {
    font-size: 3rem;
  }

  .hovertext-p2 {
    display: none;
  }

  /* <!-- Toggle navbar menu --> */
  .nav_contents>nav {
    position: absolute;
    top: 36px;
    left: 100px;
    display: block;
  }

  #menuToggle {
    display: none;
  }

  #menuToggle {
    display: block;
    position: relative;
    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
  }

  #menu li:hover {
    font-weight: 500;
  }


  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
       * Just a quick hamburger
       */
  #menuToggle span {
    display: block;
    width: 23px;
    height: 1px;
    margin-bottom: 5px;
    position: relative;
    background: #2e2e2e;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
       * Transform all the slices of hamburger
       * into a crossmark.
       */
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }

  /*
       * But let's hide the middle one.
       */
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
       * Ohyeah and the last one should go the other direction
       */
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
       * Make this absolute positioned
       * at the top left of the screen
       */
  #menu {
    position: absolute;
    width: 100vw;
    margin: 26px 0 0 -100px;
    padding: 30px 50px;
    background: #fff;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    border-bottom: 5px solid #222;
  }

  #menu li {
    color: #222;
    padding: 10px 0;
    padding: 15px 12px;
    margin: 0 4px;
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
  }

  /*
       * And let's slide it in from the left
       */
  #menuToggle input:checked~ul {
    transform: none;
  }

  .navbar_menu {
    display: none;
  }

  #navbar {
    padding: 20px 50px;
  }

  .content {
    height: 50%;
  }

  .navbar_current {
    font-size: 0.7rem;
  }

  .hovertext-container {
    width: 20px;
  }

  .home_intro {
    flex-direction: column-reverse;
  }

  .home_intro img {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 50px;
  }

  .navbar_current {
    display: none;
  }

  .home_intro_content {
    width: 100%;
  }

  .home_intro_content span:nth-of-type(1) {
    font-size: 1.3rem;
  }

  .m-scroll-title p {
    font-size: 3rem;
  }

  .wrapper-titles {
    height: 65px;
  }

  .footer_messages {
    font-size: 0.65rem;
  }

  .footer_text h1 {
    font-size: 1.3rem;
  }

  .footer_nav a {
    font-size: 0.75rem;
  }

  .pages_ex {
    font-size: 0.6rem;

  }

  #pages {
    padding: 50px 50px 0 50px;
  }

  #cases {
    padding: 0 50px 0 50px;
  }

  #footer {
    padding: 50px;
  }

  #experience {
    padding: 50px 50px 0 50px;
  }

  #education {
    padding: 0 50px;
  }

  #home {
    padding: 50px;
  }

  .home_intro {
    padding: 50px;
  }

  .nav_contents>nav {
    top: 33px;
  }

  #menu {
    margin: 24px 0 0 -100px;
  }

  .cases_content {
    margin: 30px 0;
  }

  .pages_title h1 {
    margin-bottom: 0;
  }

  .cases_content h1 {
    font-size: 1.5rem;
  }

  .max-w-md {
    margin-top: 0;
  }
}