:root{
	--blanccasse: #F6F6F6;
	--gris: #282923
}

*{margin: 0; padding: 0; text-decoration: none; scroll-behavior: smooth;}

@font-face {font-family: "Roboto Mono"; src: url("fonts/Roboto-Mono.ttf") format("truetype");}
@font-face {font-family: "Font Awesome"; src: url("fonts/Font-Awesome-5-Solid.otf") format("truetype");}
@font-face {font-family: "Yuji Boku"; src: url("fonts/Yuji-Boku.ttf") format("truetype");}
@font-face {font-family: "Work Sans Black"; src: url("fonts/Work-Sans-Black.ttf") format("truetype");}

body{display: flex; flex-direction: column; justify-content: space-between;}

nav{height: 72px; width: 100vw;}
nav > a:nth-child(1){display: flex; justify-content: center; align-items: center; padding: 1rem 0.5rem 1rem 2vw;}
nav > a:nth-child(1) p{color: black; font-family: 'Yuji Boku'; font-size: 1rem; position: relative; line-height: 0.9rem; margin-right: 0.5rem; transition: 0.5s;}
nav > a:nth-child(1) p:after{content: ''; position: absolute; top: 0; right: -0.25rem; height: 2.8rem; width: 0.1rem; background-color: black; transition: 0.5s;}
nav > a:nth-child(1) h1{color: black; font-family: 'Work Sans Black'; font-size: 4rem; position: relative; line-height: 2.5rem; margin-right: 2.8rem; text-transform: uppercase; transition: 0.5s;}
nav > a:nth-child(1) h1:after{content: ''; position: absolute; top: 0rem; right: -2.6rem; height: 2.7rem; width: 2.7rem; border-radius: 50%; background-color: black; transition: 0.5s;}
nav > a:nth-child(1):hover h1:after{background-color: red; transition: 0.5s;}
nav > img{padding: 1rem 2vw 1rem 0.5rem; transition: 0.5s; height: 2.7rem;}

nav{background-color: var(--blanccasse); position: relative;}
nav:after{content: ''; position: absolute; bottom: -49px; display: inline-block; height: 0; width: 0; border-top : 50px solid var(--blanccasse); border-right : 99vw solid transparent; pointer-events: none;}

body.home main{position: relative; display: flex; justify-content: center; align-items: center; height: calc( 100vh - 72px );}
body.home main a{margin: 0 4rem;}
body.home main a > img{width: 15vw; max-height: 40vh; object-fit: contain; filter: grayscale(100%); transition: 0.5s;}
body.home main a > img:hover{filter: grayscale(0%); transition: 0.5s;}

body.html main{position: relative; display: flex; align-items: center; height: calc( 100vh - 72px ); top: 72px;}
body.html main > section > img{width: 15vw; max-height: 40vh; object-fit: contain;}
body.css main{position: relative; display: flex; align-items: center; height: calc( 100vh - 72px ); top: 72px;}
body.css main > section > img{width: 15vw; max-height: 40vh; object-fit: contain;}

body > main > div{position: absolute; top: calc( 5vh + 40px ); right: 2vw; width: 70vw; background: var(--gris); color: #f8f8f2; padding: 1rem; word-break: break-all; border-radius: 5px 5px 0 0; min-height: 100vh; border-left: 1rem solid; border-color: #555555;}
::-webkit-scrollbar{width: 7px;}
::-webkit-scrollbar-thumb{background: #63635f; border-radius: 10px;}
div.slide-in-bottom > header{position: absolute; top: -2rem; right: 2vw; z-index: 99; font-size: 1.2rem; font-family: "Roboto Mono";}
div.slide-in-bottom > header > a > p.css-tab{padding: 0.5rem 1rem; background-color: var(--gris); border-radius: 5px 5px 0 0; margin: 0 5px;}
div.slide-in-bottom > header > a > p.html-tab{padding: 0.5rem 1rem; background-color: var(--gris); border-radius: 5px 5px 0 0; margin: 0 5px;}
ol{margin-left: 3rem;}
ol li{font-family: 'Roboto Mono'; font-size: 1rem;}
body.css ol li{color: grey;} 

body > section{display: none;}
body > footer > a{position: fixed; bottom: 0; left: 0; text-align: center; padding: 1vw; width: 11vw; margin: 0 3vw;}
body > footer > a > svg:nth-child(1){color:black; opacity: 0.2; transition: 0.6s; width: 40px; height: 25px;}
body > footer > a:hover > svg:nth-child(1){color: red; opacity: 1; transition: 0.6s;}
body > footer > a > p:nth-child(2){font-family: "Work Sans Black"; font-size: 1rem; color: var(--gris); opacity: 0.2; transition: 0.6s;}
body > footer > a:hover > p:nth-child(2){opacity: 1; transition: 0.6s;}

.flexline{display: flex; justify-content: space-between; align-items: center;}
.flexline-center{display: flex; justify-content: space-between; align-items: center;}
.grey-filter{filter: grayscale(100%)}
.sticky-nav{position: -webkit-fixed; position: fixed; z-index: 100;}
.sticky-img{position: -webkit-fixed; position: fixed; z-index: 101;}
.inactive{color: rgba(255, 255, 255, 0.5); transition: 0.3s;}
.inactive:hover{color: rgba(255, 255, 255, 1); transition: 0.3s;}
.active{color: rgba(255, 255, 255, 1);}
li > img{height: 20vh!important; filter: red; border-radius: 5px; margin: 5px 0; position: relative; top: 0}

.bleu-ita{font-style: italic; color: #56d8ef;}
.violet-f{color: #ac80ff;}
.rose-f{color: #f92472;}
.vert{color: #a6e22b;}
.jaune{color: #e7db74;}
.rouge{color: red;}
.blanc{color: white; font-style: normal;}
.gris{color: grey;}
.noir{color: black; background-color: grey; border-radius: 2px; font-weight: 600;}

.tab1{padding-left: 3rem;}
.tab2{padding-left: 6rem;}
.tab3{padding-left: 9rem;}

.fade-in {  -webkit-animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                    animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
@-webkit-keyframes fade-in {0% {opacity: 0;} 
                            100% {opacity: 1;}}
        @keyframes fade-in {0% {opacity: 0;} 
                            100% {opacity: 1;}}

.fade-in-top {  -webkit-animation: fade-in-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
                        animation: fade-in-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;}
@-webkit-keyframes fade-in-top {0% {opacity: 0;} 
                                100% {opacity: 1;}}
        @keyframes fade-in-top {0% {opacity: 0;} 
                                100% {opacity: 1;}}

.slide-left-html {	-webkit-animation: slide-left-html 1s cubic-bezier(0.250, 0.260, 0.650, 0.840) both; 
							animation: slide-left-html 1s cubic-bezier(0.250, 0.260, 0.650, 0.840) both;}
@-webkit-keyframes slide-left-html {0% {-webkit-transform: translateX( calc( 35vw - 4rem )); 
												transform: translateX( calc( 35vw - 4rem ));} 
									100% {	-webkit-transform: translateX(2vw); 
													transform: translateX(2vw);}}
		@keyframes slide-left-html {0% {-webkit-transform: translateX( calc( 35vw - 4rem ));
												transform: translateX( calc( 35vw - 4rem ));} 
									100% {	-webkit-transform: translateX(2vw); 
													transform: translateX(2vw);}}

.fade-out-html {	position: absolute; left: calc( 35vw - 4rem ); z-index: 1;
					-webkit-animation: fade-out-html 1s ease-out both;
							animation: fade-out-html 1s ease-out both;}
@-webkit-keyframes fade-out-html {	0% {opacity: 1;} 
									50% {opacity: 0; width: 15vw; max-height: 40vh;}
									100% {height: 0; width: 0; max-height: 0;}}
		@keyframes fade-out-html {	0% {opacity: 1;} 
									50% {opacity: 0; width: 15vw; max-height: 40vh;}
									100% {height: 0; width: 0; max-height: 0;}}

.slide-left-css {	-webkit-animation: slide-left-css 0.7s cubic-bezier(0.250, 0.260, 0.650, 0.840) 0.3s both;
							animation: slide-left-css 0.7s cubic-bezier(0.250, 0.260, 0.650, 0.840) 0.3s both;}
@-webkit-keyframes slide-left-css {	0% {-webkit-transform: translateX( calc( 50vw + 4rem )); 
												transform: translateX( calc( 50vw + 4rem ));} 
									100% {	-webkit-transform: translateX(2vw); 
													transform: translateX(2vw);}}
		@keyframes slide-left-css {	0% {-webkit-transform: translateX( calc( 50vw + 4rem )); 
												transform: translateX( calc( 50vw + 4rem ));} 
									100% {	-webkit-transform: translateX(2vw); 
													transform: translateX(2vw);}}

.fade-out-css {	position: absolute; left: calc( 50vw + 4rem ); z-index: 1;
				-webkit-animation: fade-out-css 0.5s ease-out both; 
						animation: fade-out-css 0.5s ease-out both;}
@-webkit-keyframes fade-out-css {	0% {opacity: 1;} 
									50% {opacity: 0; width: 15vw; max-height: 40vh;}
									100% {height: 0; width: 0; max-height: 0;}}
		@keyframes fade-out-css {	0% {opacity: 1;} 
									50% {opacity: 0; width: 15vw; max-height: 40vh;}
									100% {height: 0; width: 0; max-height: 0;}}

.rotate{-webkit-animation: rotate 1.3s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
	        	animation: rotate 1.3s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;}
@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(0); transform: rotate(0);}}
		@keyframes rotate {0% {-webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}}

.slide-in-bottom {	-webkit-animation: slide-in-bottom 0.5s ease-out 1s both;
					        animation: slide-in-bottom 0.5s ease-out 1s both;}
@-webkit-keyframes slide-in-bottom { 0% {	-webkit-transform: translateY(1000px);
													transform: translateY(1000px); opacity: 0;}
  									100% {	-webkit-transform: translateY(0);
           											transform: translateY(0); opacity: 1;}}
		@keyframes slide-in-bottom {0% {	-webkit-transform: translateY(1000px);
													transform: translateY(1000px); opacity: 0;}
  									100% {	-webkit-transform: translateY(0);
													transform: translateY(0); opacity: 1;}}

.vibrate-3 {-webkit-animation: vibrate-3 0.5s linear infinite both;
	        		animation: vibrate-3 0.5s linear infinite both;}

@-webkit-keyframes vibrate-3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}


@media only screen and (max-width: 800px){
	nav > a:nth-child(1) p{font-size: 0.7rem; line-height: 0.8rem; top: 1px}
	nav > a:nth-child(1) p:after{height: 2.16rem; top: 0.15rem;}
	nav > a:nth-child(1) h1{font-size: 3.2rem;}
	nav > a:nth-child(1) h1:after{height: 2.16rem; width: 2.16rem; top: 0.25rem; right: -2.2rem;}
	nav > img{height: 2.16rem;}
    body > footer > a > p:nth-child(2){font-size: 0.8rem;}
}

@media only screen and (max-width: 600px){
	nav > a:nth-child(1) p{font-size: 0.6rem; line-height: 0.9;}
	nav > a:nth-child(1) p:after{height: 1.35rem;}
	nav > a:nth-child(1) h1{font-size: 2rem; margin-right: 1.7rem;}
	nav > a:nth-child(1) h1:after{height: 1.35rem; width: 1.35rem; top: 0.62rem; right: -1.4rem;}
	nav > img{height: 1.35rem;}
    body > footer > a > p:nth-child(2){font-size: 0.6rem;}
}

@media only screen and (max-width: 500px){
	header, main, footer{display: none!important;}
	body > section{position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
	body > section > img{margin-bottom: 5vh; max-height: 50vh;}
	body > section p{font-family: 'Work Sans Black'; font-size: 1.5rem; margin-top: 5vh; padding: 0 1rem;}
	body section:after{content: ''; position: absolute; top: 0; display: inline-block; height: 0; width: 0; border-top : 100vh solid var(--blanccasse); border-right : 99vw solid transparent; z-index: -100;}
}

@media only screen and (max-height: 400px){
    body > footer > a > p:nth-child(2){display: none;}
}