@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100vw;
    max-width: 100vw;
}

body {
    background-color: rgb(245, 245, 250);/*de base 525252*/
    margin: 0;
    text-align: center;
    height: 100vw;
}

#nomPrenom {
    text-align: left;
    color: rgb(129, 129, 129);
    z-index: 2;
    grid-area: prenom;
}

.haut {
    background-color: rgb(231, 231, 231);
    height: 250px;/*il va prendre 100% de l'espace restant*/
    max-width: 100%;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 10rem;
    padding-top: 20px;
    padding-left: 50px;
    text-align: left;
}

  .text-gradient-01 {
    font-size: 4rem;
    text-shadow: 1px 1px 15px rgba(124, 124, 124, 0.479);
    color: rgb(0, 0, 0);
  }

  .text-gradient-02 {
    font-size: 4rem;
    text-shadow: 0px 0px 20px rgba(122, 123, 124, 0.455);
    color: rgb(0, 0, 0);
  }

.content {
   /* padding: 5000px 0px 0px;*/
    background-color: rgb(245, 245, 250);
    height: 1700px;
    max-width: 100%;
    /* border-top: 8px solid rgb(0, 0, 0); */
    font-size: 3rem;
    font-weight: 100;
    font-family: 'Bebas Neue', cursive;
    text-align: left;
    padding-top: 100px;
    padding-left: 50px;
    row-gap: 112px;
    box-shadow: 0px -4px 17px 20px whitesmoke;
}

.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "texte1 bt1"
    "texte2 bt2"
    "texte3 bt3"
    "texte4 bt4"
    "texte5 bt5"
    "texte6 bt6"
    "prenom vide"
 }

 #monDiv1 {
    grid-area: texte1;
 }

 #monDiv2 {
    grid-area: texte2;
 }

 #monDiv3 {
    grid-area: texte3;
 }

 #monDiv4 {
    grid-area: texte4;
 }

 #monDiv5 {
    grid-area: texte5;
 }

 #monDiv6 {
    grid-area: texte6;
 }

 #monBouton1 {
    grid-area: bt1;
    background-color: #F5F5FA;
    text-decoration: none;
    margin-left: 40px;
 }

 #monBouton2 {
    grid-area: bt2;
    background-color: #F5F5FA;
    text-decoration: none;
    margin-left: 40px;
 }

 #monBouton3 {
    grid-area: bt3;
    background-color: #F5F5FA;
    text-decoration: none;
    margin-left: 40px;
 }

 #monBouton4 {
    grid-area: bt4;
    background-color: #F5F5FA;
    text-decoration: none;
    margin-left: 40px;
 }

 #monBouton5 {
    grid-area: bt5;
    background-color: #F5F5FA;
    text-decoration: none;
    margin-left: 40px;
 }

 #monBouton6 {
    grid-area: bt6;
    background-color: #F5F5FA;
    text-decoration: none;
    margin-left: 40px;
 }

 a {
    margin-top: -12px;
    margin-left: 10px;
    cursor: default;
 }

.button {
  align-items: center;
  background: #f5f5fa;
  border: 0;
  border-radius: 8px;
  box-shadow: -10px -10px 30px 0 #ffffff,10px 10px 30px 0 #1d0dca17;
  box-sizing: border-box;
  color: #2a1f62;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  font-family: "Cascadia Code",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
  font-size: 1rem;
  justify-content: center;
  line-height: 1.5rem;
  padding: 15px;
  position: relative;
  text-align: left;
  transition: .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
  width: max-content;
  word-break: normal;
  word-spacing: normal;
}

.button:hover {
  background: #f8f8ff;
  box-shadow: -15px -15px 30px 0 #fff, 15px 15px 30px 0 #1d0dca17;
  text-decoration: none;
}

@media screen and (max-width: 990px) {
   .haut {
      height: 320px;
   }
}