/* Global */
:root {
    /* App Colors */
    --color-primary: var(--color-black);
    --color-primary-variant: var(--color-gray);
    --color-accent: var(--color-purple);
    --color-accent-variant: var(--color-orange);
    --color-text: var(--color-white);


    /* Background */
    --home-bg-gradient:linear-gradient(180deg,rgba(13, 43, 99, 1) 0%, rgba(5, 10, 19, 1) 100%);

    /* Colors */
    --color-white: #ffffff;
    --color-black: #050a13;
    --color-blue: #03e8f9;
    --color-orange: #fd6413;
    --color-gray: #1b1e26;
    --color-green:#80D8C3;
    --color-yellow:#FFD66B;
    --color-purple:#EB5AE5;

    /* size */
    --size-max-width: 1200px;

}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', 'Noto Sans Korean', sans-serif;
    margin: 0;
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
}
a {
    text-decoration: none;
    color: var(--color-text);
}

button {
    background-color: transparent;
    outline: 0;
    border: 0;
}

button:focus {
    outline: 1px solid transparent;
}

/* Common */
.section {
    padding: 4rem;
    text-align: center;
}

.title {
    font-size: 2.5rem;
    margin: 1rem 0;
}

.description{
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.max-container {
    max-width: var(--size-max-width);
    margin: auto;
}

/* Header */
.header {
    background-color: #050a13;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    /* 헤더 부분을 가장 높은 부분으로 올 수 있도록 명령 */
    transition: all 300ms ease;
}

.header--dark {
    background-color: var(--color-primary);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header__logo__img {
    width: 36px;
    height: 36px;
}

.header__logo__title {
    font-size: 1.8rem;
}

.header__toggle {
    display: none;
    color: var(--color-white);
    font-size: 1.5rem;
    position: absolute;
    /* 기존의 플렉스 방향에서 벗어나게 함 */
    top: 1.3rem;
    right: 1rem;
}

.header__menu {
    display: flex;
    gap: 4px;
}

.header__menu__item {
    display: block;
    padding: 8px 16px;
    border-bottom: 1px solid transparent;
}

.header__menu__item:hover {
    border-bottom: 1px solid var(--color-accent);
}

.header__menu__item.acctive {
    border: 1px solid var(--color-accent);
    border-radius: 4px;
}


/* Home */
#home {
    position: relative;
    background-color: var(--color-primary);
    background: var(--home-bg-gradient);
    color: var(--color-text);
    padding: 5rem 1rem;
    padding-top: 7rem;
    text-align: center;
}
.home__divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.home__divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 64px;
}

.home__divider .shape-fill {
    fill: #FFFFFF;
}

.home__avatar {
    width: 250px;
    height: 250px;
    object-fit: cover;
    /* 이미지 비율을 원래 비율로 만들어 주는것 */
    border-radius: 100%;
    border: 3px solid var(--color-accent);
}

.home__title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.home__title--strong {
    color: var(--color-accent);
}

.home__description {
    font-size: 1.3rem;
}

.home__contact {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-black);
    margin: 2rem;
    padding: 0.5rem 1rem;
    font-weight: bold;
    border-radius: 4px;
}

.home__contact:hover {
    background-color: transparent;
    color: var(--color-text);
    outline: 2px solid var(--color-accent);
    /* outline은 border와 다르게 컨텐츠의 높이가 너비를 지정하지 않아도 컨텐츠 밀림 현상이 일어나지 않는다
     */
}

/* About */
.majors {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin: 2.5rem 0 4rem;
}

.major {
    position: relative;
    background-color: var(--color-primary-variant);
    color: var(--color-text);
    border-radius: 1rem;
    cursor: default;
    box-shadow: 4.0px 8.0px 8.0px rgba(0,0,0,0.38);
}
.major::before,
.major::after {
    content: ""; /* 가상 요소는 반드시 content 필요 (빈 문자열이라도) */
    position: absolute;
    z-index: -1;
    transition: all 400ms ease-in-out;
}
.major::before {
    inset: -1em 10%;
    border-top: 0.2em solid var(--color-accent);
    border-bottom: 0.2em solid var(--color-accent);
    transform: skewY(10deg);
}
.major:hover::before {
    inset: -1em 8%;
    transform: skewY(0deg);
}
.major::after {
    inset: 4em -0.5em;
    border-left: 0.2em solid var(--color-accent);
    border-right: 0.2em solid var(--color-accent);
    transform: skew(10deg);
}
.major:hover::after {
    inset: 3em -0.5em;
    transform: skew(0deg);
}

.major__data {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    padding: 2rem 2rem;
    height: 100%;
    width: 100%;
    overflow: hidden;

}

.major__icon {
    height: 80px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: var(--text-color);
    background-color: var(--color-primary);
    transition: all 400ms ease-in-out;
}
 .major__icon {
    color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 6px var(--color-accent);
}

.major:hover .major__icon {
    color: var(--color-primary);
    background-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 300px var(--color-accent);
}

.major__content p {
    transition: all 400ms ease-in-out;
}

.major__title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.major:hover .major__content p {
    color: var(--color-primary);
}

.jobs {
    text-align: start;
}

.job {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.job__name {
    color: var(--color-primary);
}

.job__period {
    color: var(--color-primary);
    font-size: 0.8rem;
}

.job__img {
    width: 90px;
    height: 40px;
    object-fit: cover;
}

/* Skills */
#skills {
    position: relative;
    background-color: var(--color-primary-variant);
    color: var(--color-text);
}
.skills__divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.skills__divider svg {
    position: relative;
    display: block;
    width: calc(116% + 1.3px);
    height: 64px;
}

.skills__divider .shape-fill {
    fill: var(--color-primary);
}

.skills__container {
    display: grid;
    grid-template-columns: 6fr 4fr;
    /* 총 2개의 행을 각각 6배 4배 비율로 만들어 주는 명령 */
    margin: 2rem 3rem;
    border-radius: 8px;
    overflow: hidden;
    /* 혹시나 내 자식 요소중에 내 컨테이너 밖으로 나온 요소가 있다면 숨기기위한 명령 */
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 
    0 12.5px 10px rgba(0, 0, 0, 0.06), 
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 
    0 41.8px 33.4px rgba(0, 0, 0, 0.086), 
    0 100px 80px rgba(0, 0, 0, 0.12)
}
.skills__title{
    color: var(--color-accent);
    margin: 1rem 0;
    font-size: 1.2rem;
}

.skills__coding {
    grid-row: span 2;
    padding: 1rem;
    background-color: var(--color-primary);
}

.skills__tools {
    padding: 1rem;
}

.skills__etc {
    padding: 1rem;
    background-color: var(--color-primary);
    filter: brightness(150%);
    /* 함수로 여러 색을 넣지 않아도 필터를 이용해서 비슷한 색을 표현할 수 있음 */

}

.bar {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
}

.bar__metadata {
   display: flex;
   justify-content: space-between;
}

.bar__bg {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary-variant);
}

.bar__value {
    height: 3px;
    background-color: var(--color-accent);
}

/* Work */
#work {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.categories {
    display: flex;
    justify-content: center;
    margin: 2.5rem;
    gap: 1rem;
}

.category {
    position: relative;
    color: var(--color-text);
    font-size: 1.1rem;
    padding: 0.5rem 3rem;
    border-radius: 4px;
    border: 1px solid var(--color-accent);
    cursor: pointer;
    white-space: nowrap;
    /* white-space(공백 처리는) nowrap(랩핑 되지 않도록)공간이 없을 때 글자가 줄 바꿈 되지 않도록 하는 명령  */
}

.category--selected {
    background-color: var(--color-accent);
    color: var(--color-primary) ;
}

.category__count {
    opacity: 0;
    position: absolute;
    top: -20px;
    right: 16px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 100%;
    background-color:  var(--color-accent-variant);
    color: var(--color-text);
    transition: all 250ms ease-in;
}

.category--selected .category__count,
.category:hover .category__count {
    opacity: 1;
    top: 0;
}

.projects {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 일정하게 1배율로 4번 반복*/
    grid-template-rows: repeat(2, 1fr);
    /* 1배율로 2번 반복 */
    gap: 1rem;
    transition: all 250ms ease-out;
}

.projects.anim-out {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
}

.project {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.project__img {
    width: 100%;
}

.project__metadata {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    opacity: 0;
    display: flex;
    flex-direction: column;
    /* 플렉스 정렬을 수평정렬이기 때문에 반대로 해주는 명령 */
    justify-content: center;
    align-items: center;
    transition: all 250ms ease-in;
    transform: translateY(-10px);
    /* hover일 떄 각도를 0px로 바꾸면서 스를스르륵 내려오는 느낌이 나게 하는 명령 */
}

.project__metadata:hover {
    opacity: 0.8;
    transform: translateY(0px);
}

.project__title::after {
    content: '';
    /* 실제 안에 내용은 x 라는 의미 */
    display: block;
    /* display 는 블록 요소로 만들어 줄거고 */
    position: relative;
    /* 포지션은 상대적으로 가지고 갈거라는 의미 */
    left: 50%;
    transform: translateX(-50%);
    /* x축으로만 -50% 이동하게 설정 */
    margin: 0.5rem 0;
    width: 50px;
    height: 2px;
    background-color: var(--color-accent);
}
/* html 문서상으로는 존재하지 않지만, css로만 (꾸미기 용으로만)
project__title다음에 가상의 요소가 생기게 하는 명령 */
/* title 요소 이전에 넣고싶다면 before 사용가능 */
  


/* Arrow up */

.arrow-up {
    background-color: var(--color-primary);
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    font-size: 3rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 100%;
    text-align: center;
    box-shadow: 5px 5px 0px 0px var(--color-accent);
    transition: opacity 300ms ease-in;
}

/* Footer */
#contact{
    background-color: var(--color-primary-variant);
    color: var(--color-text);
}
.contact__link {
    transition: color 250ms ease-in;
}

.contact__link:hover {
    color: var(--color-accent);
}




@media screen and (max-width: 768px) {
    .section {
        padding: 4rem 2rem;
    }

    .title {
        font-size: 2rem;
    }
    
    .description {
        font-size: 1rem;
    }

    .header {
        flex-direction: column;
        align-items: start;
        /* 수직으로 왼쪽에서부터 시작하는 */
        background-color: var(--color-primary);
    }

    .header__toggle {
        display: block;
    }

    .header__menu {
        display: none;
        flex-direction: column;
        text-align: center;
        margin: 1rem 4rem;
        /* 틈의 크기를 콘텐츠로 포함하지 않기 위해 padding이 아닌 margin으로 변경
        (작은 화면에서 터치 실수가 없도록) */
        gap: 1rem;
    }

    .header__menu.open {
        display: flex;
    }

    .header__nav {
       width: 100%; 
    }

    #home {
        padding-bottom: 3rem;
    }

    .home__title {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }

    .majors {
       flex-direction: column; 
       /* 모바일 버전에선 카드들이수평으로 정렬되어있으면
       너무 비좁아보이니 수직으로 바꿈 */
       align-items: center;
    }

    .major {
        max-width: 25rem;
    }

    .major::before {
        inset: -0.5em 5%;
        border-width: 0.2em;
    }

    .major::after {
        inset: 2.5em -0.3em;
        border-width: 0.2em;
    }

    .job {
        justify-content: center;
    }

    .skills__container {
        grid-template-columns: 1fr;
    }

    .categories {
        flex-direction: column;
    }

    .category {
        width: 100%;
    }

    .projects {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial {
        flex-direction: column;
    }

    .testimonial:nth-child(even) .testimonial__img {
        order: 0;
    }

    .arrow-up {
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
        bottom: 1.5rem;
        right: 1.5rem
    }


}