:root {
  --background-color : #0f4f75;
  /* light color */
  --background-color-light : #3282b8;
  --blue-component : #4fc6d1;
  
  --yellow-title : #dce120;
  --blue-title : #4fc6d1;
  --text-color : #fff;
  --hydro-red : #e64301;
  --hydro-wax : #f5e281;

  --dark-bg : #1c1c1c;

  --main-title-font: 'Dela Gothic One', cursive;
  --subtitle-font: 'Ubuntu', sans-serif;
  --title-font: 'Epilogue', sans-serif;
  --text-font: 'Inter', sans-serif;
  --other-font: 'Montserrat', sans-serif;
}

@font-face {
	font-family: 'Forque';
	src: url('Forque.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--other-font);
  background: var(--background-color);
}

main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  width: 60%;
  margin-bottom: 4rem;
  position: relative;
}

section h1 {
  font-size: 3rem;
  text-align: center;
  font-family: var(--title-font);
  color: var(--yellow-title);
}

section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: var(--title-font);
  color: var(--yellow-title)
}

section h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: var(--title-font);
  color: var(--blue-title)
}

section p, section li {
  text-align: justify;
  font-weight: 300;
  font-size: 1.25rem;
  font-family: var(--text-font);
  color: var(--text-color);
}

section li {
  margin-left: 4rem;
  margin-top: 0.5rem;
  list-style: square;
}

section .sub {
  margin-bottom: 2rem;
  margin-left: 4rem;
}

section img {
  width: 20rem;
  height: auto;
}

section .show {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
  align-items: center; /* add this line */
}

.show p {
  margin-left: 2rem;
}

.gframe {
  width: 100%;
  display: flex;
}

article {
  position: block;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 8rem;
  min-height: 10rem;
  background-color: var(--background-color-light);
}

.mm5 {
  margin-top: -35rem;
}

article h1 {
  font-size: 3rem;
  text-align: center;
  font-family: var(--title-font);
  color: var(--yellow-title);
}

.title-content{
  /* font-family: 'Forque', sans-serif; */
  font-family: var(--main-title-font);
  text-align: center;
  margin-bottom: 11rem;
}
.title-content h1{  
  /* font-size: 6rem; */
  font-size: 3.5rem;
  /* font-stretch: 300%; */
  color: #fff;
}
.title-content p{
  font-family: var(--subtitle-font);
  font-size: 1.5rem;
  color: var(--text-color);
}

.blue {
  color: var(--blue-title);
}

svg {
  margin-top: -4rem;
}

.zephyr_glace{
  width: 60rem;
  filter: brightness(50%);
}

.wiki-projet h1{
  color:#fff
}

.wiki {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
}

.link_svg{
  height: 60px;
  width: 60px;
}

iframe {
  aspect-ratio: 16/9;
  width: 100vh;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin-bottom: 5rem;
}

/* .message{
  
} */



::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #666;
}
::-webkit-scrollbar-thumb {
  background: var(--blue-component);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3eb5c0;
}






/* From Uiverse.io by abrahamcalsin */ 
/* https://uiverse.io/abrahamcalsin/sour-donkey-65 */
button {
  margin-top: 2%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: var(--background-color);
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  cursor: pointer;
  border: none;
}

button:after {
  content: " ";
  width: 0%;
  height: 100%;
  background: #ffd401;
  position: absolute;
  transition: all 0.4s ease-in-out;
  right: 0;
}

button:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

button a {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 18px 25px;
  color: #fff;
  font-size: 1.125em;
  font-weight: 700;
  letter-spacing: 0.3em;
  z-index: 20;
  transition: all 0.3s ease-in-out;
}

button:hover a {
  color: #183153;
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}




/* From Uiverse.io by somshri16 */ 
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.flex {
  display: flex;
  width: 100%;
  gap: 3em;
}

/* From Uiverse.io by Maximinodotpy */ 
.inputGroup {
  font-family: 'Segoe UI', sans-serif;
  margin: 1em 0 1em 0;
  max-width: 190px;
  position: relative;
}

.inputGroup input {
  font-size: 100%;
  padding: 0.8em;
  outline: none;
  border: 2px solid ;
  border-color: var(--blue-component);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  width: 100%;
}

.inputGroup label {
  font-size: 100%;
  position: absolute;
  left: 0;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: all 0.3s ease;
  color: var(--yellow-title);
}

.inputGroup :is(input:focus, input:valid)~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 0.4em;
}

.inputGroup :is(input:focus, input:valid) {
  border-color: rgb(150, 150, 200);
}