p {
    font-family: serif;
}

.p1{ 
  display:flex;
  font-size:40px;
  align-self: center;
}




h1 {
    color: rgb(54, 106, 165);
    text-shadow: 2px 2px 15px #3e08a1;
}

body {
    display: flex;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0.19371498599439774) 0%, rgba(103,208,230,1) 100%);
    
    
    
    
}

main{
  display: flex;
  justify-content:space-between ;
  padding: 5%;
  width: 100%;
}


  

#section1{
  display :flex;
  flex-direction:column ;
  height: 1000px;  
  width:45%;
  border:solid;
  padding-left: 1%;
  font-size: 20px;
  background-color: #f4f3fa; 
 
}

.gauche{width: 35%; float: left;}
.droite{width: 65%; float: left;}

.clearfix{clear: both;}


.container{
  position: relative;
  max-width: 500px;
  width:90%;
  background:#a3d6ee; 
  padding: 1px 10px;
  border-radius: 7px;
  margin-bottom: 3%;
}

.container .skill-box{
  width: 100%;
  margin: 25px 0;
}

.skill-box .title{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color:black
}

.skill-box .skill-bar{
 height:8px;
 width: 100%;
 border-radius: 6px;
 margin-top: 6px;
 background:#9b899b;
 animation: progress 0.70s ease-in-out forwards;
 opacity:0
}

.skill-bar .skill-per{

  position: relative;
  display: block;
  background: rgb(29, 46, 199);
  width: 50%;
  height: 100%;
  border-radius: 9px;
}

.skill-per.HTML{
  width: 30%
}

.skill-per.CSS{
  width: 30%
}

.skill-per.Python{
  width: 20%
}

@keyframes progress {
  0%{
    width:0;
    opacity: 0;
  }
  100%{
    opacity: 1;
  }

}
.skill-per .tooltip{
  position: absolute;
  right: -10px;
  top: -28px;
  font-size: 9px;
  font-weight: 500;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  background: #99b8e7;
  z-index: 1;
}

.tooltip::before{
  content:'';
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 10px;
  width: 10px;
  z-index: -1;
  background-color:#99b8e7; 
  transform: translateX(-50%) rotate(45deg);
}

#right-box{
  width: 45%;
  background-color: #f4f3fa; 
  height: 950px;
  padding:30px 50px;
	box-shadow: -7px 2px 15px 2px #90aac0;
  margin-left: 10%;
  margin-right: 10%;
  font-size: 17px;
}
  

#projets{
  display: flex;
  height: 1200px;
  width: 40%;
  background-color: #f4f3fa; 
  flex-direction: column;
  border:solid;
  align-items: center;
  font-size: 30px;

}

.titre3{
  font-size: 50px;

}




.button-64 {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
}

.button-64:active,
.button-64:hover {
  outline: 0;
}

.button-64 span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}

.button-64:hover span {
  background: none;
}

@media (min-width: 768px) {
  .button-64 {
    font-size: 24px;
    min-width: 196px;
  }
}