@font-face {
  font-family: 'ALoveofThunder';
  src: url('./police/ALoveofThunder.eot'); /* IE9 Compat Modes */
  src: url('./police/ALoveofThunder.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./police/ALoveofThunder.woff2') format('woff2'), /* format de police WOFF2 pour les navigateurs modernes */
       url('./police/ALoveofThunder.woff') format('woff'), /* format de police WOFF pour une meilleure compatibilite */
       url('./police/ALoveofThunder.ttf') format('truetype'); /* format de police TrueType pour une compatibilite maximale */
  font-weight: normal;
  font-style: normal;
}

html, body{
  margin:0rem;
  padding:0rem;
  width:100%;
  font-family:century gothic;
}
p, h2, h3, h4, h5, ul, li, a, span{
  margin:0em;
  padding:0em;
  font-size:1.5rem;
  font-weight:300;
}
h1{
  margin: 0% auto 1% auto;
  width:100%;
  text-align: center;
  font-size: 10rem;
  font-weight: 500;
  font-family: ALoveofThunder, serif;
  color: #152214;
}
.clear{
  clear:both;
}

#conteneur-id{
  width:100%;
}

/*MENU*/

.menu{
  width:100%;
  background-color:white;
  box-shadow: 0.125rem 0.125rem 0.75rem 0.125rem rgba(0, 0, 0, 0.2);
  margin:auto;
  text-align:center;
  position:fixed;
  z-index:999;
}
.menu ul{
  width:100%;
  margin:auto;
  padding:0.938rem 0rem;
}
.menu li{
  display:inline-block;
  padding:0.313rem;
}
.menu a{
  text-decoration:none;
  color:black;
  background-color:#DDD;
  transition:0.4s;
  padding:0.313rem 1.563rem;
}
.menu a:hover{
  text-decoration:none;
  color:#999;
  background-color:#FFF;
  transition:0.4s;
}


/*HOME*/

#conteneur-home{
  width:100%;
}
.home{
  width:100%;
  font-size: 10rem;
  font-weight: 500;
  font-family: ALoveofThunder, serif;
  color: #152214;
}
/*SKILLS*/

#conteneur-skills{
  padding:3.125rem 0;
}
.skills{
  max-width:960px;
  width:100%;
  margin:auto;
}
.title h2{
  padding-bottom:1.563rem;
  font-size:2.125rem;
  font-weight:100;
  text-align:center;
  text-transform:uppercase;
}
.title p{
  padding-bottom:4.688rem;
  text-align:center;
  width:100%;
  margin:auto;
}
.title h3{
  padding-bottom:1.563rem;
  font-weight:100;
  text-align:center;
  text-transform:uppercase;
}
.title a{
  text-decoration:none;
  color:black;
  background-color:#DDD;
  transition:0.4s;
  padding:0.313rem 1.563rem;
}
.title a:hover{
  text-decoration:none;
  color:#999;
  background-color:#FFF;
  transition:0.4s;
}
/*ABOUT*/

#conteneur-about{
  padding:6.25rem 0.925rem 0 0;
  background-color:#EEE;
}
.about{
  max-width:960px;
  width:100%;
  margin:auto;
}
.profil-photo{
  width:50%;
  float:left;
}
.profil-photo img{
  width:90%;
}
.profil-text{
  width:50%;
  float:left;
  position:relative;
}
.profil-text h2{
  padding-bottom:0.938rem;
  font-size:1.563rem;
  font-weight:100;
  text-transform:uppercase;
}
.profil-text p{
padding-bottom:4.688rem;
text-align:justify;
}
.profil-text a{
  position:absolute;
  bottom:0rem;
  left:0rem;
  text-decoration:none;
  color:black;
  background-color:#DDD;
  transition:0.4s;
  padding:0.313rem 1.563rem;
  border:0.063rem solid white;
}
.profil-text a:hover{
  text-decoration:none;
  color:#999;
  border:0.063rem solid #999;
  background-color:#FFF;
  transition:0.4s;
}

/**footer**/
#conteneur-footer{
  padding:0.625rem 0 0 0;
  background-color:#000;
  color:#FFF;
  text-align:center;
}
.footer a{
  color:#FFF;
  text-decoration:none;
  padding-top:3.125rem;
  transition:0.4s;
}
.footer a:hover{
  color:#DDD;
  text-decoration:none;
  transition:0.4s;
}

/* Contact */

#conteneur-contact{
  width:100%;
  padding:6.25rem 0 0 0;
  background-color:#EEE;
}
.contact{
  max-width:960px;
  width:100%;
  margin:auto;
}
.contact-photo{
  width:50%;
  float:left;
}
.contact-photo img{
  width:90%;
}
.contact-text{
  width:50%;
  float:left;
  position:relative;
}
.contact-text h2{
  padding-bottom:0.938rem;
  font-size:1.563rem;
  font-weight:100;
  text-transform:uppercase;
}
.contact-text p{
padding-bottom:4.688rem;
text-align:justify;
}

.contact-in input{ 
  width: 100%;
  height: 0.5rem;
  resize: vertical;
  padding: 0.313rem;
  font-size: 0.938rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.contact-input textarea{ 
  width: 100%;
  height: 12.5rem;
  resize: vertical;
  padding: 0.313rem;
  font-size: 0.938rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.contact-in select{ 
	width: 100%;
	font-size:0.938rem;
}

.contact-text label{ 
	font-size:0.938rem;
	font-weight:bold;
}

.contact-text button{
  text-decoration:none;
  color:black;
  background-color:#DDD;
  transition:0.4s;
  padding:0.625rem 2.188rem;
  font-size:0.938rem;
  position:center;
}
.contact-text button:hover{
  text-decoration:none;
  color:#999;
  background-color:#FFF;
  transition:0.4s;
}

@media (min-width: 1281px){
  html, body{
    width:100%;
  }
  p, h2, h3, h4, h5, ul, li, a, span{
    font-size:100%;
    font-weight:100%;
  }
  img {
    max-width: 100%; 
  }
}

@media (min-width: 1025px) and (max-width: 1280px){
  html, body{
    width:100%;
  }
  p, h2, h3, h4, h5, ul, li, a, span{
    font-size:100%;
    font-weight:100%;
  }
  img {
    max-width: 100%; /* Reduce image width for smaller screens */
  }
	h1{
    font-size: 90%;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  html, body{
    width:100%;
  }
  p, h2, h3, h4, h5, ul, li, a, span{
    font-size:100%;
    font-weight:100%;
  }
  img {
    max-width: 100%; /* Reduce image width for smaller screens */
  }
	h1{
    font-size: 70%;
  }
}

@media (min-width: 481px) and (max-width: 767px){
  html, body{
    width:100%;
  }
  p, h2, h3, h4, h5, ul, li, a, span{
    font-size:100%;
    font-weight:100%;
  }
  img {
    max-width: 100%; /* Reduce image width for smaller screens */
  }
	 h1{
    font-size: 50%;
    margin: -15% auto 1% auto;
  }
}

@media (max-width: 480px){
  html, body{
    width:100%;
  }
  p, h2, h3, h4, h5, span{
    font-size:80%;
    font-weight:80%;
  }
  ul, li, a{
    font-size:90%;
    font-weight:90%;
  }
  img {
    max-width: 100%; /* Reduce image width for smaller screens */
  }
  #conteneur-home{
    padding:1rem 0 0 0;
  }
  h1{
    font-size: 40%;
    margin: -30% auto 1% auto;
  }
  .contact-input textarea{ 
    width: 90%;
  }
  .contact-in input{ 
    width: 90%;
  }
}