html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: #2B0934;
  font-family: 'IBM Plex Mono', monospace;

  /* conteneur qui garde le ratio de Figma */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.main {
  position: relative;

  /* largeur adaptative */
  width: 100vw;

  /* garde le ratio de la maquette (4658 / 1440 ≈ 3.234) */
  aspect-ratio: 1440 / 4658;

  background-image: url('ressources/background.svg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain; /* garde les proportions */
}


/*---------- WELCOME ----------*/

.blink-on-load {
  position: absolute;
  color: #FF0000;  
  font-size: calc(50 / 1440 * 100vw); 
  left: calc(780 / 1440 * 100%);
  top: calc(172 / 4658 * 100%);
  animation: blink 0.2s ease-in-out 3; 
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}



/*---------- SKILLS ----------*/

#voyant_skills_1 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2237 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_skills_2 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2324 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_skills_3 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2411 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_skills_4 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2497 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_skills_5 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2584 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_skills_6 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2671 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_skills_7 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2758 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_skills_8 {
  position: absolute;
  left: calc(228 / 1440 * 100%);
  top: calc(2845 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}


/*---------- PROJECTS ----------*/

#voyant_projects_1 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2237 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_projects_2 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2324 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
}
#voyant_projects_3 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2411 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_projects_4 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2497 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_projects_5 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2584 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_projects_6 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2671 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_projects_7 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2758 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}

#btn_projects_1 {
  position: absolute;
  left: calc(598 / 1440 * 100%);
  top: calc(2826 / 4658 * 100%);
  width: calc(240 / 1440 * 100vw);
  height: auto;
}


/*---------- CERTIFICATIONS ----------*/

#voyant_certifications_1 {
  position: absolute;
  left: calc(968 / 1440 * 100%);
  top: calc(2237 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_certifications_2 {
  position: absolute;
  left: calc(968 / 1440 * 100%);
  top: calc(2324 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
}
#voyant_certifications_3 {
  position: absolute;
  left: calc(968 / 1440 * 100%);
  top: calc(2411 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_certifications_4 {
  position: absolute;
  left: calc(968 / 1440 * 100%);
  top: calc(2497 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_certifications_5 {
  position: absolute;
  left: calc(968 / 1440 * 100%);
  top: calc(2584 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}
#voyant_certifications_6 {
  position: absolute;
  left: calc(968 / 1440 * 100%);
  top: calc(2671 / 4658 * 100%);
  width: calc(31 / 1440 * 100vw);
  height: auto;
}


/*---------- REFERENCES ----------*/

#bouton_references_11 {
  position: absolute;
  left: calc(225 / 1440 * 100%);
  top: calc(3274 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_12 {
  position: absolute;
  left: calc(406 / 1440 * 100%);
  top: calc(3274 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_13 {
  position: absolute;
  left: calc(576 / 1440 * 100%);
  top: calc(3274 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_14 {
  position: absolute;
  left: calc(746 / 1440 * 100%);
  top: calc(3274 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_15 {
  position: absolute;
  left: calc(916 / 1440 * 100%);
  top: calc(3274 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_16 {
  position: absolute;
  left: calc(1086 / 1440 * 100%);
  top: calc(3274 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}

#bouton_references_21 {
  position: absolute;
  left: calc(225 / 1440 * 100%);
  top: calc(3530 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_22 {
  position: absolute;
  left: calc(406 / 1440 * 100%);
  top: calc(3530 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_23 {
  position: absolute;
  left: calc(576 / 1440 * 100%);
  top: calc(3530 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_24 {
  position: absolute;
  left: calc(746 / 1440 * 100%);
  top: calc(3530 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_25 {
  position: absolute;
  left: calc(916 / 1440 * 100%);
  top: calc(3530 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}
#bouton_references_26 {
  position: absolute;
  left: calc(1086 / 1440 * 100%);
  top: calc(3530 / 4658 * 100%);
  height: calc(136 / 1440 * 100vw);
  width: auto;
}


/*---------- CONTACTS ----------*/

#btn_contacts_1 {
  position: absolute;
  left: calc(177 / 1440 * 100%);
  top: calc(4120 / 4658 * 100%);
  width: calc(158 / 1440 * 100vw);
  height: auto;
}
#btn_contacts_2 {
  position: absolute;
  left: calc(150 / 1440 * 100%);
  top: calc(4270 / 4658 * 100%);
  width: calc(158 / 1440 * 100vw);
  height: auto;
}
#btn_contacts_3 {
  position: absolute;
  left: calc(122 / 1440 * 100%);
  top: calc(4420 / 4658 * 100%);
  width: calc(158 / 1440 * 100vw);
  height: auto;
}


/*---------- COPYRIGHT ----------*/

.copyright {
  position: absolute;
  color: #2B0934;  
  font-size: calc(15 / 1440 * 100vw); 
  bottom: 0.25%;
  left: 1.5%;
  
}