* {
  margin: 0;
}
:root {
  --main-color: #2C443B;
  --main-color-2: #34715A;
  --secondary-color: #CA7563;
  --main-background-color: #3F4540;
  --secondary-background-color: #232523;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  background-color: var(--main-background-color);  
}



/* 
 Header et Footer
*/
header {
  height: 5rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: ;
  width:100%;
  background-color : var(--main-color);
  color: white;
  font-size: 45pt;
  font-family: Stencil Std, fantasy ;
  text-decoration: underline ;
}
footer {
  height: 17rem;
  text-align: left;
  align-items: center;
  justify-content: center;
  color: ;
  width:125%;
  background-color : var(--main-color);
  color: white;
  font-size: 20pt;
  font-family: Stencil Std, fantasy ;
  text-decoration: underline ;
}



/*
Navbar
*/
.navbar {
  width:100%;
  background-color: var(--main-color-2);
  height: 3rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
  flex-direction: row;
}

.navbar-item {
  background-color: transparent;

  color: white;
  text-decoration: none;
  font-size: 15px;

  border-radius: 10px;
  border: 2px solid white;

  padding: 8px;
  margin: 1rem;
  transition: 0.5s;
}
.navbar-item:hover {
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}


/*
Article
*/
.article {
  opacity: 0.9;
  flex-basis: 50%;
  display : flex;  
  flex-wrap: wrap;
  background-color: var(--secondary-background-color);  
  text-align:center;
  align-items :center;
  height: 100%;

}
.article-title {
  margin:2rem;
  color:white;
  text-orientation: upright;
  font-size: 40px;
  text-align:center;
}

.article-text {
  margin:3rem;
  color: white;
  font-size: 180%;
  text-align:left;
  align-items :left;
}

.sidebar {
  flex-basis: 25%;
}











#hacker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0.2;
}

.def {  
  display :none;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  background-color : grey; 
  margin : 10px; 
  width:35%;
  border-radius: 5px;
}



.images{
  position:relative;
  top:-00px;
  right:-30px;
  height:350px;
  width:600px;
  border-radius: 5px; 
}
.texte1{
  color: white;
  font-size: 80%;
  text-align:left;
  margin:8px;
  position:flex;
  top:-50px;
}
.images1{
  position:relative;
  top:-700px;
  right:-30px;
  height:325px;
  width:600px;
  border-radius: 5px; 

}
a[href^="mailto"]::before {
  content: "📧 ";
}

a[href^="tel"]::before {
  content: "📞 ";
}