@import url('https://fonts.googleapis.com/css2?family=Abel&family=Fjalla+One&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

body{
  margin: 0 auto;

}

h1{
  font-family: "Fjalla One";
  font-size: 5em;
  margin: 0;
}

footer{
    position: fixed ;
    bottom:0;
    text-align:center;
}
a{
text-decoration: none;
  color: #dbd7d3;
  font-family: 'Abel';
}
/* NAV */
nav.shift ul li a {
  position:relative;
  z-index: 1;
}
nav.shift ul li a:hover {
  color: #dbd7d3;
}
nav.shift ul li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #363121;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}
nav.shift ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
nav {
  padding: 40px 0;
  background: #dbd7d3;
  font-size: 1.2em;
}
nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #363121;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
  font-family: "Fjalla One";

}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
p{
  font-family: "Lora";
  padding-bottom: 10%;
}
.loading-screen{
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #363121;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1.5s ease;
}

#typewriter{
  font-family: "Fjalla One";
  color: #dbd7d3;
  font-size: 2em;
}

/* index */

.moi{
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  padding-bottom: 5rem;
}

.bouton_savoirplus{
text-decoration: none;
  
  background-color: #363121;
  color: #dbd7d3;
  padding: 10px;
  border: solid 3px #dbd7d3;
  font-size: 1.5em;
  text-decoration: none;
  font-family: "Fjalla One";
}

.bouton_savoirplus:hover{
  background-color: #dbd7d3;
  color: #363121;
  transition: all 1s ;
}
.moi img{
  width: 32.5%;
}
.cercle_fonce{
  width: 700PX;
  position: absolute;
  height: 700px;
  border-radius: 50%;
  background-color: rgb(54, 39, 33,0.7);
  top: -70%;
  left: 56%;
  z-index: -1;
}

.cercle_clair{
  width: 600px;
  position: absolute;
  height: 600px;
  border-radius: 50%;
  background-color: rgb(219, 215, 211,0.7);
  top: 28%;
  left: -12%;
  z-index: -1;
}
.filtre{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  color: #dbd7d3;
}

.filtre h1{
  position: absolute;
  top: 1em;
  left: 2em;
}
.filtre p{
  position: absolute;
  top: 10em;
  left: 7em;
  font-size: 1.5em;
}
.filtre a{
  position: absolute;
  left: 5em;
  top: 11em;
  color: #dbd7d3;
  border: solid #dbd7d3;
  font-size: 2em;
  text-decoration: none;
  padding: 10px;
}

.filtre a:hover{
  color: black;
  background: white;
  transition: all 1s ;
}

.texte-moi{
  transition: all 1.5s ease;
  transform: translate(-400px);
  text-align: center;
}

.test{
  opacity: 0;
  transform: translateY(50px);
  transition: all 2s ease;
  background-color: #363121;
  padding: 20px;
  margin: 20px;
  border-radius: 2em;
  text-align: center;
  font-size: 1.5em;
  color: #dbd7d3;
}
.projet{
  width: 33%;
}
.projet img{
    width:100%;
    object-fit:cover;
}

.projet video{
    width: 100%;   
}
.conditions{
    color:white;
    margin-left:2em;
    margin-right:2em;
}

.projets{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    padding:2em;
}