@font-face {
  font-family: 'Inter';
  src: local('Inter'),
       url('../fonts/Inter-VariableFont_opsz,wght.ttf') format("truetype");
}
:root {
  /* hsl(204, 100%, 68%), hex : #5ebfff */
  --bulma-primary-rgb: 0, 0, 0;
  --bulma-primary-h: 204deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 68%;
  --bulma-link: var(--bulma-primary);
  --bulma-link-text: var(--bulma-primary);
}
@keyframes loopTitleSeparator{
  0% {
    width: 0;
    margin: 10px 0 10px 20px;
  }
  25% {
    width: 100px;
    margin: 10px 0 10px 20px;
  }
  50%, 100%{
    margin: 10px 0 10px 120px;
    width: 0;
  }
}
#customTitle{
  margin-bottom: 100px;
}
h1:after{
    content:"";
    display: block;
    height: 8px;
    width: 100px;
    margin: 10px 0 10px 20px;
    background-color: var(--bulma-link-text);
    animation: loopTitleSeparator infinite 3s;
  }
.customContainer{
    padding: 0 50px 50px 50px;
    margin-top: 40vh;
    min-height: 40vh;
}
.atoutGrid{
  padding: 5vh 0;
}
.atoutCell{
  margin: 0 auto 20px auto;
}
.atoutDescription{
  align-content: center;
}
.customAtoutIcon{
  background-color: rgba(0,0,0,0.2);
  padding: 20px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
  transition: transform 250ms ease-in-out;
}
.customAtoutIcon:hover{
  transform: scale(1.2)
}
.hidden{
  display: none;
  visibility: hidden;
}