/* Fonts */
@font-face {
   font-family: 'Higuen';
   src: url(fonts/higuen-serif.otf) format('opentype');
}

@font-face {
   font-family: 'Saira Condensed Reg';
   src: url(fonts/sairacondensed-regular.ttf) format('truetype');
}

/* Universal */
* {
   font-family: 'Saira Condensed Reg', sans-serif;
   color: #fff3d8;
}

/* Body */
body {
   background-color: #121b36;
}

/* Hero Section */
#hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1; 
}

#jasper_pic {
   width: 100%;
   z-index: 0;
   mask-image: linear-gradient(black, transparent);
}

.hero-content-stack {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* THE OVERLAP: Pulls the text up over the image */
    margin-top: -700px; 
    z-index: 10; /* Ensures text is always on top */
}

/* Profile */
#profile {
    width: 60%;
    margin: 0;
    color: #fff3d8;
    top: -150px;
    left: 25%;
    z-index: 1;
    position: relative;
    text-align: center;
}

#profile h1 {
   font-size: 80px;
   font-family: 'Higuen', serif;
   font-weight: 100;
   width: 100%;
   margin-bottom: 20px;
}

#profile h3 {
   font-size: 26.8px;
   font-weight: 10;
   margin: 0;
}

/* About */
#about {
    width: 45%;
    margin-top: -100px;
    position: relative;
    display: flex;
    left: 25%;
    flex-direction: column;
    align-items: center;
}

#about .label {
    width: 335px;
    height: 80px;
    border-radius: 20px;
    background-image: linear-gradient(#121b36, #6c7ea4);
    
    /* Flexbox centering for the text */
    display: flex;
    justify-content: center;
    align-items: center;

    /* The Overlap Magic */
    position: relative;
    z-index: 2;          /* Ensures the label stays on TOP of the description */
    margin-bottom: -40px; /* Pulls the .desc box UP by 50px so it overlaps the label */
}

#about .label h3 {
    font-family: 'Higuen';
    font-size: 40px;
    font-weight: 100;
    margin: 0;
}

#about .desc {
    width: 100%;
    border-radius: 20px;
    background-image: linear-gradient(
        to right,
        rgba(18, 27, 54, 0.4), 
        rgba(108, 126, 164, 0.4)
    );
    z-index: 1;          /* Keeps it behind the label */
    padding-top: 40px;   /* Adds internal space so the text doesn't sit under the label */
}

#about .desc p {
    width: 85%;
    margin: 0 auto;      /* Centers the text paragraph inside the box */
    text-align: justify;
    padding: 30px;
    font-size: 17px;
    line-height: 1.6;    /* Makes your research specialization easier to read */
    text-indent: 50px;
}

#about .desc p b {
   color: #ffe326;
}

/* Skills */
#skills {
   width: 70%;
   margin: 100px auto 0 auto;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#skills .label {
   width: 335px;
   height: 80px;
   border-radius: 20px;
   background-image: linear-gradient(#121b36, #6c7ea4);

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

   position: relative;
   z-index: 2;          
   margin-bottom: -40px; 
}

#skills .label h3 {
   font-family: 'Higuen';
   font-size: 40px;
   font-weight: 100;
   margin: 0;
}

#skills .contents {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

   border-radius: 20px;
   background-image: linear-gradient(
    to right,
        rgba(18, 27, 54, 0.4), 
        rgba(108, 126, 164, 0.4)
    );
   z-index: 1;       
   padding-top: 40px;  
}

#skills .contents div {
   padding: 15px;
   margin: 10px;
   align-items: center;
}

#skills .contents div:hover {
    transform: translateY(-7px); /* Lift the icon slightly when hovered */
    transition: transform 0.3s ease;
}

#skills .contents div img {
   width: 60px;
   height: 60px;
   object-fit: cover;
   background-color: aliceblue;
   padding: 10px;
   border-radius: 20px;
   display: block;
}

#skills .contents div p {
   font-weight: bold;
   font-size: 17px;
   text-align: center;
}

.skill_logo {
   width: 70px;
}

/* Projects */
#projects {
   width: 70%;
   margin: 100px auto 0 auto;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#projects .label {
   width: 335px;
   height: 80px;
   border-radius: 20px;
   background-image: linear-gradient(#121b36, #6c7ea4);

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

   position: relative;
   text-align: center;
   z-index: 2;
   margin-bottom: -40px;
}

#projects .label h3 {
   font-family: 'Higuen';
   font-size: 40px;
   font-weight: 100;
   margin: 0;
}

#projects .contents {
   width: 100%;
   background-image: linear-gradient(
        to right,
        rgba(18, 27, 54, 0.4), 
        rgba(108, 126, 164, 0.4)
    );
   display: flex;
   justify-content: flex-start;
   border-radius: 20px;

   /* horizontal scrollbar */
   overflow-x: auto;
   white-space: nowrap;
   padding-bottom: 20px;

   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Hides scrollbar for Chrome, Safari and Opera */
/* 1. The entire scrollbar area */
#projects .contents::-webkit-scrollbar {
    height: 25px;
}

/* 2. the track */
#projects .contents::-webkit-scrollbar-track {
    background: transparent;
}

/* 3. the thumb */
#projects .contents::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2); /* Low opacity white */
    border-radius: 50px;                        /* Makes it an oval/pill shape */
    border: 2px solid transparent;              /* Adds a little "breathing room" */
}

/* 4. Darken slightly when hovering */
#projects .contents::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

#projects .contents div {
   flex: 0 0 auto;
   padding: 40px 0px 40px 40px;
   margin-top: 60px;
   text-align: center;
}

#projects .contents div:hover {
   transform: translateY(-10px);
   transition: transform 0.3s ease;
}

#projects .contents div img {
   width: 150px;
   height: 150px;
   object-fit: cover;
   background-color: aliceblue;
   padding: 20px;
   border-radius: 15px;
   display: block;
   margin: 0 auto;
}

#projects .contents div p {
   font-size: 17px;
   font-weight: bold;
}

/* Footer */
footer {
   text-align: center;
   font-size: 17px;
}