body{
padding: 0;
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
--sb-track-color: #3f3f3f;
--sb-thumb-color: #65a09e;
--sb-size: 14px;

scrollbar-color: var(--sb-thumb-color)
var(--sb-track-color);
}

body::-webkit-scrollbar {
width: var(--sb-size);
}

body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 3px;
}

body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 3px;
border: 2px solid #3f3f3f;
}

html {
scroll-behavior: smooth;
scrollbar-width: thin;
padding: 0;
margin:0;
}

body:hover{
cursor: url(pointer.png), auto;
}

.filler{
height: 10vh;
}

a{
text-decoration: none;
color: inherit;
cursor: url(pointer2.png), auto;
}

.mediaIcon{
height:40px;
width: 40px;
transition: 0.2s;
filter: contrast(60%);
}

.mediaIcon:hover{
cursor: url(pointer2.png), auto;
transform : translate(3px, 0%);
filter: contrast(100%);
}

.discord{
height: 46px;
width: 46px;
}

header{
display: flex;
background-color: #1d1e20;
color:#e2ded9;
justify-content: space-between;
align-items: center;
padding:0 20px 0 20px;
height: 10vh;
position: sticky;
top:0px;
z-index: 70;
}

header div{
display:flex;
align-items: center;
color: #e2ded9;
}

header div ul{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}

.blue{
color: #65a09e;
transition: 1s;
}

#liste{
width: 60%;

}

header div ul li{
list-style:none;
transition: 0.5s;
}

header div ul li:hover{
text-decoration:overline;
font-weight: 500;
color: #65a09e;
cursor: url(pointer2.png), auto;
}

header div h2{
transition: 0.5s;
}

header div h2:hover{
color: #65a09e
}

header div h2:hover .blue{
color: #e2ded9
}

main #pres{
color:#e2ded9;
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
row-gap: 1em;
height: 100vh;
background-color: #1d1e20;
overflow: hidden;
}

main #pres div{
display:flex;
align-items: center;
justify-content: center;
height: fit-content;
}

main #pres div img{
width: 12%;
}

main #pres div h1{
font-size: 5vw;
transition: 1s;
}

main #pres div h1:hover{
font-size: 5.2vw;
color: #65a09e;
cursor: url(pointer2.png), auto;

}

main #pres div h1:hover .blue{
color:#e2ded9;
}

main #pres p{
font-size: 1.8vw;
text-align: center;
width: 70%;
height: 30%;
text-align: center;
}

main #us{
color:#e2ded9;
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
row-gap: 1em;
height: 100vh;
background-color: #1d1e20;
overflow: hidden;
}

main #us .content{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}

main #us .card{
display:flex;
border: medium dotted #65a09e;
background-color: #3f3f3f;
column-gap: 2em;
transition: 0.1s;
justify-content: space-between;
}

main #us .card:hover{
border: medium solid #65a09e;
background-color: #515151;
}

main #us .card .medias{
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding-right: 10px;
align-items: center;
}

main #project{
color:#e2ded9;
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
row-gap: 1em;
height: 100vh;
background-color: #1d1e20;
overflow: hidden;
}

.custom-btn {
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}

.btn-5 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
background: #3f3f3f;
}
.btn-5:hover {
color: #65a09e;
background: transparent;
box-shadow:none;
}
.btn-5:before,
.btn-5:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #65a09e;
box-shadow:
-1px -1px 5px 0px #fff,
7px 7px 20px 0px #0003,
4px 4px 5px 0px #0002;
transition:400ms ease all;
}
.btn-5:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
width:100%;
transition:800ms ease all;
}

main #contact{
color:#e2ded9;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 1em;
height: 100vh;
background-color: #1d1e20;
overflow: hidden;
}

main #contact #contactform{
background-color: #3f3f3f;
padding : 80px;
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
row-gap: 10px;
}

main #contact #contactform *{
width: 100%;
}

main #contact #contactform textarea{
height: 100px;
background-color: #1d1e20;
color: #e2ded9;
}

main #contact #contactform input{
background-color: #1d1e20;
color: #e2ded9;
}

main #contact #contactform input:hover{
background-color:#65a09e;
color: #3f3f3f;
cursor: url(pointer2.png), auto;
}

main #contact #contactform textarea:hover{
background-color:#65a09e;
color: #3f3f3f;
cursor: url(pointer2.png), auto;
}

main #contact #contactform input:focus {
background-color:#65a09e;
color: #3f3f3f;
}

main #contact #contactform textarea:focus {
background-color:#65a09e;
color: #3f3f3f;
}

/* CSS */
button.button-10 {
touch-action: manipulation;
position: relative;
display: inline-block;
cursor: url(pointer2.png), auto;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: inherit;
font-family: inherit;
}
button.button-10 {
touch-action: manipulation;
font-weight: 600;
color: #382b22;
text-transform: uppercase;
padding: 1.25em 2em;
background: hsl(178, 17%, 59%);
border: 2px solid #65a09e;
border-radius: 0.75em;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.button-10::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #6b9a99;
border-radius: inherit;
box-shadow: 0 0 0 2px #4b5252, 0 0.625em 0 0 hsl(180, 1%, 32%);
transform: translate3d(0, 0.75em, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.button-10:hover {
background: h sl(178, 17%, 59%);
transform: translate(0, 0.25em);
}
button.button-10:hover::before {
box-shadow: 0 0 0 2px #4b5252, 0 0.625em 0 0 hsl(180, 1%, 32%);
transform: translate3d(0, 0.5em, -1em);
}
button.button-10:active {
background: #6b9a99;
transform: translate(0em, 0.75em);
}
button.button-10:active::before {
box-shadow: 0 0 0 2px #4b5252, 0 0.625em 0 0 hsl(180, 1%, 32%);
transform: translate3d(0, 0, -1em);
}

#button-49,
#button-49:after {
width: 150px;
height: 76px;
line-height: 78px;
font-size: 20px;
font-family: 'Bebas Neue', sans-serif;
background: linear-gradient(45deg, transparent 5%, #3f3f3f 5%);
border: 0;
color: #e2ded9;
letter-spacing: 3px;
box-shadow: 6px 0px 0px #65a09e;
outline: transparent;
position: relative;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
transition: 2s;
}

#button-49:hover{
cursor: url(pointer2.png), auto;
background: linear-gradient(45deg, transparent 5%, #4c4c4e 5%);

}

#button-49:after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);

content: 'CodeMinds';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, #65a09e 3%, #65a09e 5%, #3f3f3f 5%);
text-shadow: -3px -3px 0px #e2ded9, 3px 3px 0px #65a09e;
clip-path: var(--slice-0);
}

#button-49:hover:after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}

/animation entrance/

#us *{
animation-duration: 0.5s;
animation-name: animate-fade;
animation-delay: 0.5s;
animation-fill-mode: backwards;
}

#pres p{
animation-duration: 2s;
animation-name: slide-in-blurred-bottom;
animation-delay: 3s;
animation-fill-mode: backwards;
}

#pres div #title{
animation-duration: 2s;
animation-name: animate-blur;
animation-delay: 0.5s;
animation-fill-mode: backwards;
}

#pres div .blue{
animation-duration: 2s;
animation-name: animate-blur;
animation-delay: 1s;
animation-fill-mode: backwards;
}

#pres img{
animation-duration: 1s;
animation-name: animate-roll;
animation-delay: 2.5s;
animation-fill-mode: backwards;
}

#pres button{
animation-duration: 0.7s;
animation-name: rotate-in-diag-1;
animation-delay: 6s;
animation-fill-mode: backwards;
}

header div #title{
animation-duration: 1s;
animation-name: animate-blur;
animation-delay: 0.2s;
animation-fill-mode: backwards;
}

header div .blue{
animation-duration: 0.7s;
animation-name: animate-blur;
animation-delay: 0.7s;
animation-fill-mode: backwards;
}

header img{
animation-duration: 0.7s;
animation-name: animate-slide;
animation-delay: 2.5s;
animation-fill-mode: backwards;
}

header ul li:nth-child(1){
animation-duration: 1.3s;
animation-name: animate-spin;
animation-delay: 1s;
animation-fill-mode: backwards;
}

header ul li:nth-child(2){
animation-duration: 1.3s;
animation-name: animate-spin;
animation-delay: 1.5s;
animation-fill-mode: backwards;
}
header ul li:nth-child(3){
animation-duration: 1.3s;
animation-name: animate-spin;
animation-delay: 2s;
animation-fill-mode: backwards;
}

@keyframes slide-in-blurred-bottom {
0% {
-webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}

@keyframes rotate-in-diag-1 {
0% {
-webkit-transform: rotate3d(1, 1, 0, -360deg);
transform: rotate3d(1, 1, 0, -360deg);
opacity: 0;
}
100% {
-webkit-transform: rotate3d(1, 1, 0, 0deg);
transform: rotate3d(1, 1, 0, 0deg);
opacity: 1;
}
}

@keyframes animate-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes animate-blur {
0% {
opacity: 0;
filter: blur(15px);
}
100% {
opacity: 1;
filter: blur(0px);
}
}

@keyframes animate-grow {
0% {
opacity: 0;
transform: scale(1, 0);
visibility: hidden;
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}

@keyframes animate-glow {
0% {
opacity: 0;
filter: brightness(3) saturate(3);
transform: scale(0.8, 0.8);
}
100% {
opacity: 1;
filter: brightness(1) saturate(1);
transform: scale(1, 1);
}
}

@keyframes animate-roll {
0% {
opacity: 0;
transform: scale(0, 0) rotate(360deg);
}
100% {
opacity: 1;
transform: scale(1, 1) rotate(0deg);
}
}

@keyframes animate-flip {
0% {
opacity: 0;
transform: rotateX(-120deg) scale(0.9, 0.9);
}
100% {
opacity: 1;
transform: rotateX(0deg) scale(1, 1);
}
}

@keyframes animate-spin {
0% {
opacity: 0;
transform: rotateY(-120deg) scale(0.9, .9);
}
100% {
opacity: 1;
transform: rotateY(0deg) scale(1, 1);
}
}

@keyframes animate-slide {
0% {
opacity: 0;
transform: translate(0, 20px);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}

@keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}