:root {
  --sonnet1-wght: 100;
  --sonnet2-wght: 100;
  --sonnet3-wght: 100;
  --sonnet4-wght: 100;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #1a1a1a;
  color: rgb(223, 223, 223);
  margin: 0;
}

a {
  color: rgb(223, 223, 223);
}

.container {
  position: relative;
}

.intro-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.intro {
  width: 60ch;
  margin: auto;
  font-size: clamp(.5rem, 0.7727rem + 1.1364vw, 1rem);
  font-weight: 600;
}

.iconamoon--arrow-up-2-light {
  display: inline-block;
  width: 4rem;
  height: 4rem; 
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 14l-5-5l-5 5'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: rotate(180deg);
}

.intro span {
  font-size: clamp(.5rem, 0.7727rem + 1.1364vw, 1rem);
  font-weight: 300;
  line-height: 1.5;
}

.phrases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: clamp(18.75rem, 4.5455rem + 71.0227vw, 90%);
  margin: auto;
  text-align: center;
  transition: all .5s;
}

.phrases div:nth-child(3n + 3) {
  grid-column: 1 / -1;
}

.phrases div {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: clamp(1rem, -0.5rem + 3.125vw, 1.5rem);
  overflow: hidden;
  border: 1px solid rgb(223, 223, 223);
  /* box-shadow: .5rem .5rem rgb(223, 223, 223); */
  border-radius: 1rem;
  padding: 1rem;
  transition: all .5s;
}

.phrases div p {
  display: inline-block;
  margin: 0;
  transition: font-weight .5s;
}

.sonnet1:hover {
  font-weight: var(--sonnet1-wght);
}

.sonnet2:hover {
  font-weight: var(--sonnet2-wght);

}

.sonnet3:hover {
  font-weight: var(--sonnet3-wght);
}

.sonnet4:hover {
  font-weight: var(--sonnet4-wght);
}

/* Ajout d'une media query pour mobile */
@media screen and (max-width: 768px) {
  .phrases {
    grid-template-columns: 1fr;
  }
}