/* =========================================
   GLOBAL
========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 1040px) {
    html,
    body {
        overflow: hidden;
    }
}

body {
    font-family: Glacial, sans-serif;
    color: #fff;
    background: #493dda;
    
    
}


body canvas {
z-index: -1;
}

div[data-aifx-wm] {
    display: none;
}
/* =========================================
   FONTS
========================================= */

@font-face {
    font-family: Glacial;
    src: url("font/GlacialIndifference-Regular.otf");
    font-weight: 400;
}

@font-face {
    font-family: Glacial;
    src: url("font/GlacialIndifference-Bold.otf");
    font-weight: 700;
}


/* =========================================
   BACKGROUND
========================================= */

body::after {
    content: "";

    position: fixed;

    width: 130%;
    height: 72%;

    left: -15%;
    bottom: -30%;

    border-radius: 50% 50% 0 0;

    background: radial-gradient(
        ellipse at center,
        #776adc 0%,
        transparent 70%
    );

    pointer-events: none;

    z-index: -1;
}


/* =========================================
   MAIN CONTAINER
========================================= */

.container {
        width: 1440px;
    max-width: 80%;
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;

    overflow: hidden;
    padding-right: 2%;
            position: relative;
}


/* =========================================
   SIDE NAVIGATION
========================================= */

.side-nav {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        backdrop-filter 0.35s ease,
        -webkit-backdrop-filter 0.35s ease;
}

.side-nav.open {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(80, 67, 238, 0.23);
    height: 100vh;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        backdrop-filter 0.35s ease,
        -webkit-backdrop-filter 0.35s ease;
}

.side-nav a {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 16px;
    margin: 16px 0;
    padding: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 2px;

    opacity: 0.4;

    transition:
        opacity 0.25s ease;
}

.side-nav a.active {
    opacity: 1;

    font-weight: 700;
}

.nav-number {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 14px;
    font-weight: 400;
}

.menu-toggler {
    position: fixed;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    z-index: 1000;
}
.menu-toggler svg {
width: 30px;
    height: 30px;
}
.menu-toggler {
    display: none;
}


.section-navigator{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 10;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: #6759ffb0;
    flex-direction: row;
    backdrop-filter: blur(4px);
    border-top: 1px solid #ffffff30;
}
.section-navigator{
    display:none;
}
.section-navigator button{
    color: #fff;
    border: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: 'Montserrat';
    background: none;
    width: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-navigator .next-section 
{

    justify-content: flex-end;
    border-left: 1px solid #ffffff38;
}
.section-navigator .prev-section 
{

    justify-content: flex-start;
}

.section-navigator .next-section svg{
        transform: rotate(90deg);
    height: 16px;
    width: 16px;
}
.section-navigator .prev-section svg{
        transform: rotate(270deg);
    height: 16px;
    width: 16px;
}


/* =========================================
   CONTENT VIEWPORT
========================================= */

.content {
 position: relative;
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
       margin-left: 5%;
    
}

.content section {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(30px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        visibility 0.5s ease;
}

.content section.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}


#info,
#education,
#experience,
#websites,
#contact {
    align-items: center;
}

/* =========================================
   HEADINGS
========================================= */

h2 {
        margin-top: 0;

    font-family: Montserrat, sans-serif;

    font-size: 32px;
    font-weight: 900;

    text-align: center;

    letter-spacing: 1px;
}


/* =========================================
   INFO
========================================= */

#info p.bio{
        letter-spacing : 1px;
        
}


#info h1{
        margin : 0;
        margin-bottom: 41px;
}

#info h1 span{
         font-size: clamp(28px, 4vw, 56px);
    text-shadow: 0px 5px 65px #00000030;
    line-height: 1;
    letter-spacing: -1px;
    color: #ffffff;
    font-family: 'Montserrat';
    FONT-WEIGHT: 900;
        position: relative;
    display: block;
    color: white;
    text-shadow: .03em .03em 0 #493dda; 
    letter-spacing: 2px;
  
}

#info p.hello{
       font-size: clamp(28px, 4vw, 56px);
    padding: 0;
    font-family: 'Montserrat';
    FONT-WEIGHT: 900;
      margin: 22px 0 8px 0;
    
}


  
  #info h1 span:after {
      display: none;
    content: attr(data-shadow);
    position: absolute;
        top: 4px;
    left: 4px;
    z-index: -1;
    text-shadow: none;
    background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
    animation: shad-anim 15s linear infinite;
    }

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
  }
  
  
#info h2{
       background: #ff50c4;
    margin-bottom: 0;
    font-size: 20px;
    width: fit-content;
        margin-bottom: 24px;
}

.info-container{
       display: flex;
    gap: 2%;
    align-items: flex-start;
}

#info p.location{
     margin-top: 40px;
    color: #ffffff;
    border-left: 3px solid #ff50c4;
    padding-left: 8px;
}


.title-container{
    width: fit-content;
        max-width: 55%;
}

.photo-container{
    width: 43%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start;
    background: #ff56c600;
    justify-content: flex-start;
}

.photo {
width: 100%;
    max-width: 349px;
    border-radius: 106px;
    /* border: 5px solid #ffffff; */
    box-shadow: 4px 7px 43px -29px #000000d4;
    object-fit: cover;
}

.photo-icon{
       width: 67px;
    position: absolute;
    bottom: -18px;
    left: 175px;
    transform: rotate(345deg);
}

 
 


/* =========================================
   EDUCATION
========================================= */



#education .education-school , #education .education-seminars{
        width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 20px 25px;
    border-radius: 16px;
    /* background-color: #ffffff0f; */
    border: 1px solid #ffffff85;
    backdrop-filter: blur(81px);
    -webkit-backdrop-filter: blur(81px);
    box-shadow: 0 0 66px -15px #0000001f;
    transition: transform 0.3s ease, background-color 0.3s ease;
    
}


#education .education-school:hover, #education .education-seminars:hover {
    transform: translateY(-4px);

    background-color: #ffffff18;
}



#education .education-school .card{
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
}

#education .education-school .card h3{
        font-size: 14px;
}

#education .education-school .card p.title{
       font-size: 20px;
}
    

#education .education-school .card p.current{
       background: #ff50c4;
    color: #ffffff;
    padding: 0px 4px;
    font-weight: bolder;
    
}

#education .seminars-list{
     display: flex;
    gap: 24px;
    flex-wrap: wrap;
        justify-content: flex-start;
}

#education .seminars-list .card{
    

}


#education .seminars-list .card p{
       color: rgb(255 255 255 / 50%);
           margin-bottom: 10px;
               font-size: 14px;

    margin-top: 0;

}





#education .seminars-list .card h3{
font-size: 16px;
    font-weight: 100;
    margin-bottom: 10px;
}
   



/* =========================================
    SKILLS
========================================= */

#skills .card {
    width: 100%;
    max-width: 100%;

    margin: 0 0 24px;
    padding: 20px 32px;

    border-radius: 16px;

    background-color: #ffffff0f;

    border: 1px solid #ffffff2e;

    backdrop-filter: blur(81px);
    -webkit-backdrop-filter: blur(81px);

    box-shadow: 0 0 66px -15px #0000001f;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

#skills .card:last-child {
    margin-bottom: 0;
}

#skills .card:hover {
    transform: translateY(-4px);

    background-color: #ffffff18;
}


#skills .card h3 {
    margin: 0 0 10px;

    font-size: 20px;
    font-weight: 700;
}

#skills .card p {
    margin: 0;

    font-size: 17px;
    line-height: 1.6;

    overflow-wrap: break-word;
}


#skills {
    align-items: stretch;
}

/* =========================================
    experience
========================================= */

#experience .card {
   display : flex;
    width: 100%;
    max-width: 100%;
    padding: 8px 8px;
   
    border-top: 1px solid #ffffff42;
    overflow: hidden;
    transition: transform 0.3s ease, background-color 0.3s ease;
    justify-content: space-between;
    align-items: center;
}

#experience .card:last-child {
    border-bottom: 1px solid #ffffff42;
}

#experience .card:hover {
    transform: translateY(-4px);


}


#experience .card h3 {
       font-size: 26px;
    font-weight: 500;
}

#experience .card p.place {
     margin: 0;
    font-size: 18px;
    line-height: 1.6;
    overflow-wrap: break-word;
    color: hsl(0deg 0% 100% / 50%);

    overflow-wrap: break-word;
}
#experience .card p.date {
       margin: 0;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: break-word;
    color: rgb(255 255 255 / 50%);
    letter-spacing: 0.5px;
}

#experience .card p.date.current {
    background: #ff50c4;
    color: #ffffff;
    padding: 0px 4px;
    font-weight: bolder;
}



/* =========================================
    websites
========================================= */



#websites p.description{
         font-size: 14px;
    letter-spacing: 1px;
    color: rgb(255 255 255 / 50%);
    font-weight: 100;
    text-align: center;
}

#websites .project-list {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 28px;
    flex-wrap: wrap;

}


#websites .project-list .card {
       padding : 10px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 16px;
    font-size: 20px;
    /* background: #ffffff0d; */
     border-radius: 12px;
    text-decoration: none;
    color: #FFF;
    transition: all 0.3s ease;
    justify-content: space-between;
    width: 48%;
    margin: 1%;
    position: relative;
    border: 1px solid #ffffff69;
    z-index: 0;

}



#websites .project-list .card:hover {
    background-color: #ffffff18;
    transform:  translateY(-4px);
    z-index: 1;
}


#websites .project-list .card:nth-child(1):hover .icon,
#websites .project-list .card:nth-child(2):hover .icon,
#websites .project-list .card:nth-child(5):hover .icon,
#websites .project-list .card:nth-child(6):hover .icon {
        opacity: 1;
        transform: rotate(6deg);
        visibility: visible;
}
#websites .project-list .card:nth-child(3):hover .icon,
#websites .project-list .card:nth-child(4):hover .icon{
        opacity: 1;
        transform: rotate(-6deg);
        visibility: visible;
}


#websites .project-list .card .icon{
    width: 150px;
        transform: rotate(0deg);
        transition: all 0.5s ease;
        opacity: 0;
        visibility: hidden;
        position: absolute;
            z-index: 1;
            right: 64px;
}

#websites .project-list .card .icon img{
    width: 100%;
        border-radius: 12px;
            box-shadow: 0 5px 40px -20px #0000005c;
 
}

#websites .project-list .card .follow-icon {
    opacity: 0;
    visibility: hidden;
    margin-right: 8px;
    transform: translateX(-12px);
    transition:
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.3s ease;
}

#websites .project-list .card:hover .follow-icon {
    opacity: 1;
    visibility: visible;
    transform: translate(0 , 3px);
}



/* =========================================
   PROJECTS
========================================= */
#projects .project-list{

    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}

#projects p.description{
     font-size: 14px;
    letter-spacing: 1px;
    color: rgb(255 255 255 / 50%);
    font-weight: 100;
    text-align: center;
    margin-bottom: 40px;
}

#projects a{
        display: flex;
    width: 49%;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    gap: 2%;
    border: 1px solid #ffffff2e;
    padding: 8px 16px;
    border-radius: 12px;
        transition: all 0.3s ease;
            margin-bottom: 16px;
            position: relative;
    
    
}

#projects a h3{
   color: #fff;
    font-weight: 200;
    font-size: 17px;
    width: 30%;
    
}

#projects a .project-description{
   color: rgba(255,255,255,0.5);
    font-weight: 200;
    font-size: 14px;
    width: 40%;;
}

#projects a .stack {
    width: 26%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: 0;
    will-change: top;
    transition: top 0.5s ease;
}

#projects a .stack .label{
   color: #ffffffde;
    font-weight: 800;
    font-size: 14px;
    padding: 1px 5px;
    margin-left: 4px;
    display: inline-block;
}



#projects a .stack .label.php{
    background: #2dbfe4;
}

#projects a .stack .label.js{
    background: #ff9e48;
}
#projects a .stack .label.python{
    background: #80cf3d;
}
#projects a .stack .label.asp{
    background: #c56cff;
}
#projects a .stack .label.eth{
    background: #64c4ff;
}


#projects .project-list a .follow-icon {
    opacity: 0;
    visibility: hidden;
    margin-right: 8px;
    transform: translateX(-12px);
    transition:
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.3s ease;
              position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    right: 10px;
}

#projects .project-list a:hover .follow-icon {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}




#projects .project-list a:hover {
    background:  #ffffff18;
    transform: translateY(-4px);

}

#projects a:hover .stack {
    top: -60%;
}


/* =========================================
 CONTACT
========================================= */
#contact {
display: flex;
height: 100vh;
}


#contact .contact-container{
        display: flex;
    gap: 8px;
        margin-top: 8px;
}


#contact .linkedin {
 position: relative;
    display: inline-block;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
        color: #fff;
    text-decoration: none;
        border: 1px solid #ffffff6b;
    border-radius: 12px;
    width: 280px;
    text-align: center;
     transition: transform 0.3s ease, background-color 0.3s ease;
}

#contact .email {
position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    
    cursor: pointer;
        border: 1px solid #ffffff6b;
    border-radius: 12px;
    width: 280px;
    text-align: center;
   transition: transform 0.3s ease, background-color 0.3s ease;
}

#contact .email p {
    margin: 0;
   
}
#contact .linkedin p {
    margin: 0;
  
}



/* Copy label */
#contact .email::after {
    content: "copy";
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    margin-bottom: 4px;

    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateX(-50%) translateY(5px);
    transition: all 0.25s ease;
    pointer-events: none;
}

#contact .email:hover  {
    background: #ffffff14;
    backdrop-filter: blur(18px);
    transform: translateY(-4px);
}

#contact .email:hover::after {
    opacity: 0.5;
    transform: translateX(-50%) translateY(0);
}

#contact .email.copied::after {
    content: "copied!";
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}




/* linkedim label */
#contact .linkedin::after {
    content: "➔";
    position: absolute;
    left: 50%;
     top: calc(100% + 10px);
    margin-bottom: 4px;

    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateX(-50%) translateY(5px);
    transition: all 0.25s ease;
    pointer-events: none;
    
    
}

#contact .linkedin:hover  {
     background: #ffffff14;
    backdrop-filter: blur(18px);
    transform: translateY(-4px);
}

#contact .linkedin:hover::after {
    opacity: 0.5;
    transform: translateX(-50%) translateY(0);
}

#contact .linkedin.copied::after {
    content: "copied!";
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


.smiley-container{
    position: relative;
    margin-bottom: 70px;
}

.smiley {
       position: absolute;
    left: 50%;
    top: 0;
    width: 35px;
    height: 35px;
    transform: translateX(-50%);
    transition: opacity 0.25s ease;
}


#smiley-normal {
    opacity: 1;
}

#smiley-normal.copy {
    opacity: 0;
}


#smiley-happy {
    opacity: 0;
}

#smiley-happy.copy {
    opacity: 1;
}




#contact h2 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

#contact.active h2 span {
  animation: letterIn 0.3s ease forwards;
}

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