/* Desktop */
* {
    margin: 0;
    background-color: #0B132B;
    font-family: 'Montserrat', sans-serif;
    color: aliceblue;
    overflow-x: hidden;
}


/* HEADER */

header {
    width: 100%;
    display: flex;
    padding: 30px;
    text-align: center;
    align-items: center;
    width: calc(100% - 30px);
    top: 0;
    z-index: 1000;
    background-color: #1C2541;

}

.mobile-only {
    display: none;
}

#open{
    width: 60px; 
    height: auto;
    padding-left: 48.4%;
    background-color: #1C2541;
}

#open svg{
    width: 60px; 
    height: 60px;
    fill: #5BC0BE;
    background-color: #1C2541;
}

header ul {
    list-style: none;
    padding: 0;
    margin-left: auto;
    padding-right: 40px;
    text-align: center;
    background-color: #1C2541;
}

header li {
    display: inline-block;
    margin-right: 50px;
}

header a {
    text-decoration: none;
    background-color: #1C2541;
}

a:hover{
    color: #6FFFE9;
}

main{
    margin: auto;
    width: 80%;
}

/* INFO ABOUT ME */


#info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    height: calc(100vh - 0px);
    width: 70%;
}

#name{
    font-size: 4ch;
}

#about-me {
    padding-top: 20px;
    padding-bottom: 30px;
    width: 1000px; 
    position: relative;
    overflow: hidden; 
}

#border {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: #5BC0BE; 
    width: 0; 
    animation: borderGrow 6s ease forwards; 
}

@keyframes borderGrow {
    from {
        width: 0; 
    }
    to {
        width: 100%; 
    }
}

/*PROJECTS */

.projects-title {
    margin-bottom: 40px;
  }
  
  .card-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    height: auto;
  }
  
  .slider-wrapper {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-in-out;
    width: auto;
    overflow: visible;
  }
  
  .card {
    height: 90%;
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
  }

  .card-info{
    margin: 5px;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #5BC0BE;
    border-radius: 15px;
  }

  .projects-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 500px;
    padding: 20px;
    justify-content: center;
    z-index: 1000;
    width: 35%;
    margin-left: 45px;
    height: 30vh;
    justify-content: space-evenly;
  }

  .card h3 {
    font-size: 1.5rem;
    color: #6FFFE9;
  }

  .card p {
    color: #EEEEEE;
    text-align: left;
    width: 100%;
  }

  .links-to-gifi {
    display: flex;
    gap: 15px;
  }

  .image-background {
    height: 100%;
    margin-right: -40%;
    position: relative;
    z-index: 10;
  }


  .image-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(11, 19, 43, 1), rgba(11, 19, 43, 0.2));
    pointer-events: none;
  }

  .card img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  ul.stack{
    display: flex;
    gap: 10px;
    list-style: none;
    padding-left: 0; 
  }
  
  .stack li {
    font-size: 0.9rem;
    color: #6FFFE9;
  }
  
  .links-to-gifi a p {
    margin: 0;
    color: #FF6B6B;
  }

  .links-to-gifi a{
    text-decoration: none;
  }
  
  .links-to-gifi a p:hover {
    color: #6FFFE9;
  }
  
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 15px;
    color: #5bc0be;
    background-color: #1c25416d;
    cursor: pointer;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .slider-arrow:hover {
    background-color: #f0f1f5e8;
    color: #1c2541;
  }

  .prev-arrow { left: 40px; }
  .next-arrow { right: 40px; }
  
  .slider-dots {
    position: absolute;
    margin-top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    pointer-events: none;
  }
  
  .dot {
    width: 12px;
    height: 12px;
    background-color: #1C2541;
    border: 2px solid #5BC0BE;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .dot.active {
    background-color: #5BC0BE;
  }

/* EDUCATION */

#education{
    margin-top: 50px;
   
}

/* SKILLS */

#skills {
    margin: auto;
    height: auto;
}

#skills ul{
    padding: 0;
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin: 0 auto;
    flex-wrap: wrap;
}

#skills li{
    text-align: center;
}

#skills h2{
    margin: 150px 0 50px;
}

#skills svg{
    width: 80px; 
    height: 80px;
    fill: #5BC0BE;
}


#skills li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

#skills span{
    margin-top: 10px;
}

#skills li:hover svg {
    fill: #6FFFE9;
}

/* CONTACTS */

#contact {
    height: 340px;
}

#contact h2{
    margin: 50px 0;
}

#contact ul{
    padding: 0; 
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


#contact svg{
    width: 30px;
    height: 30px;
    fill: #5BC0BE;
}

#contact .visit {
    color: #FF6B6B;
}


#contact li:hover{
    border: solid 2.5px #6FFFE9;
}

#contact li:active{
    border: solid 2.5px #66ff84;
}

#contact li{
    width: 300px;
    height: 75px;
    flex: 0 1 calc(40% - 20px); 
    border: solid 1px #5BC0BE;
    border-radius: 16px;
    margin-top: 30px;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box; 
    cursor: pointer;
}

#contact a{
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

#contact p{
    margin-left: auto;
    padding-right: 20px;
}

/* SHOW NOTIFICATION ABOUT COPY */

#fixedNotification{
    display: none; 
    position: fixed; 
    width: 300px; 
    left: 50%;
    transform: translateX(-50%);
    top:30px;
    right: 0; 
    background-color: #4CAF50; 
    border-radius: 15px;
    color: white; 
    text-align: center; 
    padding: 10px; 
    font-size: 16px; 
    z-index: 1000;
}

/* FOOTER */

footer{
    margin-top: 100px;
    height: auto;
    text-align: center;
    height: auto;
}

footer svg{
    margin: 20px;
    width: 60px; 
    height: auto;
    fill: #5BC0BE;
}


/* ADAPTIVE FOR TABLET */


@media (max-width: 1550px){
    *{
        margin: 0;
    }

    main{
        width: 90%;
        max-width: 1280px;
        margin: 0 auto;
    }
    header{
        display: flex;
        padding: 30px;
        text-align: center;
        align-items: center;
        width:(100%);
        top: 0;
        z-index: 1000;
        background-color: #1C2541;
    }

    /* PROJECTS FOR TABLET */

    .image-background{
        margin-right: -65%;
    }

    .image-background img {
        object-fit: cover;
        height: 70vh;
    }

    #contact ul {
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
    }

    #contact li{
        width: 400px;
    }
    
    footer{
        height: auto;
        text-align: center;
    }
    
            /* Contacts */
            #contact{
                height: auto;
            }

}

/* ADAPTIVE FOR  SMALLER SCREEN*/

@media (max-width: 1150px){
    *{
        margin: 0;
    }

    /* HEADER */

    header{
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    #open{
        width: 60px; 
        height: auto;
        display: flex;
        padding: 10px;
    }

    /* MAIN CONTENT */

    main{
        max-width: 1150px;
        
    }
    
    #about-me{
        max-width: 100%;
        position: relative;
        overflow: hidden; 
    }


    /* PROJECTS */


    .image-background{
        margin-right: -90%;
    }

    .projects-info{
        margin-left: 8%;
        height: 50vh;
    }



    /* Skills */


        #skills ul{
            display: flex;
            flex-wrap: wrap;
        }

        #skills {
            margin: auto;
            height: auto;
        }

        #skills ul{
            justify-content: space-evenly;
        }

    #contact ul{
        flex-direction: column;
    }


    footer svg{
        margin: 20px;
        width: 60px; 
        height: 60px;
        fill: #5BC0BE;
    }    


}

@media (max-width: 1000px){


    /* PROJECTS */

    .image-background{
        margin-right: -100%;
    }

    .card img{
        height: 60vh;
    }


}


/* ADAPTIVE FOR  SMALLER x2 SCREEN*/

@media (max-width: 890px){
    *{
        margin: 0;
    }

    /* HEADER */

    header{
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    /* PROJECTS */

    .image-background{
        margin-right: -120%;
    }


    /* Skills */

        #skills ul {
            gap: 20px;
            justify-content: center;
        }

        #skills li {
            flex: 0 1 calc(33.33% - 20px);
        }

}

@media (max-width: 700px){
    header{
        width: 100%;
    }

        /* PROJECTS */


        .image-background{
            margin-right: -150%;
        }
    
}


@media (max-width: 600px){

    header{
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }

    main{
        width: 95%;
    }

    #nav-list{
        width: 100px; 
        height: 160px;
        padding: 10px;
        margin-top: 10%;
        margin-right: 9%;
    }

    #nav-list li{
        background-color: #1c2541;
    }


    .mobile-only{
        background-color: #1C2541;
        display: block;
    }

    #nav-list {
        max-height: 0;
        opacity: 0; 
        flex-direction: column;
        position: absolute;
        top: 90px;
        right: 0;
        background-color: #1C2541;
        padding: 20px;
        border-radius: 10px;
        z-index: 1000;
        overflow: hidden; 
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; 
        display: flex;
        align-items: center;
        border:solid 1px #5BC0BE;
    }
    
    #nav-list li {
        margin: 10px 0;
    }
    
    #nav-list.open {
        max-height: 500px; 
        opacity: 1;
    }
    
    #menu-button {
        background-color: #5BC0BE;
        border: none;
        color: white;
        padding: 10px 15px;
        font-size: 24px;
        cursor: pointer;
        border-radius: 5px;
        margin-right: 10px;
    }
    main {
        width: 90%; 
        font-size: small;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    header ul{
        margin:0;
    }

    #projects{
        height: 100vh;
        width: 90%;
    }

    .projects-info{
        width: 80%;
    }

    .card{
        height: 100%;
    }

    #skills{
        margin-top: 10px;
        width: 90%;
        height: auto;
    }

    #contact{
        width: 90%;
        height: auto;
    }
    #contact li{
        width: 100%;
    }

    footer {
        width: 90%;
        font-size: x-small;
    }

}

@media (max-width: 600px){

    .projects-title {
        margin-bottom: 0px; 
    }

    #projects{
        height: 105vh;
        width: 100%;
    }

    .projects-info{
        width: 100%;
        height: 80vh;
        padding: 10px;
    }

    .slider-arrow {
        font-size: 10px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
    }

    .slider-arrow:hover {
        color: #5bc0be;
        background-color: #1c25416d;
      }

    .slider-arrow:active {
        color: #164b4a;
        background-color: #f8f9fb6d;
        border-radius: 50%;
        font-size: 10px;
        width: 25px;
        height: 25px;
    }

      .prev-arrow { 
        left: 10px; 
    }
      .next-arrow { 
        right: 0px;
        
    }
      
}