/*** font google fonts italianno
 font-family: 'Italianno', cursive;

 parisienne
 font-family: 'Parisienne', cursive;
****/
h3{
  text-align: center;
  padding-bottom: 30px;

}

h2{
  text-align: center;
  padding-bottom: 10px;

}

.tex{
  text-align: justify;
  margin-bottom: 50px;
}

/**** picture with text ****/
.img1{
  background-image: url(../img/PORTFOLIO.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.img2{
  background-image: url(../img/5968949.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.img3{
  background-image: url(../img/carousel.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

/**** POURQUOI MOI  ****/

.bgPOUR{
  background-image: url(../img/849319_O4YIHT0.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
/**** COMPETENCES  ****/
.bgCOMPET{
  background-image: url(../img/836270_preview.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.bgPROJECT{
  background-image: url(../img/6706361_3415606.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  padding-top: 50px;
}

.bgPERSO{
  background-image: url(../img/PERSO.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.bgmoi{
  background-image: url(../img/rb_8354.png);
  background-repeat: no-repeat;
  background-size: cover;  
  width: 100%;
}
/***** hover zooom picture pink with codes ****/
.zoom:hover{   -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}


/***** carousel ****/
.slide{
  font-size: 25px;
  padding-top: 30px;
   color: rgb(0, 0, 0,);
}


/* navbar*/
.navim{
  height: 150px;
}

#mainNavigation {
  font-size: 20px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}

.dropdown-menu {
  background:rgb(0, 0, 0,0.5);
}

.dropdown-toggle {
  color:#000000 !important
}

.dropdown-item:hover {
  color:#03727d !important
}

.nav-item {
  color:#000000;
  margin-right: 25px;
}

.nav-item:hover {
  color:rgb(65, 42, 168);
}

.nav-item{
  min-width:8vw;
}

#mainNavigation {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:123;
  padding-bottom:40px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

#navbarNavDropdown.collapsing ,
#navbarNavDropdown.show {
  background:rgba(3, 34, 76, 0.1);
  padding:12px;
}


/*** text hello my name is ****/
.title-word {
  animation: color-animation 4s linear infinite;
}

.title-word-1 {
  --color-1: #DF8453;
  --color-2: #3D8DAE;
  --color-3: #E4A9A8;
}

.title-word-2 {
  --color-1: #DBAD4A;
  --color-2: #ACCFCB;
  --color-3: #17494D;
}

.title-word-3 {
  --color-1: #ACCFCB;
  --color-2: #E4A9A8;
  --color-3: #ACCFCB;
}

.title-word-4 {
  --color-1: #3D8DAE;
  --color-2: #DF8453;
  --color-3: #E4A9A8;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}


/******* HELLOOOO MY NAME IS   *****/
.text {
  display: grid;
  place-items: center;  
  text-align: center;
  padding-top: 100px;
}

.title {
  font-family: "Montserrat", sans-serif;
  font-size: 50px;
  text-transform: uppercase;
}


/*    myname ivana  ****/
.myname{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 50px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


/******   a propos  ivana udodiegwu ******/
.color{
  color: white;
}

/*********** ROUNDED GALLERY WITH 4 PICTURES   ***********/
.gallery {
  --g: 8px;   /* the gap */
  --s: 400px; /* the size */
  

  margin: 0;
  place-content: center;
  display: grid;
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1/1;
  width: 400px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transform: translate(var(--_x,0),var(--_y,0));
  cursor: pointer;
  z-index: 0;
  transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
  --_i: 1;
  z-index: 1;
  transition: transform .2s, clip-path .3s .2s, z-index 0s;
}
.gallery:hover img {
  transform: translate(0,0);
}
.gallery > img:nth-child(1) {
  clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(120%*var(--_i,0)));
  --_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
  clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
  --_x: var(--g)
}
.gallery > img:nth-child(3) {
  clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)));
  --_y: var(--g)
}
.gallery > img:nth-child(4) {
  clip-path: polygon(50% 50%,calc(120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
  --_x: calc(-1*var(--g))
}

/********** inerets perso ******/
/*
.bgcol{
  background: rgba(3, 34, 76, 0.1);
}
  */

.business1{
  width:300px;
  height: 350px;
  -webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.business1:hover{
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

.business2{
  width: 520px;
  height: 250px;
}

.block{
  text-align: justify;
}


/********** actuellement ******/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");


.glob {
  display: flex;
  height: 30vh;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;
}

.content h2 {
  color: #fff;
  font-size: 80px;
  position: absolute;
  transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #000000;
}

.content h2:nth-child(2) {
  color: #000000;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}


/********* Skill bars ********/
@keyframes load {
  from {
    width: 0%;
  }
}

.bar {
  background-color: #eee;
  padding: 2px;
  border-radius: 15px;
  margin-bottom: 5px;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  position: relative;
}

.bar::before {
  content: attr(data-skill);
  display: inline-block;
  padding: 5px 5px;
  border-radius: inherit;
  animation: load 2s ease-out;
  text-align: center;
  white-space: nowrap;
}

.bar.basic::before {
  background-color: #ffe189;
  width: calc(40% - 10px);
}

.bar.intermediate::before {
  background-color: #5fff84;
  width: calc(60% - 10px);
}

.bar.advanced::before {
  background-color: #75b6fc;
  width: calc(80% - 10px);
}

.bar.expert::before {
  background-color: #cbafff;
  width: calc(100% - 0px);
}

/**** PORTFOLIO github luxurynails  ******/
.blue{
  color: #03224c;
}

/** images changes images 1 *****/
.slideshow {
	height:128px;
	width:120px;
  position: relative;
  margin:0 auto;
}

.slideshow__img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
}

#slideshow__img--front {
  z-index: 2;
}

.slideshow__img.slideshow__img--fadeout {
  transition: opacity 0.5s ease-in;
  opacity: 0;
}


/** images changes images 2 *****/

.slideshow1 {
	height:185px;
	width:131px;
  position: relative;
  margin:0 auto;
}

.slideshow1__img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
}

#slideshow1__img--front {
  z-index: 2;
}

.slideshow1__img.slideshow1__img--fadeout {
  transition: opacity 0.5s ease-in;
  opacity: 0;
}
/***     icones github and luxury nails ****/
.fa {
  padding: 10px;
  font-size: 40px;
  width: 80px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 10px;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* github */
.fa-github {
  background: white;
  color: #55ACEE;
}

/* linkedin */
.fa-linkedin {
  background: #55ACEE;
  color: white;
}



/***** button up *******/
.bgcolor1{
  background: rgb(3, 34, 76);
}


/***** footer *******/

.deco{
  text-decoration: none;
  color: white;
}

.butA{
  font-size: 40px; 
  color: white;
  background-color: #03224c;
  border: none;
}