/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* CSS Variables 4 colors & fonts */
/* DISCLAIMER: 
 Non, je n'en ai pas use autant de couleurs sur ce portfolio.
 En cherchant des couleurs sympas, j'ai fini par énumérer
 toutes les couleurs que je pourrais apprécier ou use one day.
   - Donc c'est ma liste de couleurs pour qd j'en aurai besoin.
   - Plus besoin de chercher.
   - Alors te gêne pas, surtout sers-toi 😊!
*/
:root {
  --dark-navy: #0a192f;
  /* Violets très sombres */
  --dark-night-purple: #120026; /* violet nuit */
  --deep-purple: #0d001a; /* violet profond */
  --midnight-purple: #100033; /* violet très sombre tirant vers bleu */
  --indigo-deep: #0b0026; /* indigo profond */
  --cosmic-violet: #0d001f; /* presque noir, violet/bleu */
  --dark-indigo: #110022; /* bleu-violet très profond */
  --twilight-violet: #130031; /* violet nocturne tirant vers bleu */

  /* Orange très vif et énergique */
  --vibrant-orange: #ff7605;
  --sunset-orange: #ff7605; /* Comme le ciel au coucher du soleil */
  --burnt-orange: #ff7605; /* Un peu chaud et profond, mais encore vif */
  --tiger-orange: #ff7605; /* Inspiré du pelage du tigre */
  --flame-orange: #ff7605; /* Dynamique, presque feu */
  --navy: #112240;
  --light-navy: #233554;
  --slate: #8892b0;
  --light-slate: #a8b2d1;
  --lightest-slate: #ccd6f6;
  --white: #e6f1ff;
  --green: #64ffda;
  --font-sans: "Inter", sans-serif;
}

/*Global Styles */
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--navy);
  color: var(--slate);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-size: 15px;
  margin-top: 60px;
}

main {
  padding: 0 100px;
  margin: 0 auto;
  max-width: 1600px;
  min-height: 100vh;
}

section {
  padding: 70px 0;
  max-width: 900px;
  margin: 0 auto;
}
h1,
h2 {
  color: var(--lightest-slate);
  font-weight: 600;
  margin: 0 0 20px;
}

h1 {
  font-size: clamp(40px, 8vw, 80px);
}

h2 {
  font-size: clamp(16px, 4vw, 24px);
  display: flex;
  align-items: center;
  white-space: normal;
  margin-bottom: 30px;
}

h2::after {
  content: "";
  display: block;
  position: relative;
  top: 0px;
  width: 300px;
  height: 1px;
  margin-left: 20px;
  background-color: var(--light-navy);
}
p {
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.6;
  margin-bottom: 10px;
}

a {
  color: var(--vibrant-orange);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
a:hover {
  color: var(--vibrant-orange);
  /* text-decoration: underline; */
}
.button {
  color: var(--vibrant-orange);
  background-color: transparent;
  border: 1px solid var(--vibrant-orange);
  border-radius: 4px;
  font-size: clamp(12px, 1vw, 16px);
  padding: clamp(6px, 0.8vw, 12px) clamp(14px, 2vw, 24px);
  line-height: 1;
  cursor: pointer;
}

.button:hover {
  background-color: rgba(255, 118, 5, 0.08);
}

/* .logo a {
  font-size: 24px;
  font-weight: 700;
} */

/* Hero Section */
#hero {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

#hero h1 {
  font-size: clamp(40px, 8vw, 70px);
  margin: 0;
  /* transition-delay: 0.1s; */
}

#hero h2 {
  font-size: clamp(14px, 4vw, 24px);
  color: var(--slate);
  /* transition-delay: 0.1s; */
}

#hero h2::after {
  display: none;
}

/* /* exageration de transitions pour le hero section. mdr 🤣*/
/* #hero p {
  transition-delay: 0.5s;
}

#hero .button {
  transition-delay: 0.7s;
} */
/* end of exageration of transitions for the hero section. mdr 🤣*/ 

/* Contact Section */
#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
} 

#contact h2::after {
  display: none;
}

#contact p {
  max-width: 600px;
  margin: 0 auto 40px;
}


.corn-section img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Random jokes */
#joke {
  text-align: center;
}

/* Fade-in Animation */
.fade-in-hidden {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out;
}

.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}


/* footer */
footer {
  /* border-top: 1px solid var(--dark-navy); */
  text-align: center;
  padding: 20px 0;
}

footer p {
  font-size: clamp(11px, 2.5vw, 12px);
  color: var(--slate);
  opacity: 0.4;
  margin: 5px 0;
  line-height: 1.4;
}

.footer-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.footer-line {
  width: 100%;
  height: 1px;
  background-color: var(--light-navy);
  margin-bottom: 20px;
}