#content{position: absolute; top: 0; left: 0; right: 0; z-index: -2;}
#accueil{position: relative; z-index: -1; background: url(../img/akysan-sakura_illustration.png); height: 100vh; padding: 0 60px;}
h1{text-align: center; font-size: 96px; font-weight: 700; line-height: 90px; letter-spacing: 1.92px; text-transform: uppercase;}
#name{color: #BC172F; font-size: 22px; font-weight: 500; line-height: 60px; letter-spacing: 2.2px;}
#symbole{padding-left: 20px; font-size: 55px; letter-spacing: 2.75px;}
h2{color: #BC172F; font-size: 22px; font-weight: 500; line-height: 97px; letter-spacing: 2.2px; text-transform: uppercase; margin: 0;}
#a_propos,#projets{margin: 0 60px; padding: 0 110px;}
#a_propos{margin: 0 auto; padding: 120px; font-weight: 500; max-width: 1096px;}
#a_propos p{margin-bottom: 20px;}
#a_propos span{color: #BC172F;}
#scrolling_text{height: 122px; overflow: hidden; margin: 80px 0; text-transform: uppercase;}
#skills, #softwares{white-space: nowrap; margin: 0 2em; gap: 4px; line-height: 28px;}
#skills{ animation: skills 20s infinite linear; -webkit-animation: skills 20s infinite linear;}
@keyframes skills {to {transform: translateX(-70%);}}
#softwares{animation: softwares 25s reverse infinite linear; font-weight: 400;}
@keyframes softwares{from{transform: translateX(0%);} to{transform: translateX(-120%);}}
#projets {margin: 120px 60px;}
#bg-sakura{position: absolute}
.owl-carousel{max-width: 982px !important; min-width: 400px ;margin: 0 auto;}
#projets .item{max-width: 982px; max-height: 588px;}
#projets .item img{display: block; width: 100%; height: auto;}
#projets figcaption{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;}
h3{color: #F0F0F0; text-align: center; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-size: 64px; font-weight: 600; line-height: normal; letter-spacing: 19.2px; text-transform: uppercase; position: absolute; z-index: 4;}
.btn-project{color: #F0F0F0; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 3.52px; text-transform: uppercase; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; align-items: center; padding-top: 96px;}
.btn-project i{width: 26px; height: 26px; background-color: #BC172F; color: #FAFAFA; font-size: 16px; margin-left: 15px; text-shadow: inherit;}
.btn-project:hover{background-color: rgba(188, 23, 47, 0.2); transition: ease-out 250ms; -webkit-transition: ease-out 250ms;
}
.btn-project:active{color: #BC172F; transition: ease-out 250ms; -webkit-transition: ease-out 250ms;}
.owl-nav{position: absolute; z-index: 5; top: 40%; left: -5%; right: -5%; display: flex; justify-content: space-between;}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next{color: #171717;}
.owl-carousel .owl-nav button.owl-prev i, .owl-carousel .owl-nav button.owl-next i{font-size: 20px;}
.owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover{background: inherit!important; color: #CCCCCC;}
.owl-carousel .owl-nav button.owl-prev:active, .owl-carousel .owl-nav button.owl-next:active{border: inherit!important; color: #BC172F}
.owl-theme .owl-dots .owl-dot span {background: #FAFAFA!important; width: 22px !important; height: 4px !important; border-radius: inherit !important;}
.owl-carousel .owl-dot:hover span {background: #CCCCCC !important; transition: ease-out 250ms; -webkit-transition: ease-out 250ms;}
.owl-carousel .owl-dot.active span {background:#BC172F !important; transition: ease-out 250ms; -webkit-transition: ease-out 250ms;}
#contact{margin: 70px 60px;}
#contact h2{color: #171717; font-size: 38px; text-transform: none; line-height: normal; letter-spacing: normal; text-align: center;}
#contact i{color: #BC172F; margin-right: 12px;}
#contact p{font-size: 16px; text-transform: uppercase; letter-spacing: 0.32px; text-align: center;}
@media screen and (max-width:960px) {
  #accueil{padding: 0 170px;}
  h1{font-size: 58px; line-height: 58px;}
  #symbole{padding-left: 10px; font-size: 38px;}
  h1 div{margin-bottom: -5px;}
  #a_propos,#projets{padding: 0 170px;}
  #a_propos{padding: 120px 170px;}
  .owl-nav{top: 30%; left: -8%; right: -8%;}
  #bg-sakura{max-width: 458px;}
  h3{font-size: 38px; letter-spacing: 12.2px;}
  .btn-project{padding-top: 115px;}
}
@media screen and (max-width:720px) {
  #accueil{background-size: cover; padding: 0 40px;}
  h1{font-size: 38px; line-height: 38px;}
  #symbole{padding-left: 5px; font-size: 18px;}
  #name{font-size: 18px; line-height: 42px;}
  #a_propos,#projets{padding: 0 40px;}
  #a_propos{padding: 34px 40px;}
  #a_propos p{margin-bottom: 10px;}
  #skills p{margin-bottom: inherit !important;}
  #scrolling_text{margin: 30px 0;}
  h2{font-size: 16px; line-height: 67px;}
  #bg-sakura{max-width: 288px;}
  .owl-carousel{min-width: 234px;}
  .owl-nav{left: -12%; right: -12%;}
  .owl-dots{margin-top: 15px;}
  h3{font-size: 28px;}
  .btn-project{font-size: 8px;}
  .btn-project i{font-size: 10px; width: 20px; height: 20px; margin-left: 10px;}
  .owl-theme .owl-dots .owl-dot span {width: 18px !important;}
  #contact{margin: 134px 40px;}
  #contact h2{font-size: 18px;}
  #contact p{font-size: 12px;}
}