body {
    font-family: "Original Surfer", sans-serif;
    margin: 0;
    padding: 0;
    background-image: url("../img/Background.jpg");
    background-attachment: fixed;
}

.sidenav {
    height: 100%;
    position: top;
    background: rgb(56, 144, 85);
    color: white;
    padding: 10px 20px 10px 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav ul li {
    padding: 10px 5px;
    transition: 0.5s;
    border-radius: 6px;
}

nav ul li:hover{
    box-shadow: rgb(36, 112, 61) 0px 2px 3px 1px inset, rgba(175, 255, 202, 0.479) -1px -1px 2px 0px inset;
    background-color: rgb(48, 134, 76);
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;  
}

nav ul li a:hover {
    text-decoration: none;
}

.menu-toggle {
    display: none;
}
/* SECTION HERO BANNER */
#hero {
    display: flex;
		align-items: center;
		justify-content: center;
        flex-direction:column;
		height: 100%;
    text-align: center;
    padding: 20vh 5vh;
    color: white;
      animation-name: bounce-in-zoomin;
      animation-duration: 0.8s;
      animation-timing-function: ease-in;
      animation-delay: 0.2s;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: none;
}

h1 {
    padding: 0 15vh;
    scale:1.1;
    animation-name: scale-up-center;
       animation-timeline: view(0% 0%);
       animation-duration: 0.2s;
       animation-timing-function: ease-in;
       animation-delay: 0s;
       animation-iteration-count: 1;
       animation-direction: normal;
       animation-fill-mode: none;
}

@keyframes bounce-in-zoomin {
    0% {
        transform:scale(7);
        animation-timing-function:ease-in;
        opacity:0;
    }
    35% {
        transform:scale(1);
        animation-timing-function:ease-out;
        opacity:1;
    }
    55% {
        transform:scale(1.1);
        animation-timing-function:ease-in;
    }
    70% {
        transform:scale(1);
        animation-timing-function:ease-out;
    }
    80% {
        transform:scale(1.24);
        animation-timing-function:ease-in;
    }
    90% {
        transform:scale(1);
        animation-timing-function:ease-out;
    }
    95% {
        transform:scale(1.04);
        animation-timing-function:ease-in;
    }
    100% {
        transform:scale(1.5);
        animation-timing-function:ease-out;
    }
}

@keyframes appears {
    0% {
        transform:scale(.4) rotateX(180deg);
    }
    30% {
        transform:scale(1) rotateX(0deg);
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
         rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
          rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
           rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px,
             rgba(0, 0, 0, 0.09) 0px 8px 4px,
              rgba(0, 0, 0, 0.09) 0px 16px 8px,
               rgba(0, 0, 0, 0.09) 0px 32px 16px,
               rgb(255, 255, 255) 0px 0px 5px 3px,
               rgb(0, 158, 250) 0px 0px 20px 5px;
    }
    80% {
        transform:scale(1) rotateX(0deg);
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
         rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
          rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
           rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px,
             rgba(0, 0, 0, 0.09) 0px 8px 4px,
              rgba(0, 0, 0, 0.09) 0px 16px 8px,
               rgba(0, 0, 0, 0.09) 0px 32px 16px
               rgb(255, 255, 255) 0px 0px 5px 3px,
               rgb(0, 158, 250) 0px 0px 20px 5px;
    }
    100% {
        transform:scale(.4) rotateX(180deg);
    }
}

@keyframes scale-up-center {
			
    0% {
        transform:scale(.2);
    }
    20% {
        transform:scale(1);
    }
    70% {
        transform:scale(1);
    }
    100% {
        transform:scale(.2);
    }
}

@keyframes slide-b {
			
    0% {
        transform:translateY(0);
    }
    100% {
        transform:translateY(10cm);
    }
}

#about {
    text-align: center;
    color :#ffffff;
    padding: 0vh 5vh;
}

h2, p{
    animation-name: scale-up-center;
    animation-timeline: view(0% 0%);
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
}

#project {
    text-align: center;
    color: white;
}

.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 20px;
    padding: 0 20px;
}

.project-card {
    color: white;
    text-align: center;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    animation-name: scale-up-center;
       animation-timeline: view(0% 0%);
       animation-duration: 0.2s;
       animation-timing-function: ease-in;
       animation-delay: 0s;
       animation-iteration-count: 1;
       animation-direction: normal;
       animation-fill-mode: none;
}

.project-card img {
    border-radius: 5px;
    width: 100%;
    height: 250px;
    overflow: hidden;
    object-fit: cover;

}

.project-card p{
    padding: 5px 6px;
}

.project-card .btn{
    display: block;
    text-align: center;
    padding: 10px;
    background-color: rgb(48, 134, 76);
    margin: 15px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 200ms;
}

.project-card .btn:hover{
    background-color: rgb(52, 107, 70);
}

#skills{
    text-align: center;
    margin-top: 10vh;
    padding-top: 10vh;
    margin-bottom: 10vh;
    padding-bottom: 10vh;
    background-color: midnightblue;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;

}

#skills h2{
    Margin-bottom: 5vh;
    animation-name: scale-up-center;
    animation-timeline: view(0% 0%);
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
}

.images{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vw 6vw;
}

.images img{
    width: auto;
    height: 25vh;
    object-fit: contain;
    background-color: white;
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
     rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
      rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
       rgba(0, 0, 0, 0.06) 0px 2px 1px,
        rgba(0, 0, 0, 0.09) 0px 4px 2px,
         rgba(0, 0, 0, 0.09) 0px 8px 4px,
          rgba(0, 0, 0, 0.09) 0px 16px 8px,
           rgba(0, 0, 0, 0.09) 0px 32px 16px,
           0 0 var(--box-blur) var(--glow);
    animation-name: appears;
      animation-timeline: view(0% 0%);
      animation-duration: 0.2s;
      animation-timing-function: ease-in;
      animation-delay: 0s;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: none;
}

.images p{
    font-size: large;
}

.image{
    width: 25vh;
}

#contact{
    margin: 5vh;
    padding: 4vh 5vh;
    color: white;
}

#contact a{
    color: rgb(119, 150, 174);
}

#contact form{
    background-color: rgb(48, 134, 76);
    margin: 0 auto;
    padding: 20px;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

#contact h2, #contact p, #contact a{
    text-align: center;
    animation-name: scale-up-center;
    animation-timeline: view(0% 0%);
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
}

#contact form textarea{
    min-height: 100px;
    max-width: 100%;
}

form div{
    margin-bottom: 20px;
}

form label{
    display : block;
    margin-bottom: 5px;
}

form input,
form textarea{
width: 100%;
padding: 10px 0;
border: 5px solid rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
border-radius: 4px;
box-sizing: border-box;
}

form button{
    padding: 10px 10px;
    width: 100%;
    background-color: rgb(4, 122, 201);
    border-radius: 4px;
    color: white;
    font-weight: bold;
    border-color: rgba(0, 0, 0, 0.4);
}

form button:hover{
    cursor:pointer;
    background-color:rgb(72, 162, 231);
}

#contact .name, #contact .mail, #contact .message, #contact .bouton{
    animation-name: scale-up-center;
    animation-timeline: view(-10% -10%);
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
}

@media (max-width: 700px) {
    .menu-toggle {
        display: block;
    }

    .menu-toggle:hover{
        cursor: pointer;
    }
    
    nav{
        position: sticky;
        top: 0;
        height: 45px;
        z-index: 1;
    }

    nav ul{
        display: none;
    }

    nav ul.show{
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 30px;
        padding: 30px 0px;
    }

    nav ul.hide{
        display: none;
    }

    .sidenav{
        background-color: rgb(231, 189, 72);
    }

    nav ul li:hover{
        box-shadow: rgb(112, 92, 36) 0px 2px 3px 1px inset, rgba(255, 231, 175, 0.479) -1px -1px 2px 0px inset;
        background-color: rgb(203, 174, 67);
    }

    .project-card .btn{
        background-color: rgb(231, 189, 72);
    }

    .project-card .btn:hover{
        background-color: rgb(168, 140, 62);
    }

    #contact form{
        background-color: rgb(231, 189, 72);
    }
}