/* ----------------------------------------  [ CONFIG - ROOT > VARIABLES ]  ----------*/

:root{

    /* HAUTEUR */
    --h-main: 100vh;                                                    /* SECTION : MAIN */

    /* COULEUR : BACKGROUNG */   
    --c-b-main: #202020;                                                /* SECTION : MAIN */ 

    /* COULEUR : TEXT */                                                 
}

/* ----------------------------------------  [ CONFIG - HTML ]  ----------*/

*{
  margin: 0;
  padding: 0;
}

body{
  background-color: black;
}

h1{
  color: white;
  font-weight: bold;
  font-size: 50px;
  font-family: 'Archivo', sans-serif;
}

p,a{
  color: white;
  font-weight: bold;
  font-size: 22px;
  font-family: 'Archivo', sans-serif;
}

section{
  position: relative;
}

/* ----------------------------------------  [ SECTION : MAIN ]  ----------*/

#main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--h-main);
  background-color: var(--c-b-main);
}

/* ----------------------------------------  [ CONTAINER : MAIN ]  ----------*/

#main-container-element{
  display: flex;
  flex-direction: column;
  grid-gap: 30px;
  text-align: center; 
}

#main-container-element h1{
  border: 6px solid white;
  padding: 0.5em 1em; 
}

#main-container-element a{
  color: red;
  margin-left: 0.25em;
  text-decoration: underline; 
}

#main-container-element a:hover{
  cursor: pointer; 
}

/* ----------------------------------------  [ CONTACT :: BACK ]  ----------*/

#back-link{
  color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: crimson;
  padding: 0.5em 1em;
}

#back-link:hover{
  opacity: 0.7;
}

/* ----------------------------------------  [ CONTACT :: CONTAINER : MAIN ]  ----------*/

#main-container-link{
  display: flex;
  justify-content: space-around;
  grid-gap: 8em; 
}

#main-container-link a{
  text-decoration: none;
  padding: 0.5em 1em;
  display: flex;
}

#main-container-link a:hover{
  cursor: pointer; 
}

#main-container-link a img{
  height: 75px;
  width: 75px;
}

/* ----------------------------------------  [ MEDIA QUERIES ]  ----------*/


@media only screen and (max-width: 500px){ /* --------  [ MOBILES ]  ----------*/

  /* ----------------------------------------  [ CONFIG - HTML ]  ----------*/

  h1{
    font-size: 20px;
  }

  p,a{
    font-size: 13px;
  }

  /* ----------------------------------------  [ CONTAINER : MAIN ]  ----------*/

  #main-container-element{
    grid-gap: 60px; 
  }

  #main-container-element h1{
    border: 3px solid white;
	  padding: 0.5em 1em; 
  }

  /* ----------------------------------------  [ CONTACT :: CONTAINER : MAIN ]  ----------*/

  #main-container-link{
    flex-direction: column;
    grid-gap: 3em;  
  }

  #main-container-link a{
    font-size: 22px;
    text-align: center;
  }

  #main-container-link a img{
    height: 65px;
    width: 65px;
  }

}