/* Un tout petit peu de bordel quand jai galéré pour les couleurs mais normalement chill */

/* CORE */

:root {
  --background-color: #292929;
  --main-gray: #949494;
  --secondary-gray: #6D6D6D;
  --grad-blue: #2668FD;
  --grad-purple: #A830EE;
  --darker-gray: #0F0F0F;
  --python: #3A76A6;
  --html: #DD5B25;
  --javascript: #E9D44D;
  --scss: #C76494;
  --css: #254BDD;
}

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  }

html, body {
  height: 100%;
  
}


#main h1 {
    text-align: center;
    color: #333;
    font-size: 2.5em;
    margin-top: 80px;
    text-transform: uppercase;
}
body {
  top: 100;
  display: flex;
  flex-direction: column;
    background: linear-gradient(
    to bottom,
    #ffffff 0px,
    #87ceeb 100px,
    #fde68a 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;



  /* background-color: var(--background-color); */
  /* color: var(--main-gray); */
  overflow-x: hidden;
  overflow-y: scroll;
  /* font-weight: bold; */

}



body::-webkit-scrollbar {
  width: 6px;
  background-color: var(--main-gray);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--secondary-gray);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-gray);
}

/* NAVBAR */
.sky-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
  z-index: 1000;
}

.cloud-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100px;
  background: linear-gradient(to top, #87ceeb, #e0f6ff);
  overflow: hidden;
  z-index: 1000;
}

.sky-navbar {
  position: relative;
  height: 100%;
  z-index: 1001;
  height: 100px;
}

nav {
  position: relative;
  z-index: 1002;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

nav ul {
  display: flex;
  gap: 60px;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li a {
  text-decoration: none;
  color: #333;
  background: rgba(255, 255, 255, 0.8);
  padding: 14px 30px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  font-size: 1.3rem;
  transition: all 0.3s ease;
}

nav li a:hover {
  background: #ffffff;
  color: #4ca1af;
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.9;
  box-shadow:
    40px 20px 0 -10px #fff,
    80px 10px 0 -15px #fff,
    60px 40px 0 -20px #fff;
  z-index: 1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;



  
}

@keyframes float {
  0% { transform: translateX(-200px); }
  100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}
/* MAIN */


#main {
  flex-grow: 1;
  /* margin: 30px auto; */
  /* padding: 0 15%;  */
  margin: 50px auto 0 10%;
  margin-left: 15%;
  margin-right: 15%;
  /* display: flex; */
  flex-direction: column;
}

/* FOOTER */
/* FOOTER STYLE */
.wild-grass-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 50px 0 20px;
    overflow: hidden;
    z-index: 100;
}
.grass-blades::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 70%, rgba(0,0,0,0.05));
}


.grass-blades {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
}

.grass-blades span {
    position: absolute;
    bottom: 0;
    display: inline-block;
    transform-origin: bottom center;
    animation: grass-sway 3s infinite ease-in-out alternate;
    pointer-events: none;
}

@keyframes grass-sway {
    0% { transform: rotate(-8deg) scaleY(0.95); }
    50% { transform: rotate(0deg) scaleY(1.1); }
    100% { transform: rotate(8deg) scaleY(0.95); }
}