*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 16px;
	--page-padding: 2rem;
	--color-text: #333333;
	--color-bg: #fff;
	--color-link: rgba(0,0,0,0.8);
	--color-link-hover: #000;
	--color-list-item: #000;
	--color-title: #000;
	--color-number: #000;
    --color-bg-effect: white;
    --blendmode-effect: difference;
    --bg-blur: 0px;
    --font-size-list-item: 18px;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: "JetBrains Mono", monospace;
	font-weight: 300;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

body::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;

	pointer-events: none;
}



.home{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-image: repeating-linear-gradient(transparent, transparent 2px, #0000003d 3px);
	background-size: auto 100%;
}


a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	text-decoration: none;
	color: var(--color-link-hover);
	outline: none;
}

a:focus {
	
	outline: none;
}

a:focus-visible {
	
	outline: 2px solid red;
}


.frame__demos span {

    font-size: 800;
    color: #5d616b;


}

.frame__demos span:first-letter {
    
    color: #333333;
}

.frame {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	padding: var(--page-padding);
	position: relative;
	display: grid;
	grid-row-gap: 1rem;
	grid-column-gap: 2rem;
	align-items: start;
	pointer-events: none;
	justify-items: start;
	grid-template-columns: auto auto;
	grid-template-areas: 'title' 'pourquoi' 'galerie' 'github' 'sponsor' 'demos';
    text-transform: uppercase;
}

.frame #cdawrap {
	justify-self: start;
}

.frame a {
  pointer-events: auto;
}

.frame__title {
  grid-area: title;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.frame__back {
  grid-area: back;
  justify-self: start;
}

.frame__archive {
  grid-area: archive;
  justify-self: start;
}

.frame__sub {
  grid-area: sub;
}

.frame__github {
  grid-area: github;
}

.frame__tags {
  grid-area: tags;
}

.frame__hire {
  grid-area: hire;
}

.frame__demos {
	grid-area: demos;
	display: flex;
	gap: 1rem;
}



.hover-effect .word {
  white-space: nowrap;
}

.hover-effect .char {
  position: relative
}

.hover-effect {
  font-kerning: none;
  position: relative;
  white-space: nowrap;
}

.hover-effect--cursor-square .char {
  --opa: 0;
}

.hover-effect--cursor-square .char::after {
	content: '';
	width: 1ch;
	top: 0;
	left: 0;
	position: absolute;
	opacity: var(--opa);
}

.hover-effect--cursor-square .char::after {
  background: currentColor;
  height: 100%;
}

.hover-effect--bg,
.hover-effect--bg-south {
  --anim: 0;
}

.hover-effect--bg::after,
.hover-effect--bg-south::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(100% + 3px);
	top: 0;
	background-color: var(--color-bg-effect);
	mix-blend-mode: var(--blendmode-effect);
	-webkit-backdrop-filter: blur(var(--bg-blur));
	backdrop-filter: blur(var(--bg-blur));
  transform-origin: 0% 50%;
	transform: scaleX(var(--anim));
}

.hover-effect--bg-south::after {
	z-index: -1;
	left: -8px;
	right: -8px;
	top: -8px;
	bottom: -8px;
	border-radius: 2px;
	height: auto;
	width: auto;
	transform-origin: 50% 100%;
	transform: scaleY(var(--anim));
}









.titre{

    color: var(--color-text);
    font-size: 150px;
    display: flex;
	flex-direction: column;
	min-height: 10px;
	justify-content: space-between;
    
    
    margin-top: 50px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;

    padding-left: var(--page-padding);
    padding-top: var(--page-padding);
    padding-bottom: 0%;
    padding-right: 0%;

	width: 50%;


}

.presentation{
    
    margin-top: 0px;
	font-size: large;
	text-align: left;
    width: 80%;

    padding-left: var(--page-padding);
    padding-top: 0%;
    padding-bottom: 0%;
    padding-right: 10px;


}


.container {

    display: flex;

	padding-top: 0px;
	padding-bottom: 100px;

	
}

.image-presentaion{

	width: 500px;

	margin-top: 40px;

	padding-right: 32px;

	border-radius: 30px;

	
    
}






.buzz_wrapper span:nth-child(1){
	color: whitesmoke;
	margin-left: 0px;
	-webkit-filter: blur(2px);
	filter: blur(2px);
}


.buzz_wrapper{

	position: relative;
	background-color: #333333;
	overflow:hidden;
	padding:100px;
	padding-bottom: 150px;
	padding-left: var(--page-padding);



}

				

.buzz_wrapper span{
	position:absolute;
	-webkit-filter: blur(1px);
	filter: blur(1px); 
	font-size:80px;
	font-family:'Courier new', fixed;
	font-weight:bold;
}

.buzz_wrapper span:nth-child(2){
	color:green;
	margin-left:2px;
	-webkit-filter: blur(2px);
	filter: blur(2px); 

}

.buzz_wrapper span:nth-child(3){
	color:blue;
	position:20px 0;
	-webkit-filter: blur(1px);
	filter: blur(1px); 
}
  
.buzz_wrapper span:nth-child(4){
	color:#fff;
	-webkit-filter: blur(1px);
	filter: blur(1px); 
	text-shadow:0 0 50px rgba(255,255,255,0.4);
}
  
.buzz_wrapper span:nth-child(5){
	color:rgba(255,255,255,0.4);
	-webkit-filter: blur(15px);
	filter: blur(15px); 
  
}
  
  
.buzz_wrapper span{
	-webkit-animation: blur 30ms infinite, jerk 50ms infinite;
	animation: blur 30ms infinite, jerk 50ms infinite;

}
  
  
@-webkit-keyframes blur {
	0%   { -webkit-filter: blur(1px); opacity:0.8;}
	50% { -webkit-filter: blur(1px); opacity:1; }
	100%{ -webkit-filter: blur(1px); opacity:0.8; }
  
}
@keyframes blur {
	0%   { filter: blur(1px); opacity: 0.8; }
	50%  { filter: blur(1px); opacity: 1; }
	100% { filter: blur(1px); opacity: 0.8; }
}
  
@-webkit-keyframes jerk {
	50% { left:1px; }
	51% { left:0; }
  
}
@keyframes jerk {
	50% { left:1px; }
	51% { left:0; }
  
}

  
@-webkit-keyframes jerkup {
	50% { top:1px; }
	51% { top:0; }
  
}
@keyframes jerkup {
	50% { top:1px; }
	51% { top:0; }
  
}
   
  
.buzz_wrapper span:nth-child(3){
	-webkit-animation: jerkblue 1s infinite;
	animation: jerkblue 1s infinite;

  
}
  
@-webkit-keyframes jerkblue {
	0% { left:0; }
	30% { left:0; }
	31% { left:10px; }
	32% { left:0; }
	98% { left:0; }
	100% { left:10px; }
  
}
@keyframes jerkblue {
	0% { left:0; }
	30% { left:0; }
	31% { left:10px; }
	32% { left:0; }
	98% { left:0; }
	100% { left:10px; }
  
}
  
.buzz_wrapper span:nth-child(2){
	-webkit-animation: jerkgreen 1s infinite;
	animation: jerkgreen 1s infinite;
  
}
  
@-webkit-keyframes jerkgreen {
	0% { left:0; }
	30% { left:0; }
	31% { left:-10px; }
	32% { left:0; }
	98% { left:0; }
	100% { left:-10px; }
  
}
@keyframes jerkgreen {
	0% { left:0; }
	30% { left:0; }
	31% { left:-10px; }
	32% { left:0; }
	98% { left:0; }
	100% { left:-10px; }
  
}
  
  
.buzz_wrapper .text{
	-webkit-animation: jerkwhole 5s infinite;
	animation: jerkwhole 5s infinite;
	position:relative;
  
}
  


@-webkit-keyframes jerkwhole {
	30% {  }
	40% { opacity:1; top:0; left:0;  -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
	41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(50deg,0);}
	42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(-80deg,0);}
	43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
	65% { }
  
}
@keyframes jerkwhole {
	30% {  }
	40% { opacity:1; top:0; left:0;  -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
	41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(50deg,0);}
	42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(-80deg,0);}
	43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
	65% { }
  
}








































@media screen and (min-width: 40em) {
	.list__item {
		grid-template-columns: auto 1fr 1fr 1fr auto;
	}
	
}

@media screen and (min-width: 53em) {
	.frame {
		grid-template-columns: auto auto auto auto 1fr 1fr;
		grid-template-areas: 'title back archive github demos sponsor';
	}
	.frame #cdawrap, 
	.frame__demos {
		justify-self: end;
	}
	.frame #cdawrap {
	  text-align: right;
	}
}

@media screen and (min-width: 73em) {
	.list__item {
		grid-template-columns: 100px 30% 1fr 1fr 1fr;
	}
	.demo-4 .list__item {
		grid-template-columns: 100px 1fr 1fr auto ;
	}
	.list__item-col:last-child {
		justify-self: end;
	}
}