/* Font Style */
 @import url('https://fonts.googleapis.com/css2?family=Abel:wght@100;400&display=swap');


body{
    background-color:#111111;
    font-family:"Abel",sans-serif;
    font-weight: 100;
    -webkit-overflow-scrolling: smooth;
    max-width: 100vw;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color:inherit;
}

html{
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scroll-timeline-axis: block;
    overflow-x:hidden;
}

section{
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-behavior: smooth;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

#head-section{
    height:100vh;
    width:100%;
}

.header{
    background-color:#161616;
    width:100%;
    margin:0 auto;
    height:10vh;
    display:flex;
    align-items: center;
    box-shadow:0px 0px 30px rgba(0,0,0,0.5);
}

.header-content{
    color:white;
    font-size: 12px;
    font-weight: 100;
    height:3vh;
    width:40vw;
    float: right;
    margin-left:auto;
    margin-right:10vw;
    display: table;
}

.header-content td{
    width: 20%;
    text-align: center;
    cursor: pointer;
    transition: ease-in .3s;
}


.header-content td:hover{
    background-color:#FDA90C;
    box-shadow: 0px 0px 20px rgba(253, 169, 12, 0.3);
    transition: background .3s ease, color .5s ease;
}

.header img{
    display: flex;
    align-items: center;
    width:4vw;
    max-width:4vw;
    min-width: 2vw;
    height: auto;
    object-fit: contain;
    margin-left:2vw;
}

.hero-section{
    display: flex;
    width:100%;
    max-width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.hero-left{
    max-width:14%;
    width:auto;
    margin-left:10%;
    margin-top:20vh;
    flex-grow: 0;
    flex-shrink: 1;
}

.hero-left .intro-text{
    font-size:24px;
    font-weight: 100;
    color:white;
    background-color:rgba(255,255,255,0.1);
    display: inline-block;
    padding:10px;
    border-radius:10px;
}

.hero-left .name{
    font-size:9.8rem;
    font-weight: 100;
    color:white;
    text-shadow: 0px 0px 60px rgba(249, 166, 13, 0.9);
    display: inline-block;
    margin-top: -20px;
}

.hero-left .surname::before{
    content:'';
    display:inline-block;
    width:100px;
    height:4px;
    margin-right: 10px;
    vertical-align: middle;
    background-color: #FDA90C;
    order:-1;
}

.hero-left .surname{
    color:white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:40px;
    font-weight: 100;
    margin-top:-10px;
}

.hero-left .contact-button{
    width:100%;
    height:50px;
    background: transparent;
    color: white;
    font-family: "Abel",sans-serif;
    font-weight: 100;
    font-size: 20px;
    border: solid 2px white;
    opacity: 0.8;
    margin-top: 20px;
    border-radius: 0px 0px 10px 0px;
    cursor: pointer;
    transition: ease-in .2s all;
}

.hero-left .contact-button:hover{
    background-color:rgba(255,255,255,0.1);
}

.hero-left .social-text{
    font-size:15px;
    font-weight: 100;
    color: white;
    background-color:rgba(255,255,255,0.1);
    display: inline-block;
    border-radius: 10px;
    padding:10px;
    margin-top: 30px;
}

.socials {
    width: 100%;
    margin-top:30px;
}

.socials td {
    padding: 0px;
    border-radius: 5px;
    transition: ease .2s all;
}

.socials td a{
    height: 100%;
    width:100%;
    display: block;
}

.socials td:hover{
    background-color:rgba(255,255,255,0.1);
    text-align: center !important;
    padding:10px !important;
    cursor: pointer;
}

.socials td:hover img{
    margin-left: auto !important;
    margin-right: auto !important;
}

.socials img {
    object-fit: contain;
    display: block;
    height: 20px;
    width: 20px;
    margin: 0 auto 10px auto; 
}

.social-name {
    color: white;
    font-size: 15px;
    font-weight: 100;
}

.socials td:first-child {
    text-align: left;
}

.socials td:first-child img {
    margin-left: 0;
    margin-right: auto;
}


.socials td:nth-child(2) {
    text-align: center;
}

.socials td:last-child {
    text-align: right;
}

.socials td:last-child img { 
    margin-right: 0;
    margin-left: auto;
}

.hero-center{
    flex: 1;
    width: 40vw;
    max-width: 40%;
    height: calc(100vh - 20vh - 10vh);
    margin-top: 20vh;
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 1;
    flex-grow: 0;
}

.hero-center img,.eclipse-stroke,.eclipse-glow {
    grid-column: 1;
    grid-row: 1;
}

.hero-center img {
    min-width: 50%;         
    min-height: 60vh;        
    max-width: 100%;         
    max-height: 100vh;                      
    height: auto;
    width: auto;
    object-fit: contain;
    z-index: 3;
    align-self: end;
    margin: 0;                              
    filter: drop-shadow(0px 30px 30px rgba(0, 0, 0, 0.5));
    display: block;                          
}

.hero-center img:hover{
    filter: drop-shadow(0px 30px 100px rgba(255, 136, 0, 0.5));
}

.eclipse-stroke{
    width: 30vw;
    height: 30vw;
    background: transparent;
    border:solid #FDA90C 30px ;
    border-radius: 50%;
    box-shadow:2px 5px 18px rgba(0,0,0,0.25);
    z-index: 2;
}

.eclipse-glow{
    width: 30vw;
    height:30vw;
    background: #FBC052;
    opacity: 0.3;
    filter: blur(100px);
    z-index:1;
    pointer-events: none;
}

.hero-right-wrapper{
    max-width:15vw;
    height:100%;
    margin-right: 10%;
    margin-top: 30vh;
    position: relative;
}

.hero-right{
    z-index:4;
    width:20vw;
    height:20vw;
    border-radius: 10px;
    flex-grow: 0;
    flex-shrink: 1;
    transition:  transform .3s ease;
    position: relative;
    display: block;
}

.hero-right .title-text{
    font-size: 39px;
    font-size: clamp(1rem, 2.8vw, 3rem);
    font-weight: 100;
    color: white;
    text-align: left;
}

.hero-right .title-description{
    margin-top: 10px;
    width: 100%;
    font-size:13px;
    font-size: clamp(.5rem, .9vw, 1rem);
    color:white;
    text-align: left;
    font-weight: 100;
}

.hero-right .title-menu{
    width:20vw;
    height:3vw;
    margin-top:10px;
    border-spacing: 10px;
    display: table;
    table-layout: fixed;
}

.title-menu td{
    width:33.33%;
    background: rgba(203, 203, 203, 0.1);
    color:#FDA90C;
    font-size:13x;
    font-size: clamp(.2rem, .9vw, 1rem);
    font-weight: 100;
    text-align: center;
    border-radius:5px;
    padding:5px;
    border-right:10px solid transparent;
    box-shadow:0px 0px 30px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background .3s ease,color .4s ease;
}

.title-menu td:last-child{
    border-right:0;
    border-spacing: 0;
}

.hero-right:hover{
    transform:scale(1.1) !important;
}

.title-menu td:hover{
    background: rgba(0, 0, 0, 0.1);
    color:white;
    transform: scale(1.2);
}

.hero-left .name:hover{
     text-shadow: 0px 0px 40px rgba(249, 166, 13, 1);
}

#about-section{
    height:100vh;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.about-header{
    margin-left: 10%;
    margin-right:10%;
}

.heading-text{
    font-size:60px;
    color:white;
    font-weight:100;
    display: inline-block;
}
.about-header .heading-text{
    margin-top:10vh;
}


.title-line{
    width:20%;
    height:3px;
    background: #FDA90C;
    transition: width .2s ease;
}

.about-header .about-description{
    color:white;
    font-size:16px;
    font-weight: 100;
    margin-top:30px;
}

.about-header:hover .title-line{
    width:40%;
}

.about-container{
    display: flex;
    justify-content: space-between;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
    min-height:60vh;
    gap:40px;
    position: relative;
}

.about-left{
    justify-content: center;
    align-items: center;
    margin:0;
    padding:0;
}

.about-left img{
    max-width: 100%;
    max-height:60vh;
    border-radius: 10px 0px 0px 10px;
    display: block;
    transition: transform .2s ease;
}

.about-left img:hover{
    transform: scale(1.05);
}

.about-right{
    flex:1;
    display: flex;
    flex-direction: column;
    width:50%;
    gap:16px;
    max-height: 80%;
}

.education-card{
    width:100%;
    background: rgba(49, 48, 48, 0.6);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
    border-radius:0px 10px 0px 0px;
    padding:20px;
    transition: transform .2s ease;
}

.icon-text{
    display: flex;
    align-items: center;
    gap:10px;
}

.icon-text img{
    width:30px;
    height:auto;
}

.icon-text .card-title{
    color:white;
    font-size:20px;
    font-weight: 100;
}

.card-content{
    color:white;
    font-size:14px;
    font-weight:100;
    margin-top: 10px;
}

.card-sub-content{
    color:#c6c6c6;
    font-size:10px;
    font-weight: 100;
}

.achivement-card{
    width:100%;
    background: rgba(49, 48, 48, 0.6);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
    border-radius:0px 0px 0px 0px;
    padding:20px;
    transition: transform .2s ease;
}

.basic-card{
    width:100%;
    background: rgba(49, 48, 48, 0.6);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
    border-radius:0px 0px 10px 0px;
    padding:20px;
    transition: transform .2s ease;
}

.basic-card-text{
    color:#FDA90C;
}

.education-card:hover{
    transform: scale(1.05);
}

.achivement-card:hover{
    transform: scale(1.05);
}

.basic-card:hover{
    transform: scale(1.05);
}

.skill-header .heading-text{
    margin-top:10vh;
}

#skill-section{
    height:100vh;
    width: 100%;
    position: relative;
}

.skill-header{
    margin-left:10%;
    margin-right:10%;
}

.skill-body{
    width:80%;
    margin:40px auto 0 auto;
}

.skill{
    width:100%;
    margin-top:20px;
}

.skill-name{
    font-size:16px;
    color:white;
    font-weight: 100;
    margin-bottom:10px;
}

.skill-bar{
    height:16px;
    background:#313030;
    border-radius: 5px;
}

.skill-per{
    height:18px;
    background: #FDA90C;
    border-radius: 5px;
    position: relative;
    transition: transform .2s ease;    
}

.skill-per-wrapper{
}

.skill-per::before{
    content:attr(per);
    position: absolute;
    color:white;
    background: #313030;
    font-size:12px;
    font-weight:100;
    padding:6px;
    border-radius: 0px 10px 0px 10px;
    right:0;
    top:-35px;
}


.skill:hover .skill-per{
    transform:scale(1.05);
}

.skill:hover .skill-name{
    filter:brightness(0.5);
}


.skill-header:hover .title-line{
    width:40%;
}

#projects-section{
    height:100vh;
    width:100%;
    position:relative;
    overflow: hidden;
}

.projects-header{
    margin-left:10%;
    margin-right:10%;
    position: relative;
}

.projects-header .heading-text{
    margin-top: 5vh;
}

.project-area{
    width: 80%;
    margin:0 auto;
}

.project-card
{
    width: 100%;
    display: flex;
    position: relative;
    height:30vh;
    margin-top:-30px;
    margin-bottom:10px;
}

.featured-text{
    color:white;
    font-size: 8px;
    background:#313030;
    border-radius:5px;
    padding:3px;
    display: inline-block;
    margin-left: 10%;
    margin-top:30px;
}

.project-title{
    color:#FDA90C;
    font-size:40px;
    font-weight: 200;
    margin-bottom: 15px;
    display:inline-block;
    transition:transform .2s ease;
}

.project-title-wrapper{
}


.project-description
{
    color:white;
    font-size:13px;
    border-radius: 10px;
    padding:10px;
    background: #313030;
    margin:0 auto;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.25);
    transition:transform .2s ease;
}

.project-technology{
    font-size:12px;
    color:white;
    font-weight: 100;
    position:absolute;
    border-radius: 5px;
    bottom:0;
}

.project-left{
    width:50%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.project-right{
    display: flex;
    flex-direction: row;
    height:100%;
    width:55%;
    align-items: center;
    justify-content: center;
    background: #FDA90C;
    border-radius:5px;
    margin-left: -5%;
    z-index: -1;
    transition: width .4s ease;
}

.project-right-holder{
    opacity:1;
}

.project-quote{
    color:white;
    font-size:12px;
    font-weight: 100;
    opacity: 0.75;
}

.project-subtitle{
    color:white;
    font-size:34px;
    font-weight:200;
    margin-top: -10px;
}

.project-right img{
    width:9vw;
    height: auto;
    object-fit: cover;
}

.projects-header .see-more-text{
    position: absolute;
    padding:10px;
    background: rgb(49, 48, 48,0.4);
    bottom:0;
    right:0;
    color:white;
    font-size:16px;
    cursor: pointer;
    border-radius: 5px;
    transition: transform .2s ease;
}

.see-more-text:hover{
    transform: scale(1.1);
}

.project-card:hover .project-right{
    width:60%;
    margin-left:-10%;
    transition:ease 1s all;
}

.project-description:hover{
    transform: scale(1.05);
}

.more-text:hover{
    transform: scale(1.1);
}

.project-title:hover{
    transform: scale(1.2);
}

.project-right img:hover{
    transform: scale(1.1);
}

.project-technology:hover{
    word-spacing: 20px;
}

.projects-header:hover .title-line{
    width:40%;
}

#portfolio-section{
    height:100vh;
    position: relative;
}

.portfolio-header{
    width:80%;
    margin-left:10%;
    margin-right:10%;
    position: relative;
}

#portfolio-section .heading-text{
    margin-top:10vh;
}

.portfolio-text{
    font-size: 14px;
    color:white;
    font-weight: 100;
    margin-top:20px;
    width:50%;
    opacity: 0.6;
}

.portfolio-area{
    width:80%;
    margin-left: 10%;
    margin-right:10%;
    position: relative;
}

.portfolio-card{
    width:90%;
    display: flex;
    border-radius: 0 30px 30px 0;
    padding:20px;
    background: rgb(49, 48, 48,0.8);
    margin-top:20px;
    position: relative;
}

.portfolio-image-wrapper{
}
.portfolio-card img{
    width:10vw;
    height:auto;
    margin-right:20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    transition:transform .2s ease;
}

.portfolio-card::after{
    content: attr(title);
    position: absolute;
    width:20%;
    height:60%;
    right:-11%;
    top:20%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:#FDA90C;
    pointer-events: none;
    font-size: 24px;
    color:white;
    font-weight:100;
    transition:transform .4s ease;
}

.portfolio-header .see-more-text{
    position: absolute;
    padding:10px;
    background: rgb(49, 48, 48,0.4);
    bottom:0;
    right:0;
    color:white;
    font-size:16px;
    cursor: pointer;
    border-radius: 5px;
}

.portfolio-header:hover .title-line{
    width: 40%;
}

.see-more-text:hover{
    transform: scale(1.1);
}

.portfolio-card img:hover{
    filter:brightness(1);
    transform:scale(1.1);
}

.portfolio-card img:hover ~ img{
    filter:blur(5px);
}

.portfolio-card:hover::after{
    transform: scale(1.1);
}

#contact-section{
    height:100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contact-header{
    width: 80%;
    margin-left: 10%;
    margin-right:10%;
    text-align: center;
}

.contact-header .heading-text{
    margin-top:10vh;
    font-weight:100;
}

.contact-header .title-line{
    margin-left:40%;
    margin-right:40%;
}

.contact-card-wrapper{
    width:60%;
    height:180px;
    margin-left:20%;
    margin-right:20%;
}

.contact-card{
    background: rgb(49, 48, 48,0.7);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    margin-top:30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:box-shadow .3s ease;
}

.contact-card img{
    width:3vw;
    height: auto;
    margin:30px;
    cursor: pointer;
    transition:transform .2s ease;
}

.contact-img-wrapper{
}

.contact-header:hover .title-line{
    width:50%;
    margin:0 auto;
}

.contact-card:hover{
    box-shadow: 0px 0px 60px rgba(255, 255, 255, 0.1);
}

.contact-card img:hover{
    transform: scale(1.3);
}


@media screen and (max-width:576px){
    .header{
        height:8vh;
    }

    .hero-section{
        height:92vh;
    }

    .header img{
        max-width:5vh;
        min-width:4vh;
    }

    .header-content {
        border-collapse: separate;
        border-spacing: 2vw;
    }

    .hero-section{
        height:92vh;
        position: relative;
        flex-direction: column;
        align-items: center;
        gap:0vh;
    }

    .hero-left{
        margin-top:5vh;
        margin-left:0;
        max-width:80vw;
        height:46vh;
        text-align: center;
    }

    .hero-left .intro-text{
        font-size: 12px;
        width: 100%;
        text-align: center;
    }

    .hero-left .name{
        font-size: 118px;
        text-align: center;
    }

    .hero-left .social-text{
        display: none;
    }

    .hero-left .surname{
        font-size:32px ;
        margin-top:-3vh;
    }

    .hero-center{
        margin-top:0;
        position: absolute;
        z-index:-1;
        height:46vh;
        display: grid;
        width:80vw;
        min-width: 80vw;
        bottom:0;
        filter: brightness(0.5);
    }

    .hero-center img{
        width:100%;
        min-width: 50%;         
        min-height: 10vh;        
        max-width: 100%;         
        max-height: 100vh; 
    }

    .eclipse-stroke{
        height:30vh;
        width:30vh;
    }

    .eclipse-glow{
        height:30vh;
        width:30vh;
    }

    .hero-right-wrapper{
        bottom:7vh;
        margin-right: 0;
        height:10vh;
        min-width:80vw;
    }

    .hero-right{
        text-align: center;
        width:80vw;
    }

    .hero-right .title-text{
        text-align: center;
        font-size:26px;
    }

    .hero-right .title-menu{
        width:100%;
    }

    .title-menu td{
        font-size:12px;
    }

    .heading-text{
        font-size:35px;
    }

    .about-header .about-description{
        font-size:12px;
    }

    .about-container{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:1vh;
    }

    .about-left{
        width: 100%;
        height:10vh;
        border-radius: 10px 10px 0px 0px;
        overflow: hidden;
    }

    .about-left img{
        max-width: 100%;
        object-fit: cover;
        display: block;
        transition: transform .2s ease;
        margin-top:-10vh;
    }

    .about-right{
        width: 100%;
        gap:1vh;
    }

    .icon-text img{
        max-width: 5vw;
        height:auto;
    }

    .icon-text .card-title{
        font-size:14px;
    }

    .card-content{
        font-size:12px;
    }

    .card-sub-content{
        font-size: 8px;
    }

    .education-card{
        border-radius: 0;
    }

    .basic-card{
        border-radius: 0px 0px 10px 10px;
    }

    .skill-body{
        width:80vw;
        height:65vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:2vh;
    }

    .skill-name{
        font-size:14px;
    }

    .skill-bar{
        height:1vh;
    }

    .skill-per{
        height:1vh;
    }

    .skill-per::before{
        font-size:10px;
    }

    .projects-header{
        height:10vh;
        position: relative;
    }
    .projects-header .see-more-text{
        font-size:10px;
        bottom:-10vh;
    }
    .project-area{
        height:80vh;
        margin-top:8vh;
    }

    .project-card{
        display: flex;
        flex-direction: column;
    }

    .project-left{
        width:100%;
    }

    .project-right{
        margin-top:2vh;
        width:100%;
        margin-left:0;
    }

    .project-title{
        font-size:20px;
    }

    .featured-text{
        display: none;
    }

    .project-description{
        font-size:8px;
        height:100%;
    }
    .project-title{
        margin-top: 1vh;
        margin-bottom:5vh;
    }
    .project-technology{
        font-size:10px;
        position: relative;
        margin-top:1vh;
    }
    .project-quote{
        font-size:10px;
    }
    .project-subtitle{
        font-size:26px;
    }
    .project-right img{
        width:20vw;
        height: auto;
        object-fit: contain;
    }
    .project-right-holder{
        display: flex;
        gap:1vh;
        flex-direction: column;
    }
    .project-card:hover .project-right{
        width:100%;
        filter: grayscale(1);
        margin-left: 0;
    }
    .portfolio-text{
        font-size:12px;
        width: 100%;;
    }
    .portfolio-area{
        height:65vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .portfolio-card{
        width: 100%;
        height:30vh;
        margin-top:3vh;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(2,1fr);
        place-items: center;
        border-radius: 10px;
    }

    .portfolio-card img{
        width:21vw;
        object-fit: cover;
        height: auto;
        margin-right:0;
    }

    .portfolio-card::after{
        width:20%;
        height:20%;
        font-size:14px;
        position: absolute;
        right:10%;
        top:60%;
    }

    .portfolio-header .see-more-text{
        font-size:12px;
        position:absolute;
        padding:5px;
        bottom:40%;
    }

    .contact-card-wrapper{
        height:12vh;
        width:80vw;
        margin-top:2vh;
    }

    .contact-card{
        height:100%;
        width: 100%;
        margin-top: 0;
    }

    .contact-card img{
        width:8vw;
        height: auto;
        margin:3vw;
    }
}