/* RESET */


html {
    box-sizing: border-box;
    font-size: 16px;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
  }
  
  ol, ul {
    list-style: none;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  a{
    text-decoration: none;
    color: inherit;
  }

/* GENERALS */


html{
    font-family: inter, sans-serif;
    color: var(--neutre-900);
    
}

*{
  transition: all .2s ease-in-out;
}

a{
  color: var(--neutre-500);
  font-size: var(--text-p-small);
  letter-spacing: 0.01rem;
  width: fit-content;
  font-weight: 300;

}

a:focus{
  outline: 1px dotted var(--neutre-500);
  letter-spacing: 0.01rem;
  font-weight: 500;
}

a:hover{
  letter-spacing: 0.01rem;
  font-weight: 500;
}


/* VARIABLES */

:root {
    --pure-white: #fff;
    --neutre-100: #f0f0f0;
    --neutre-200: #BABBC4;
    --neutre-500: #51566a;
    --neutre-900: #03050F;
    --adm-100: #dae6ec;
    --adm-900: #188cca;
    --outils-100: #F9E7E8;;
    --outils-900: #C7101B;
    --communication-100: #ecf5f6;
    --communication-900: #4597a5;
    --pedagogie-100: #e7edf2;
    --pedagogie-900: #145082;
    --preference-100: #f2f8ec;
    --preference-900: #7fb845;
    --scolarite-100: #FCFAE9;;
    --scolarite-900: #E5CB26 ;
    --spacing-xxs: 0.5rem;
    --spacing-xs: 0.5rem;
    --spacing-s: 1rem;
    --spacing-m: 1.5rem;
    --spacing-l: 2rem;
    --spacing-xl: 2.5rem;
    --spacing-xxl: 3rem;
    --spacing-3xl: 3.5rem;
    --spacing-4xl: 4rem;
    --spacing-5xl: 4.5rem;
    --spacing-6xl: 5rem;
    --spacing-7xl: 5.5rem;
    --spacing-8xl: 6rem;
    --spacing-9xl: 6.5rem;
    --spacing-10xl: 7rem;
    --spacing-11xl: 7.5rem;
    --spacing-12xl: 8rem;
    --spacing-13xl: 8.5rem;
    --spacing-14xl: 9rem;
    --spacing-15xl: 9.5rem;
    --spacing-16xl: 10rem;
    --margin-xxs: 0.25rem;
    --margin-xs: 0.5rem;
    --margin-s: 1rem;
    --margin-m: 1.5rem;
    --margin-l: 2rem;
    --margin-xl: 2.5rem;
    --margin-xxl: 3rem;
    --margin-3xl: 3.5rem;
    --margin-4xl: 4rem;
    --margin-5xl: 4.5rem;
    --margin-6xl: 5rem;
    --margin-7xl: 5.5rem;
    --margin-8xl: 6rem;
    --margin-9xl: 6.5rem;
    --margin-10xl: 7rem;
    --margin-11xl: 7.5rem;
    --margin-12xl: 8rem;
    --margin-13xl: 8.5rem;
    --margin-14xl: 9rem;
    --margin-15xl: 9.5rem;
    --margin-16xl: 10rem;
    --padding-xxs: 0.25rem;
    --padding-xs: 0.5rem;
    --padding-s: 1rem;
    --padding-m: 1.5rem;
    --padding-l: 2rem;
    --padding-xl: 2.5rem;
    --padding-xxl: 3rem;
    --padding-3xl: 3.5rem;
    --padding-4xl: 4rem;
    --padding-5xl: 4.5rem;
    --padding-6xl: 5rem;
    --padding-7xl: 5.5rem;
    --padding-8xl: 6rem;
    --padding-9xl: 6.5rem;
    --padding-10xl: 7rem;
    --padding-11xl: 7.5rem;
    --padding-12xl: 8rem;
    --padding-13xl: 8.5rem;
    --padding-14xl: 9rem;
    --padding-15xl: 9.5rem;
    --padding-16xl: 10rem;
    --text-p-small: 0.8331249952316284rem;
    --text-p-regular: 1rem;
    --text-p-large: 1.2000000476837158rem;
    --text-h6: 1.440000057220459rem;
    --text-h5: 1.728124976158142rem;
    --text-h4: 2.0737500190734863rem;
    --text-h3: 2.4881250858306885rem;
    --text-h2: 2.9862499237060547rem;
    --text-h1: 3.583125114440918rem;           
}


/* STYLE */

body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.mainContainer{
  max-width: 1080px;
  width: 100%;
  height: fit-content;
  background-color: var(--neutre-100);
  background-image: url(./Assets/ink-texture.webp);
  padding: var(--padding-l);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
}

.mainContainer__title{
  font-size: var(--text-h5);
  text-transform: uppercase;
  font-weight: bold;
}

.mainContainer__separator{
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid var(--neutre-200);
}

.mainLinkContainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: var(--spacing-l);
}

.linksContainer{
  width: 100%;
  background-color: var(--pure-white);
  box-shadow: 0px 12px 18px -18px rgba(0,0,0,0.3);
  padding: var(--padding-s);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.linksContainer__intraContainer{
  display: flex;
  gap: var(--spacing-xxs);
  margin-bottom: var(--spacing-xs);
}

.intraContainer__imgCtn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-m);
  aspect-ratio: 1/1;
  border-radius: 100px;

}

.imgCtn__img{
  width: var(--spacing-s);
  aspect-ratio: 1/1;
}

.intraContainer__imgCtn--administration{
  background-color: var(--adm-100);
}
.intraContainer__imgCtn--outils{
  background-color: var(--outils-100);
}
.intraContainer__imgCtn--scolarite{
  background-color: var(--scolarite-100);
}
.intraContainer__imgCtn--pedagogie{
  background-color: var(--pedagogie-100);
}
.intraContainer__imgCtn--communication{
  background-color: var(--communication-100);
}
.intraContainer__imgCtn--preferences{
  background-color: var(--preference-100);
}

.intraContainer__subtitle{
  font-size: var(--text-p-large);
  font-weight: 600;
}

.intraContainer__subtitle--administration{
  color: var(--adm-900);
}
.intraContainer__subtitle--outils{
  color: var(--outils-900);
}
.intraContainer__subtitle--scolarite{
  color: var(--scolarite-900);
}
.intraContainer__subtitle--pedagogie{
  color: var(--pedagogie-900);
}
.intraContainer__subtitle--communication{
  color: var(--communication-900);
}
.intraContainer__subtitle--preferences{
  color: var(--preference-900);
}
/* RESPONSIVE */

@media  (max-width:450px) {


.mainContainer{
  gap: var(--spacing-m);
}

  .mainLinkContainer{
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    grid-gap: var(--spacing-m);
    }
  
}