@font-face {
 font-family: technoFont;
 src: url("/fonts/KHGummi.otf") format("opentype")
}

@font-face {
 font-family: picnicFont;
 src: url("/fonts/PicNic.otf") format("opentype")
}

@font-face {
 font-family: transistyrFont;
 src: url("/fonts/transistyr.ttf") format("opentype")
}

@font-face {
 font-family: lithopsFont;
 src: url("/fonts/Lithops.otf") format("opentype")
}

*, *::before, *::after {
 box-sizing: border-box
}

body {
 background-color: #0B132B;
 font-family: sans-serif;
 font-size: 1em;
 color: #FFF2F1
 
}
/*
img, div {
	outline: 2px dotted #edff00;
}*/

h1 {
 font-family: technoFont, monospace;
 font-size: 3rem;
 color: #0B132B
}

h2 {
 font-family: monospace;
 font-size: 2.5em
}

img {
 width: 100%;
 max-width: 600px;
 height: auto
 }
 
.header {
  background-color: #6449E9;
  width: 100%;
  height: auto;
  padding: 20px;
  text-align: center;
  font-size: 20vw;
  font-family: lithopsFont;
  color: #23F0C7;
}

.row {
  display: flex;
  flex-direction: row;
  padding: 3em 0;
  gap: 1em;
}

.columnXL {
  background-color: #6449E9;
  width: 70%;
  padding: 2em;
}

.columnS {
  background-color: #6449E9;
  width: 30%;
}
  
.cloud {
  display: flex;          /* Active Flexbox */
  flex-wrap: wrap;        /* Permet aux images de passer à la ligne */
  gap: 10px;             /* Espace entre les images */
  justify-content: center; /* Centre les images horizontalement */
  padding: 10px;         /* Espace autour de la galerie */
}

.cloud img {
  max-width: 200px;
  border-radius: 10px;
  height: 40%
}