@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@1,6..96,500&display=swap');


*{

  margin: 0;
  box-sizing: border-box;
}

main {
  width: 75%;
  float: right;
}

.Image img{
  width: auto;
  height: auto;
  border: 2px solid goldenrod;
}

.cv {
  padding-left: 2em;
  padding-right: 2em;
}

.bouton{
 margin-left: 30%;
}

 .bouton a{
  color: #FFFFFF8C;
   font-style: italic;
  border: 2px solid #FFFFFF8C;
  background: transparent;
  border-radius: 10%;
  font-size: 2rem;
 }

 .bouton a:hover{
  color: goldenrod;
  border: 2px solid goldenrod;
  background-color: transparent;
  transition: all 0.5s ease;
 }

 /* --------------------------------------NAVBAR---------------------------------------------------- */
.navbar{
    background-image: url("img/SL-061319-20750-48.jpg") ;
    border-right: 2px solid goldenrod;
    font-size: 1.3em;
}

.nav-link {
    font-family: 'Advent Pro' , Arial, sans-serif;
    font-style: italic;
}

.nav-item :hover{
  border-bottom: 2px solid goldenrod;
  border-left: 2px solid goldenrod;
  transition: all 0.5s ease;
  font-style: normal;
}

.navbar-brand{
position: absolute;
margin-top: 60%;
border: 10px solid goldenrod;
border-radius: 80%;
padding: 15%;
font-family: 'Bodoni Moda', Arial, sans-serif;
}
/* --------------------------------------Fin NAVBAR---------------------------------------------------- */

.titre{
    border-bottom: 1px solid goldenrod;
    margin-bottom: 1em;
}

p{
  color: #FFFFFF8C;
  font-size: x-large;
}

h1{
  color:#FFFFFF8C;
}

h2{
 color: #FFFFFF8C;
}

h5{
  color: #FFFFFF8C;
}

.parallax-effect {
    background-image: url("https://i.pinimg.com/originals/44/83/21/4483219ef2179b10abc4e562d586362c.jpg");
    min-height: 600px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .Fond{
    border: 1px solid goldenrod;
  }

  .Fond p{
    display: flex;
    justify-content: center;
    padding-top: 1em;
  }

  .typewriter {
    font-family: Courier, monospace;
	display: inline-block;
}

.typewriter-text {
    display: inline-block;
  	overflow: hidden;
  	letter-spacing: 2px;
 	animation: typing 5s steps(30, end), blink .75s step-end infinite;
    white-space: nowrap;
    font-size: 25px;
    font-weight: 700;
    color: goldenrod;
    border-right: 4px solid goldenrod;
    box-sizing: border-box;
}

@keyframes typing {
    from { 
        width: 0% 
    }
    to { 
        width: 100% 
    }
}

@keyframes blink {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: goldenrod; 
    }
}


  /* ----------------------PARTIE-----Apropos--------------------------- */





   /* ----------------------PARTIE-----Apropos--------------------------- */
  .svg-inline--fa {
    height:7em;
    color: goldenrod;
  }
  
  /* ----------------------------------Caroussel--------------------------------------------------- */
  main#carousel {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    width: 100vw;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    --items: 3;
    --middle: 3;
    --position: 1;
    pointer-events: none;
  }
  
  div.item {
    position: absolute;
    /* width: 300px;
    height: 400px;
    background-color: rgb(0, 0, 0); */
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r)))
      translateX(calc(-300px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
  }

  div.item:nth-of-type(1) {
    --offset: 1;
  }
  div.item:nth-of-type(2) {
    --offset: 2;
  }
  div.item:nth-of-type(3) {
    --offset: 3;
  }

  input:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  input:nth-of-type(1):checked ~ main#carousel {
    --position: 1;
  }
  
  input:nth-of-type(2) {
    grid-column: 3 / 1;
    grid-row: 2 / 3;
  }
  input:nth-of-type(2):checked ~ main#carousel {
    --position: 2;
  }
  
  input:nth-of-type(3) {
    grid-column: 1 /2;
    grid-row: 2 / 3;
  }
  input:nth-of-type(3):checked ~ main#carousel {
    --position: 3;
  }

    .item img{
      height: 15rem;
      width: 100%;
    }
    .item .card{
      background-color: rgba(1, 9, 24, 0.639);
      border: 5px solid goldenrod;
    }

  /* ----------------------------------Fin Caroussel--------------------------------------------------- */

  .footer div{
    height: 13em;
    width: 100%;
    background: 10px rgb(0, 7, 18);
  }

  .logo :hover{
    height: 5em;
    width: 15em;
    transition: all 0.5s ease;
  }