/* General */
body {
    background-color: #161515;
    color: #fff;
    font-family: bennet-banner, sans-serif;
}

a {
    text-decoration: none;
    color:#fff;
}

h2 {
    color:#20e478;
    font-family: bennet-banner, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 64px;
}

h3 {
    font-family: 'Akira Expanded';
    font-weight: normal;
    font-style: normal;
}

/* Fonts */
@font-face {
    font-family: 'Akira Expanded';
    src: url('../font/AkiraExpanded.woff2') format('woff2'),
        url('../font/AkiraExpanded.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akira Expanded';
    src: url('../font/AkiraExpanded-Outline.woff2') format('woff2'),
        url('../font/AkiraExpanded-Outline.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akira Expanded';
    src: url('../font/AkiraExpanded-Bold.woff2') format('woff2'),
        url('../font/AkiraExpanded-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Zone */
.zone-menu {
    position:fixed;
    top:40px;
    right:40px;
}

#intro {
    padding:100px 0;
}

/* Gradient */
.gradient-forest {
    background: rgb(44,44,64);
    background: -moz-linear-gradient(145deg, rgba(44,44,64,1) 0%, rgba(35,79,53,1) 100%);
    background: -webkit-linear-gradient(145deg, rgba(44,44,64,1) 0%, rgba(35,79,53,1) 100%);
    background: linear-gradient(145deg, rgba(44,44,64,1) 0%, rgba(35,79,53,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2c2c40",endColorstr="#234f35",GradientType=1);
}

/* Mise en page */
.boxed {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}
.flex {
    display:flex;
}
.flex-cc {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.flex-cl {
    display:flex;
    justify-content:flex-start;
    align-items: center;
}
.view-100 {
    width: 100%;
    height: 100vh;
}

/* Styles texte */
.text-outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #20e478;
}

/* Introduction */
.introduction {
    height: 0px;
}

/* Cartes */
.flex.lab-container {
    flex-wrap: wrap;
    gap:40px;
    justify-content: center;
}
.lab-card {
    font-family: 'Akira Expanded';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-size: 2em;
    margin-bottom:0px;
    width: 25%;
}

.lab-card:hover .neon-content {
    background-color:transparent;
    transition:0.3s ease-out;
}

.lab-card:hover .neon-glow {
    filter: blur(3px);
    transition:0.3s;
}

.neon-background {
	background: linear-gradient(-45deg, #3A4294, #E52421, #23a6d5, #ffffff);
	background-size: 400% 400%;
	animation: neon 10s ease infinite;
    width: 300px;
    height: 400px;
    position:relative;
}
.neon-glow {
	background: linear-gradient(-45deg, #3A4294, #E52421, #23a6d5, #ffffff);
	background-size: 400% 400%;
	animation: neon 10s ease infinite;
    position:absolute;
    filter: blur(5px);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition:0.3s;
}
.neon-content {
    position:absolute;
    top:2px;
    left:2px;
    bottom:2px;
    right:2px;
    background-color:#141414;
    z-index: 1;
    transition:0.3s;
}
.game-number {
    font-size: 20px;
}
.game-container {
    text-align: center;
    padding:20px;
}
.game-title {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}
.game-creator {
    font-size: 32px;
    line-height: 1em;
}
@keyframes neon {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}