@import url('https://fonts.googleapis.com/css?family=Allura|Josefin+Sans');

html {
	font-size: 1.5rem;
  font-family: roboto;
  box-sizing: border-box;
}

*,*:before,*:after {
    box-sizing: inherit
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body{
	margin: 0;
  overflow: hidden;
  height: 100vh;
  background-color:#181818;
}

header{
  left:0;
  z-index: 1;
  position: absolute;
  width: 300px;
  height: 100vh;
  background-color: #272829;
  text-decoration: none;
  padding: 0 15px;
  transition: all 500ms;
}

.profil{
    margin: 45px 0 0 0;
}

.profil img{
    margin: 15px auto;
    display: block;
    width: 120px;
    border: 8px solid #FFAC1C;
    border-radius: 50%!important;
    transition: 500ms ease;
    
}

.profil img:hover{

    
}

.profil h1{
    font-size: 24px;
    margin: 0;
    padding: 0;
    font-weight: 600;
    text-align-last: center;
    color: white;
}

.navbar ul{
  color: white;
  list-style: none;
  padding:30px 0 0 0;
  margin: 0 35px 0 0;

}

.navbar a{
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  color: #a8a9b4;
  padding: 12px 0px;
  margin-bottom: 8px;
  margin: 0px 15px;
  transition: 0.3s ease;
  fill: #a8a9b4;
  /*BORDER ANIMATION*/
  width:100%;
  transition:width 0.5s cubic-bezier(0.22,0.61,0.36,1);
}

.navbar a:hover{
  color: white;
  fill: white;
}

.navbar a:before, 
.navbar a:after{
  content:'';
  position:absolute;
  width:0%;
  height:2px;
  bottom:-2px;
  background:#FFAC1C;
}
.navbar a:before{
  left:0;
}
.navbar a:after{
  right:0;
  background:#FFAC1C;
  transition:width 0.8s cubic-bezier(0.22,0.61,0.36,1);
}
.navbar a:hover:before{
  background:#FFAC1C;
  width:100%;
  transition:width 0.5s cubic-bezier(0.22,0.61,0.36,1);
}
.navbar a:hover:after{
  background: transparent;
  width:100%;
  transition:0s;
}

.navbar li{
  transform: 500ms ease;
}


.navbar li:hover{
  margin-left: 15px;
}

#funnyguy{
    position: relative;
    z-index: 2;
    min-width: 300px;
    color: #fff;
    margin-right: 30vw;
    transition: 500ms;
    margin-left: 300px;
}

#funnyguy h1{
    transition: 200ms; 
    margin: 0 0 10px 0;
    font-size: 64px;
    font-weight: 700;
    line-height: 56px;
}

#funnyguy p span.word{
    color: #fff;
    padding-bottom: 4px;
    letter-spacing: 1px;
    border-bottom: 3px solid #FFAC1C;
}

.text_cursor{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    border-left: 3px solid white;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#container::-webkit-scrollbar {
  display: none;
}

main{
  margin-left: 300px;
  transition: 500ms;
}

section {
    /* Scroll Snap */
    scroll-snap-align: start;
}

.margin_div{
  margin-left: 300px;
  padding: 100px;
}

#first_S{
  z-index: 0;
	position: relative;
	/*background-image: url(img/kevincherton.jpg);*/
	background-size: cover;
  max-height: 100%;
}

#third_S{
  min-height: 100vh;
  height: auto;
  justify-content: start;
}

#container{
	  width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    /*margin-left: 300px;*/
    transition: 500ms;
}

.section_class {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.title:after{
  content: '';
  flex: auto;
}

.title h2,h5,p,div{
  color: white;
  margin: 0;
}

.title h6{
  font-size: 0.9rem;
}

#project-selector{
  display: flex;
  justify-content: center;
}

.project-selector{
  margin: 0 100px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  /*padding: 25px 0;*/
}

.project-selector{
  width: 50%;
}

.project-selector div{
  cursor: pointer;
  transition: 250ms ease;
}

.project-selector div:hover{
  color: #FFAC1C;
}

.portfolio-link{
  outline: solid 0px #00000000;
  transition: 250ms ease;
}

.portfolio-link:hover{
  outline: solid 5px #FFAC1C;
}

.portfolio-img{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  z-index: 0;
  object-fit: cover;
  max-height: 32vh;
  width: 100%;
  height: 25vh;
  transition: 500ms;
  transform: scale(1);
}

.portfolio-img:hover{
  transform:scale(1.05);
  outline: solid 5px #FFAC1C;
}

.case-container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.case-container div{
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

/* SELECTION PROJECT */

.color-active{
  color: #FFAC1C;
}

.Projets{
  display: block;
  transform: scale(1);
  transition: all .25s ease-out, opacity .25s ease-in-out .25s;
  opacity: 1;
}

.outAnimation{

  transform: scale(0);
  transition: all .25s ease-out, opacity .25s ease-in-out .25s;
}

.hide{
  display: none;
}

.unselected{
  position: absolute;
  transform: scale(0);
  transition: all .25s ease-in-out .25s, opacity .25s ease-out;
  opacity: 0;
}

.unselected *{
  transition: all .25s ease-in-out .25s, opacity .25s ease-out;
  transform: scale(0);
  opacity: 0;
}

/* ANIMATION BAR*/
.flex {
  font-family: roboto;
  color: #6CF841;
  display: flex;
  font-weight: bolder;
}

svg {
  margin-right: 0.5rem;
}

.items-center {
  align-items: center;
}

.marquee {
  --duration: 10s;
  --gap: var(--space);

  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  padding: 0.5rem 0;
  /*background-image: linear-gradient(45deg, #070707 25%, #1c1c1c 25%, #1c1c1c 50%, #070707 50%, #070707 75%, #1c1c1c 75%, #1c1c1c 100%);
  background-size: 33.94px 33.94px;*/
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: calc(var(--duration) / -2);
}

@keyframes scroll {
    0%{
      transform: translate(-100%, 0);
    }
    100% {
      transform: translate(100%- var(--gap), 0);
    }
}

#contact{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    bottom: 10vh;
    right: 10vw;
	position: absolute;
	font-size: 2rem;
    font-weight: bolder;
    color: white;
}

#contact:before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

#contact:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

@media (max-width: 1199px){
  header {
    left: -300px;

  }

  #funnyguy{
    margin-right: 0px;
    margin-left: 0px;
  }

  #third_S{
    height: auto;
  }

  #container{
    /*margin-left: 0;*/
  }

/*  #funnyguy h1{
    font-size: 32px;
  }*/

  .case-container{
    grid-template-columns:1fr 1fr;
  }

  .margin_div{
    margin-left: 0;
    padding: 60px;
  }
}

@media (max-width: 550px){

  #funnyguy h1{
    font-size: 12vw;
  }

  #funnyguy p{
    font-size: 6vw;
  }

  #third_S{
    height: auto;
  }

  .margin_div{
    padding: 40px;
  }

  .case-container{
    grid-template-columns:1fr;
  }
}