/* Imports */
@import url('variables.css');

::-webkit-scrollbar { width: .5rem; border-radius: .25rem; background-color: var(--container-color); }
::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: .25rem; }
::-webkit-scrollbar-track { border-radius: 1.5rem; }

* { box-sizing: border-box; padding: 0; margin: 0; }
h1, h2, h3 { color: var(--title-color); font-weight: var(--font-semibold); }
a { text-decoration: none; }
ul { list-style: none; }
html { scroll-behavior: smooth; }
body { height: 100%; background-color: var(--body-color); color: var(--text-color); font-size: var(--font-size-normal); font-family: var(--body-font); transition: .4s; }
img { max-width: 100%; height: auto; }
header { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--body-color); z-index: var(--z-fixed); transition: .4s; }

/* Classes */
header.scroll { box-shadow: 0 4px 4px hsla(0, 0%, 4%, .3); }
.container { max-width: 968px; margin-left: 1rem; margin-right: 1rem; }
.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; }
.nav .logo { color: var(--primary-color); font-weight: var(--font-medium); transition: .4s; }
.nav-menu { position: fixed; bottom: 1rem; background-color: hsla(var(--secondary-hue), 32%, 16%, .8); width: 90%; border-radius: 4rem; padding: 1rem 2.25rem; backdrop-filter: blur(10px); transition: .4s; }
.nav-menu ul { display: flex; justify-content: space-between; align-items: center; }
.nav-menu ul a { color: var(--text-color); font-size: 1.25rem; padding: .4rem; font-weight: var(--font-medium); transition: .4s; display: flex; border-radius: 5rem; }
.nav-menu ul a.active { color: var(--title-color); background: linear-gradient(180deg, hsla(var(--primary-hue), var(--sat), var(--lig), .5), hsla(var(--primary-hue), var(--sat), var(--lig), .2)); box-shadow: 0 0 16px hsla(var(--primary-hue), var(--sat), var(--lig), .4); }

.section { padding: 4.5rem 0 1rem; }
.home.container { position: relative; row-gap: 4.5rem; padding-top: 2rem; }
.grid { display: grid; gap: 1.25rem; }
.section-subtitle { display: block; font-size: var(--font-size-smaller); color: var(--text-color-light); }
.section-title, .section-subtitle { text-align: center; }
.section-title { font-size: var(--font-size-section-title); color: var(--primary-color); margin-bottom: 2rem; }

.button { display: inline-block; background-color: var(--primary-color); color: var(--body-color); padding: .75rem 1rem; border-radius: .8rem; font-weight: var(--font-medium); transition: .4s; }

/* Home section */
.home-data { text-align: center; }
.home-data .greeting { display: block; color: var(--title-color); margin-bottom: .25rem; }
.home-data .greeting, .home-data .title { font-size: var(--font-size-small); font-weight: var(--font-medium); }
.home-data .name { font-size: var(--font-size-biggest); color: var(--primary-color); }
.home-data .title { color: var(--text-color); margin-bottom: 2.5rem; }

.home-handle { justify-self: center; width: 190px; height: 293px; background: linear-gradient(180deg, hsla(var(--primary-hue), var(--sat), var(--lig), 0.5), hsla(var(--primary-hue), var(--sat), var(--lig), 0.1)); border-radius: 10rem 10rem 1rem 1rem; display: flex; align-items: end; justify-content: center; overflow: hidden; }
.home-handle picture { max-height: 190px; }
.home-img { width: 200px; }

.home-social { bottom: 4rem; left: 0; display: grid; row-gap: .5rem; position: absolute; }
.home-social a { width: max-content; background-color: var(--container-color); color: var(--primary-color); padding: .25rem; border-radius: .5rem; display: flex; font-size: 1rem; transition: .4s; }
.home-social a:hover { background-color: var(--primary-color); color: #fff; }
.home-social::after { content: ""; width: 32px; height: 1px; background-color: var(--primary-color); transform: rotate(90deg) translate(16px, 4px); }

/* About section */
.about-container { row-gap: 2.5rem; }
.about-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 2rem; }
.about-box { background-color: var(--container-color); border-radius: .75rem; padding: .75rem .5rem; }
.about-description { margin-bottom: 2rem; }

/* Skills section */
.skill-container { row-gap: 2rem; padding-top: 1rem; }
.skill-content { background-color: var(--container-color); padding: 1.5rem; border-radius: 1.25rem; }
.skills-title { font-size: var(--font-size-normal); font-weight: var(--font-medium); color: var(--primary-color); text-align: center; margin-bottom: 1.5rem; }
.skill-box { display: flex; justify-content: center; column-gap: 2.5rem; }
.skill-group { display: grid; align-content: flex-start; row-gap: 1rem; }
.skill-data { display: flex; column-gap: .5rem; }
.skill-data .fa-badge-check { font-size: 1rem; color: var(--primary-color); }
.skill-name { font-size: var(--font-size-normal); font-weight: var(--font-medium); line-height: 14px; }
.skill-level { font-size: var(--font-size-small); }

/* Work section */
.work-container { padding-top: 1rem; }
.work-card { background-color: var(--container-color); padding: 1rem; border-radius: 1rem; }
.work-title { font-size: var(--font-size-normal); font-weight: var(--font-medium); }
.work-title, .work-description { margin-bottom: .25rem; }
.work-button { width: max-content; color: var(--primary-color); font-size: var(--font-size-small); display: flex; align-items: center; column-gap: .25rem; cursor: pointer; }
.work-icon { font-size: 1rem; transition: .4s; }
.work-button:hover .work-icon { transform: translateX(.25rem); }

.work-timeline { position: relative; margin: 0 auto; }
.work-timeline::after { content: ''; position: absolute; width: 6px; background-color: var(--primary-color); top: 0; bottom: 0; left: 31px; margin-left: -3px; }
.timeline-container { width: 100%; padding: 10px 25px 10px 70px; position: relative; background-color: inherit; }
.timeline-container::after { content: ''; position: absolute; width: 25px; height: 25px; right: 15px; left: 15px; background-color: var(--container-color); border: var(--primary-color) 4px solid; top: 15px; border-radius: 50%; z-index: 1; }
.timeline-container:nth-child(odd) { left: 0; }
.timeline-container::before { content: ''; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 60px; border: var(--container-color) medium solid; border-width: 10px 10px 10px 0; border-color: transparent var(--container-color) transparent transparent; }
.timeline-item { padding: 20px 30px; background-color: var(--container-color); position: relative; border-radius: 6px; color: var(--text-color); }
.company-name { margin-bottom: .25rem; }

/* Footer */
.footer-container { padding: 2rem 0 6rem; }
footer { background-color: var(--primary-color); }
footer h2 { margin-bottom: 2rem; font-weight: var(--font-semibold); }
footer h2, footer span { color: var(--body-color); text-align: center; }
footer span { display: block; margin-top: 2.5rem; font-size: var(--font-size-smaller); margin-bottom: 2rem; }
.footer-social { display: flex; justify-content: center; align-items: center; column-gap: 1.25rem; }
.footer-social li a { background-color: var(--body-color); color: var(--primary-color); padding: .35rem; border-radius: .25rem; font-size: 1rem; display: inline-flex; transition: opacity .3s ease-in-out; }
.footer-social li a:hover { opacity: .6; }

@media screen and (min-width: 435px) {
    .work-container { justify-content: center; grid-template-columns: repeat(2, max-content); }
}

@media screen and (min-width: 630px) {
    .nav-menu { width: 328px; left: 0; right: 0; margin: 0 auto; }

    .about-info { grid-template-columns: repeat(2, 270px); justify-content: center; }
    .about-box { padding: 1.75rem .95rem; }
    .about-description { padding: 1rem 5rem; width: 600px; margin: 0 auto 2rem auto; }

    .skill-container { justify-content: center; }
    .skill-content { padding: 4rem 8.8rem; }
    .skills-title { font-size: var(--font-size-section-subtitle); margin-bottom: 1.5rem; }
    .skill-box { column-gap: 5.5rem; }

    .work-timeline::after { left: 50%; }
    .timeline-container { padding: 10px 40px; width: 50%; }
    .timeline-container::after { right: -17px; left: initial; }
    .timeline-container:nth-child(even) { left: 50%; }
    .timeline-container:nth-child(odd)::before { left: initial; right: 30px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent var(--container-color); }
    .timeline-container:nth-child(even)::before { left: 30px; border-width: 10px 10px 10px 0; border-color: transparent var(--container-color) transparent transparent; }
    .timeline-container:nth-child(even)::after { left: -16px; }
    .company-name { margin-bottom: .5rem; }
}

@media screen and (min-width: 992px) {
    .container { margin-left: auto; margin-right: auto; }
    .nav { height: calc(var(--header-height) + 1rem); }
    .section { padding: 6.5rem 0 1rem; }
    .section-title { margin-bottom: 3.5rem; }

    .home-handle { width: 290px; height: 400px; }
    .home-handle picture { max-height: 290px; }
    .home-img { width: 100%; }
    .home-social a { padding: .4rem; font-size: 1.25rem; }
    .home-social::after { transform: rotate(90deg) translate(16px, -1px); }

    .about-container { grid-template-columns: repeat(2, 1fr); align-items: center; column-gap: 4rem; }
    .about-info { gap: 2rem; justify-content: initial; }
    .about-box { padding: 1rem 1.25rem; text-align: center; }
    .about-description { padding: 0 4rem 0 0; margin-bottom: 2.5rem; }

    .skill-container { grid-template-columns: repeat(2, 460px); column-gap: 3rem; }
    .skills-title { margin-bottom: 3.5rem; }

    .work-container { grid-template-columns: repeat(3, 290px); gap: 3rem; }
    .work-card { padding: 1.25rem; }
    .work-title, .work-description { margin-bottom: .5rem; }

    .footer-social li a { font-size: 1.25rem; padding: .4rem; border-radius: .5rem; }
}