/* 
Color Scheme
- Black
- Red
- White

*/

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: hsla(0, 0%, 0%, 0.959);
    color: white;
}

/* CUSTOM SCROLL BAR */
/* width */
::-webkit-scrollbar {
    width: 7px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px black; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ff0000; 
    border-radius: 10px;
  }
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ff4e4e; 
  }

/* HEADER */

    /* MOBILE NAV */
    .mobile-nav {
        overflow: hidden;
        position: relative;
        font-family: Arial, Helvetica, sans-serif;
        /* From https://css.glass */
        background: rgba(255, 0, 0, 0.31);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(16.2px);
        -webkit-backdrop-filter: blur(16.2px);
        border: 1px solid rgba(255, 0, 0, 0.69);
        display: none;
      }
      
      .mobile-nav-links {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
        gap: 10px;
        padding: 10px;
        font-size: 12px;
        outline: #ff0000;
      }
    
      .mobile-nav-links a {
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: white;
        cursor: pointer;
      }
    
      .mobile-nav-links a:hover {
        color: #ff0000;
        text-shadow: 0 0 20px #ff0000;
        transition: 0.5s;
      }
    
      .mobile-nav-links a:active {
        color: #ff0000;
        text-shadow: 0 0 10px #ff0000;
        transition: 0.5s;
      }

.burger-menu {
    visibility: hidden;
}

@media screen and (max-width: 804px) {
    nav ul {
      display: none;
    }

    .burger-menu {
        visibility: visible;
    }

    .burger-menu div {
        background-color: #ff0000;
        padding: 5px 5px 3px 5px;
        border-radius: 2px;
        background: rgba(56, 39, 39, 0.200);
    }

    .burger-menu div:hover {
        color: #ff0000;
        text-shadow: 0 0 20px #ff0000;
        transition: 0.5s;
    }

    .burger-menu div:active {
        color: #ff0000;
        box-shadow: 0 0 10px #ff0000;
        transition: 0.5s;
    }
}


/* MAIN NAV */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 30px;
    padding-right: 30px;
}

.logo {
    font-size: clamp(1rem, 5vw  ,2rem);
    /* font-size: 30px; */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    cursor: pointer;
}

.jyl {
    color: white;
}

.dev {
    color: red;
}

nav ul li {
    display: inline-block;
    list-style: none;
    margin: 10px 20px;
}

nav ul li a {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: 0.5s ease-out;
}

nav ul li a:hover {
    color: #ff0000;
    text-shadow: 0 0 20px #ff0000;
    transition: 0.5s;
}
nav ul li a:hover::after{
    width: 100%;
}

#downloadCV {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-size: clamp(0.5rem, 2vw , 1.125rem);
    color: white;
    background-color: #ff0000;
    border: none;
    border-radius: 20px;
    padding: 10px;
    outline: none;
    cursor: pointer;
    transition: 0.7s ease-out;
    box-shadow: 0 0 10px #ff0000;
}
#downloadCV:hover {
    background-color: hsl(0, 100%, 60%);
    box-shadow: 0 0 20px #ff0000;
    transition: 0.5s;
}
#downloadCV:active {
    background-color: hsl(0, 100%, 40%);
    transition: 0.5s;
}

/* SECTIONS */
section {
    padding: 20px 20px 20px 20px;
    font-family: Arial, Helvetica, sans-serif;
    width: auto;
    height: auto;
}

section h1 {
    font-size: clamp(0.25rem, 5vw ,1.5rem);
}

/* HOME */
.home {
    min-height: 300px;
    max-height: 555px;
    text-align: center;
}

.home h1 {
    font-size: clamp(1.5rem, 5vw ,3.75rem);
    /* font-size: 60px; */
    margin: 0;
    display: inline-block;
    margin-top: 60px;

    background: linear-gradient(
        to right,
        #ffffff 20%,
        #810101 30%,
        #000203c2 70%,
        #ff0000 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 8s ease-in-out infinite alternate;
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
        text-shadow: 0 0 10px #ff0000;
    }
}

.home p {
    font-size: clamp(0.75rem, 2vw ,1rem);
    margin: 0;
    display: inline-block;
    text-align: justify;
    /* line-height: 30px; */
    line-height: clamp(1.3rem, 5vw, 2rem);
}

.intro {
    width: 500px;
    max-width: 100%;
}

.home a {
    color: #ff0000;
    font-size: clamp(10px, 3vw, 20px);
}

.profiles-container {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.profiles-container a {
    transition: 0.9s ease-out;
}

/* .fb:hover, .git:hover, .link:hover {
    text-shadow: 0 0 5px #ff0000;
    transition: 0.5s;
} */

.social-links:hover {
    text-shadow: 0 0 5px #ff0000;
    transition: 0.5s;
}


/* ABOUT */
.about {
    min-height: 650px;
    text-align: center;
    margin-top: clamp(50px, 10vw, 150px);
}

.about p {
    font-size: clamp(0.75rem, 2vw ,1rem);
    margin: 0;
    display: inline-block;
    text-align: justify;
    line-height: clamp(1.3rem, 5vw, 2rem);
    width: 500px;
    max-width: 100%;
}

.about p span {
    font-size: clamp(0.8rem, 2vw ,1rem);
    background: linear-gradient(
        to right,
        #ffffff 20%,
        #810101 30%,
        #000203c2 70%,
        #ff0000 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 8s ease-in-out infinite alternate;
}

/* SKILLS */
.skills {
    min-height: 650px;
    text-align: center;
    margin-top: clamp(50px, 10vw, 150px);
}

.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.5rem, 2vw ,1rem);
}

.skills-container img {
    width: clamp(30px, 5vw ,60px);
    height: clamp(30px, 5vw ,60px);
    /* object-fit: cover; */
}

.skill-box {
    display: flex;
    flex: 0 0 8%;
    align-items: center;
    justify-content: center;
    width: clamp(25px, 5vw ,50px);
    height: clamp(25px, 5vw ,50px);
    padding: clamp(25px, 5vw ,50px);
    background: rgba(56, 39, 39, 0.103);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    box-shadow: 0 0 5px #ff0000;
    transition: 0.5s ease-out;
}

.skill-box:hover {
    box-shadow: 0 0 20px #ff0000;
    transition: 0.5s ease;
}

/* PROJECTS */
.projects {
    min-height: 650px;
    text-align: center;
}

.project-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.project-box {
    width: 30%;
    background-color: red;
    color: white;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    background-image: url();
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 2px #ff0000;
    background: rgba(56, 39, 39, 0.103);
    cursor: pointer;
}

.project-box img {
    min-width: 50%;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: clamp(5px, 5vw, 15px);
    z-index: 100000;
}

.project-details {
    padding-bottom: 10px;    
}

.project-details p {
    font-size: clamp(0.20rem, 2vw ,1rem);    
}

.project-details span {
    /* padding: 6px; */
    text-align: center;
    padding: clamp(0px, 1vw, 5px);
    border-radius: 20px;
    font-size: clamp(0.05rem, 2vw ,0.75rem);
}


.project-box:hover {
    box-shadow: 0 0 20px #ff0000;
    transition: 0.5s ease;
}


/* CONTACT */
.contact {
    min-height: 650px;
    text-align: center;
}

.contact-container-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.contact-container {
    text-align: left;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    width: 50%;
    height: auto;
    background: rgba(56, 39, 39, 0.103);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    box-shadow: 0 0 5px #ff0000;
    transition: 0.5s ease-out;
    font-size: clamp(0.7rem, 2vw , 1rem);
  }

input, textarea {
    width: 100%;
    height: clamp(20px, 5vw, 50px);
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    font-size: clamp(0.7rem, 5vw , 1rem);
  }

  ::placeholder {
    font-size: clamp(0.7rem, 2vw , 1rem);
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12-18 */
    font-size: clamp(0.7rem, 5vw , 1rem);
  }
  
  input[type=submit] {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: #ff0000;
    border: none;
    border-radius: 20px;
    padding: clamp(5px,2vw,10px);
    outline: none;
    cursor: pointer;
    transition: 0.7s ease-out;
    box-shadow: 0 0 10px #ff0000;
    font-size: clamp(0.7rem, 2vw , 1.125rem);
    text-align: center;
  }
  
  input[type=submit]:hover {
    background-color: hsl(0, 100%, 60%);
    box-shadow: 0 0 20px #ff0000;
    transition: 0.5s;
  }

  input[type=submit]:active {
    background-color: hsl(0, 100%, 40%);
    transition: 0.5s;
  }


/* FOOTER */
footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}