@import url("https://fonts.googleapis.com/css2?family=Grechen+Fuemen&family=Montserrat+Alternates:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
--hue: 275;
--first-color: hsl(var(--hue), 80%, 49%);
--first-color-alt: hsl(var(--hue), 76%, 45%);
--white-color: hsl(0, 0%, 98%);
--black-color: hsl(0, 0%, 1%);
--text-color: hsl(var(--hue), 2%, 66%);
--body-color: hsl(var(--hue), 100%, 1%);
--container-color: hsl(var(--hue), 2%, 10%);
--conic-gradient: conic-gradient(from 150deg at 50% 45%,
                hsl(var(--hue), 80%, 20%) 0deg,
                hsl(var(--hue), 80%, 48%) 140deg,
                hsl(var(--hue), 80%, 20%) 360deg);

--body-font: "Montserrat Alternates", sans-serif;
--second-font: "Grechen Fuemen", cursive;
--biggest-font-size: 2.5rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;

--font-regular: 400;
--font-medium: 500;
--font-semi-bold: 600;

--z-tooltip: 10;
--z-fixed: 100;
}

@media screen and (min-width: 1168px) {
:root {
    --biggest-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
}
}

/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

/*=============== PAGE TRANSITION ===============*/
body {
    margin: 0;
    padding: 0;
    position: relative;
    animation: pageFade .5s ease;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("assets/background/back1.jpg") center/cover no-repeat;
    filter: blur(12px);          /* 👈 blur effect */
    transform: scale(1.1);       /* avoids edge gaps */
    z-index: -2;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.35); /* adjust darkness */
    z-index: -1;
}

.fade-out{
    opacity: 0;
    transform: translateY(20px);
    transition: .4s ease;
}

@keyframes pageFade{
    from{
        opacity: 0;
        transform: translateY(20px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

html {
scroll-behavior: smooth;
}

body,
input,
textarea,
button {
font-family: var(--body-font);
font-size: var(--normal-font-size);
}

body {
background-color: var(--body-color);
color: var(--white-color);
}

input,
button,
textarea {
border: none;
outline: none;
}

h1, h2, h3, h4 {
color: var(--white-color);
font-weight: var(--font-semi-bold);
}

ul {
list-style: none;
}

a {
text-decoration: none;
}

img {
display: block;
max-width: 100%;
height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
max-width: 1168px;
margin-inline: 1.5rem;
}

.grid {
display: grid;
gap: 1.5rem;
}

.section {
padding-block: 2rem 3rem;
}

.section__title {
font-size: var(--h2-font-size);
text-align: center;
margin-bottom: 2rem;
}

.main {
overflow: hidden;
}

/*=============== NAVBAR ===============*/
.nav {
    position: fixed;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    background-color: hsla(0, 0%, 98%, .1);
    width: 88%;
    margin-inline: auto;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1rem 2rem;
    border-radius: 4rem;
    z-index: var(--z-fixed);
}

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

.nav__img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.nav__link {
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    color: var(--white-color);
    font-size: 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background-color .6s;
}

.active-link{
background-color: var(--first-color);
}

/*=============== HOME ===============*/
.perfil {
    position: relative;
    background: var(--conic-gradient);
    height: 700px;
    border-radius: 2rem;
    padding: 1rem;
    display: grid;
    overflow: hidden;
}

.perfil__img{
    width: min(450px, 100%);
    bottom: -70px;
    max-width: 100%;
    position: absolute;
    justify-self: center;
    align-self: flex-end;
}

.perfil__data{
    align-self: flex-end;
    background-color: hsla(0, 0%, 1%, .1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1.5rem 1rem;
    border-radius: 1.5rem;
    border: 2px solid hsla(0, 0%, 100%, .5);
}

.perfil__name{
    font-family: var(--second-font);
    font-size: var(--biggest-font-size);
    font-weight: var(--font-regular);
    margin-bottom: 0.5rem;
}

.perfil__buttons{
    display: grid;
    column-gap: .5rem;
    grid-template-columns: repeat(2, 1fr);
}

.perfil__buttons .button{
    padding: .75rem 0;
}

.button{
    display: inline-flex;
    justify-content: center;
    background-color: var(--first-color);
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    padding: 1.25rem 2.5rem;
    border-radius: 4rem;
    transition: background-color .4s;
}

.button__black{
    background-color: var(--black-color);
}

.button:hover{
    background-color: var(--first-color-alt);
}

.info,
.about,
.skills{
    background-color: var(--container-color);
    padding: 2rem 1.5rem;
    border-radius: 2rem;
}

.info__circle{
    width: 2rem;
    height: 2rem;
    background-color: var(--first-color);
    border-radius: 50%;
}

.info__name{
    font-family: var(--second-font);
    font-size: var(--biggest-font-size);
    font-weight: var(--font-regular);
}

.info__data{
display: flex;
justify-content: center;
align-items: center;
column-gap: .5rem;
}

.info{
background-color: var(--container-color);
padding: 1.5rem 1em;
border-radius: 2rem;
overflow: hidden;
position: relative;
height: 100%;
}

.info__scroll {
position: relative;
overflow: hidden;
height: 300px;
margin-top: 1rem;
-webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
);

mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
);
}
.info__stickers{
display: flex;
flex-direction: column;
gap: -1rem;

animation: scrollUp 20s linear infinite;
}

.info__sticker{
width: 100%;
max-width: 500px;
aspect-ratio: 1/1;
object-fit: cover;

border-radius: 1.5rem;
}

@keyframes scrollUp{
0%{
    transform: translateY(0);
}

100%{
    transform: translateY(-50%);
}
}

/* About — minimal: name + button only */
.about__desk{
font-size: var(--small-font-size);
overflow-wrap: break-word;
word-break: break-word;
overflow-y: auto;
max-width: 95%;
line-height: 1.8;
}

.about__social{
display: flex;
justify-content: center;
top: auto;
margin-block: 2rem;
column-gap: 1.5rem;
}

.about__link{
width: 2.5rem;
height: 2.5rem;
background-color: var(--white-color);
color: var(--black-color);
font-size: 1.5rem;
border-radius: 50%;
display: grid;
place-items: center;
transition: background-color .4s, color .4s;
}

.about__link:hover{
background-color: var(--first-color);
color: var(--white-color);
}

.about__name{
align-self: center;
font-size: var(--normal-font-size);
font-weight: var(--font-regular);
margin-bottom: 0.5rem;
}

.about__image{
background: var(--conic-gradient);
height: 180px;
display: grid;
overflow: hidden;
}

.about__img{
    width: 100%;
    max-width: 500px;
    border-radius: 1rem;
    object-fit: cover;
}

.about .button{
width: 100%;
margin-top: auto;
}

.skills{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.skills__title{
font-size: var(--h2-font-size);
}

.skills__display{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.skills__main-icon{
    width: 160px;
    height: 160px;
    object-fit: contain;
    transition: .4s ease;
}

.skills__name{
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    transition: .4s ease;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
width: .6rem;
background-color: hsl(0, 0%, 20%);
border-radius: .5rem;
}

::-webkit-scrollbar-thumb{
background-color: hsl(0, 0%, 30%);
}

::-webkit-scrollbar-thumb:hover{
background-color: hsl(0, 0%, 40%);
} 

.scrollup{
position: fixed;
right: 1rem;
bottom: -50%;
background-color: hsla(0, 0%, 98%, .1);
display: inline-block;
padding: 6px;
color: var(--white-color);
font-size: 1.25rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: .5rem;
z-index: var(--z-tooltip);
transition: bottom .4s, transform .4s;
}

.scrollup:hover{
transform: translateY(-.5rem);
}

.show-scroll{
bottom: 8rem;
}

/*=============== MEDIA PLAYER ===============*/
.music-player{
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: min(360px, calc(100vw - 2rem));
    padding: 1rem;
    background-color: hsla(0, 0%, 98%, .1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 1.5rem;
    border: 2px solid hsla(0, 0%, 100%, .2);
    z-index: var(--z-fixed);
    box-sizing: border-box;
}

.music-player__top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .8rem;
}

.music-player__title {
font-size: var(--smaller-font-size);
color: var(--text-color);
}

.music-player__song {
font-size: var(--small-font-size);
font-weight: var(--font-medium);
}

.music-player button {
background-color: var(--first-color);
color: var(--white-color);

width: 38px;
height: 38px;

border-radius: 50%;
display: grid;
place-items: center;

cursor: pointer;
transition: .3s;
}

.music-player button:hover {
background-color: var(--first-color-alt);
transform: scale(1.1);
}

/* 🎵 BAR */
.music-player__bar {
width: 100%;
height: 6px;

background: hsla(0, 0%, 100%, .15);
border-radius: 10px;

overflow: hidden;
}

.music-player__progress {
width: 0%;
height: 100%;

background: var(--first-color);
border-radius: 10px;

transition: width .1s linear;
}

/*=============== Small Devices ===============*/
@media screen and (max-width: 320px){
.container{
    margin-inline: 1rem;
}

.nav{
    padding: 1rem;
}
}

/*=============== Medium Devices ===============*/
@media screen and (min-width: 540px){
.nav{
    width: max-content;
    margin-bottom: -10px;
}

.about__name{
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.home__container{
    grid-template-columns: 400px;
    justify-content: center;
}

}

/*=============== MOBILE FIXES ===============*/
@media screen and (max-width: 768px){

    /* NAV FIX */
    .nav{
        width: max-content;
        padding: .9rem 1.5rem;
        bottom: 1rem;
        border-radius: 3rem;
    }

    .nav__list{
        justify-content: center;
        gap: 1rem;
    }

    .nav__link{
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.4rem;
    }

    /* HOME CONTAINER BOTTOM SPACE */
    .home__container{
        padding-bottom: 4rem;
    }

    /* BIGGER PERFIL IMAGE */
    .perfil{
        height: 620px;
    }

    .perfil__img{
        height: 105%;
        width: 115%;
        max-width: 520px;
        bottom: -20px;
    }

    /* SAME HEIGHT PERFIL & INFO */
    .info{
        height: 620px;
        display: flex;
        flex-direction: column;
    }

    .info__scroll{
        flex: 1;
        height: auto;
    }

    /* STICKER IMAGE SIZE */
    .info__sticker{
        width: 100%;
        max-width: 100%;
        border-radius: 1.2rem;
    }

    /* ABOUT SECTION */
    .about{
        padding-bottom: 2rem;
    }

    .about__img{
        width: 100%;
        height: 220px;
        object-fit: cover;
        margin-bottom: 0.5rem;
    }
}

/*=============== Large Devices ===============*/
@media screen and (min-width: 1200px){
.container{
    margin-inline: auto;
}

.section{
    padding-block: 3rem 4rem;
}

.section__title{
    font-size: var(--h1-font-size);
    margin-top: 4rem;
}

.home__container{
    grid-template-columns: 280px 450px 400px;
    align-items: stretch;
}

.perfil{
    grid-column: 2/3;
    grid-row: 1/3;
    padding: 2rem;
}

.perfil__img{
    width: 450px;
}

.perfil__data{
    width: 370px;
    padding: 1.5rem;
    border-radius: 2rem;
}

.info{
    grid-column: 1/2;
    grid-row: 1/2;
}

.info__name{
    font-size: var(--h3-font-size);
}

/* about spans full height of right column */
.about{
    grid-column: 3/4;
    grid-row: 1/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
}

.about__name{
    font-size: var(--h2-font-size);
    margin-bottom: 0;
}

.about .button{
    width: 100%;
}

.skills{
    grid-column: 1/2;
    grid-row: 2/3;
}

.skills__title{
    font-size: var(--h3-font-size);
}
}

@media screen and (min-width: 1500px){
.nav{
    width: max-content;
    height: max-content;
    padding: 2rem 1rem;
    left: initial;
    right: 3rem;
    top: 0;
    bottom: 0;
    margin-block: auto;
}

.nav__list{
    flex-direction: column;
    row-gap: 1.25rem;
}

.scrollup{
    right: 4rem;
}
}