body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

.bg {
    background-image:  url("../images/fondfortfolio1.png") ;
   /*background-color: #003C31;*/
    /* Full height */
  /*height: 200em; */

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/*#logo {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 7%;
    animation-name: logoa;
    animation-duration: 4s;
}

@keyframes logoa{
    from {opacity: 0%; scale: 0.5;}
    to {opacity: 100%;}

}*/

.btn1 {
    background-color: rgb(0, 128, 69);
    border-radius: 50px;
    color: white;
    border: solid 5px white;
    padding-inline: 3%;
    display: block;
    margin-inline: auto;
    box-shadow: 5px 5px 5px black;
    transition: 1s;
    animation-name: btna;
    animation-duration: 4s;
    position: relative;
    scroll-behavior: smooth;
    margin-top: 5%;
}

@keyframes btna{
    from {opacity: 0%;top:100px;}
    to {opacity: 100%;top:0px;}
}

.btn1:hover {
    background-color: white;
    border-radius: 50px;
    color: rgb(0, 128, 69);
    border: solid 5px white;
    padding-inline: 3%;
    transform: scale(1.1);
}

.btndw{
    background-color: rgb(24, 189, 51);
    border-radius: 50px;
    color: white;
    border: solid 5px white;
    padding-inline: 3%;
    display: block;
    margin-inline: auto;
    box-shadow: 5px 5px 5px black;
    transition: 1s;
    animation-name: btnb;
    animation-duration: 4s;
    position: relative;
    scroll-behavior: smooth;
}
@keyframes btnb{
    from {opacity: 0%;right:100px;}
    to {opacity: 100%;right:0px;}
}

.btndw:hover {
    background-color: rgb(33, 56, 170);
    border-radius: 50px;
    color: rgb(255, 255, 255);
    border: solid 5px white;
    padding-inline: 5%;
    transform: scale(1.1);
}

.contenu {
    /*margin-top: 10%;*/
    background-color: rgba(255, 255, 255, 0.825);
    padding-inline: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-inline: 2%;
    border-radius: 50px;
}

.contenu2 {
    background-color: rgba(255, 255, 255, 0.825);
    padding-inline: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-inline: 2%;
    border-radius: 50px;
    margin-top: 5%;
    height: 95%;
}

.imgbg {
    background-image:  url("../images/bgbloc.jpg") ;
    /* Full height */
 /* height: 50em; */

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

.rimg{
    transition: 1s;
}

.rimg:hover{
    transform: scale(0.9);
}

.wowtxt {
color: black;
animation-name: txta;
animation-duration: 4s;
position: relative;
}
@keyframes txta {
    from {left:100px;}
    to {left:0px;}
}
.wowtxt:hover {
    color: blueviolet;
}

.imgcomp {
    max-width: 100%;
    
}

.titcomp {
    text-align: center;
    padding-top: 10%;
    
}

.textcomp {
    padding-top: 5%;
}


#titlepage {
    color: white;
    padding-left: 5%;
    padding-top: 100px;
    width: fit-content;
    margin-left: 0;
    
}

#titlepage h1{
    font-weight: bold;
    font-size: 300%;
    font-family: 'Consolas';  
}

.bighr {
    background-color: rgb(255, 255, 255); 
    height: 5px; 
    border:0; color:white; 
    opacity:1
}

.menu {
    background-color: rgb(255, 255, 255);
    text-align: center;
    font-size: 150%;
    font-weight: bold;
    min-height: 3em;
    padding-top: 0.7em;
    margin-top: 100px;
    font-family: 'Consolas';   
    box-shadow: 5px 5px 5px rgb(70, 70, 70);
   
}
.menu .t1{
    color: green;
    text-decoration: none !important;
}
.menu .t2{
    color: rgb(255, 201, 5);
    text-decoration: none !important;
}
.menu .t3{
    color: rgb(0, 82, 197);
    text-decoration: none !important;
}
.menu .t4{
    color: rgb(255, 162, 0);
    text-decoration: none !important;
}

.col-sm-3 :hover {
    color: gray !important;
    transition: 1s;
    font-size:110%;
}

#apropos {
    background-color: rgba(255, 255, 255, 0.900);
    border-left: green solid 10px;
    padding-top: 5em;
    padding-bottom: 5em;
}

.apropostitle {
    font-family: 'Consolas';  
    color: green;
}

.aproposcontent{
    margin: 0 5% 0 5%;
    background: white;
    padding: 20px;
     border-radius: 5px; 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); 
}

.par {
    text-align: justify;
    margin-left: 20px;
}

#parcours {
    background-color: rgba(255, 255, 255, 0.9);
    border-left: rgb(255, 201, 5) solid 10px;
    padding-top: 5em;
    padding-bottom: 5em;
}

.sousparcours{
    margin: 0 5% 0 5%;
    background: white;
    padding: 20px;
     border-radius: 5px; 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); 
}

li{
    list-style-type: none;
}

.paragraphe{
    border-left: solid rgb(181, 181, 181) 1px;
}

.souspar h2 {
    font-family: 'Consolas';  
    color: rgb(255, 201, 5);
}

.competencescontent{
    margin: 0 5% 0 5%;
    background: white;
    padding: 20px;
     border-radius: 5px; 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); 
}

#competences {
    background-color: rgba(255, 255, 255, 0.900);
    border-left: rgb(0, 82, 197) solid 10px;
    padding-top: 5em;
    padding-bottom: 5em;
}

.competencestitle {
    color: rgb(0, 82, 197);
}

.sousprojets{
    margin: 0 5% 0 5%;
    background: white;
    padding: 20px;
     border-radius: 5px; 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); 
}

#projets {
    background-color: rgba(255, 255, 255, 0.900);
    border-left: rgb(255, 162, 0) solid 10px;
    padding-top: 5em;
    padding-bottom: 5em;
}

.projetstitle {
    color: rgb(255, 162, 0);
}