@font-face {
	font-family: 'Retro Gaming';
	src: url(Retro\ Gaming.ttf) format('woff2');

}


/* .upside{
	background-image: url(/home/lyes/L2/Web/projets-web/site-10-portfolio/images/upsideDown.jpg);
}
 */
.hidden {
	display: none;
}

.niveau {
	position: relative;
	text-decoration: solid;
	bottom: 271px;
}



body {
	background-image: url(../images/spaceInvadersBackground.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;

}

/* styles.css */

.tricher {
    display: inline-block;
    background-color: #000000;
    color: #ff0000;
    border: 2px solid #ff0000; 
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}



.tricher:hover {
    background-color: #ff0000;
    color: #000000;
}



/* Header*/

header {
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	color: white;
	text-decoration: none;
	padding: 30px;
	padding-bottom: 40px;
	font-size: 20px;
	font-family: fantasy;
	z-index: 5;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}


nav a {
	color: rgba(255, 255, 255, 1);
	position: relative;
	transition: .5s;
}

B {
	font-size: x-large;
}

nav a:hover {
	color: white;
	text-decoration: none;

}


/*main*/


/* Acceuil */


.block {
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	border-radius: 35px;
	padding: 20px;
	font-family: 'Retro Gaming', sans-serif;
	color: white;

}

@media(min-width: 900px) {
	.block {
		margin: 10% 8%;

	}
}



main h1 {
	color: rgba(255, 255, 255, 1);
	text-align: center;
	font-size: 80px;
	margin-bottom: 45px;
}

main p {
	font-size: larger;
	margin-bottom: 40px;
}

#start {
	width: 10%;
	display: none;
	animation: zoom 1s forwards;
}

@media(max-width:960px) {
	#start {
		width: 30%;
	}

	.block {
		margin: 5% 7%;
	}

	.niveau {
		position: relative;
		top: 50px
	}
}

@media(max-width:720px) {
	#start {
		width: 30%;
	}

	main h1 {
		color: rgba(255, 255, 255, 1);
		text-align: center;
		font-size: 40px;
	}


}



@keyframes zoom {
	0% {
		transform: scale(0);
		display: block;
	}

	100% {
		transform: scale(1);
	}
}

/* Présentation */


.pos {
	height: 30px;
}

#presentation h2 {
	text-align: center;
	font-size: 70px;
	margin-bottom: 40px;
}


@media(max-width:720px) {
	#presentation h2 {
		font-size: 30px;
	}
}

h2+p {
	text-align: center;
	color: #ffc500;
}

.skills{
	display: flex;
	justify-content: space-evenly;
}

.skills img{
	width: 13%;
	border-radius: 100%;
}

.titres{
	display: flex;
	justify-content: space-evenly;
	font-size:x-large;
}

u {
	color: #ffc500;
}

#etoile {
	width: 1%;
	position: fixed;
	bottom: 406px;
	left: 202px;

}

@media(max-width:960px) {
	#etoile {
		width: 2%;
		position: fixed;
		bottom: 1488px;
		left: 88px;
		float: left;
	}

}


/*FORMATIONS*/

#formations h2 {
	text-align: center;
	font-size: 70px;
	margin-bottom: 40px;
}

@media(max-width:720px){
	#formations h2{
		font-size: 30px;
	}
}


.formation {
	width: 40%;
	margin: 50px;
	padding: 30px;
}


.annee{
	position: relative;
	left: 919px;
	bottom: 93px;
	font-size: xx-large;
}


@media(max-width:960px){
	.annee{
		position: relative;
		left: 374px;
		bottom: 143px;
		font-size: xx-large;
	}
	
}

@media(max-width:720px){
	.formation{
		width:70%;
	}
	.formation h3{
		font-size: larger;
	}
}


@media(max-width:960px){
	.formation {
		margin-left: 50px;
		padding: 30px;
	}
	.annee{
		left:374px;
		bottom:143px;
	}
	
}



@media(max-width:960px){
	.timeline:after{
		display: none;
	}
}


#enigme{
	font-family: cursive;
	font-size:xx-large;
	text-align: center;
}

#reponse{
    color: #ffffff; 
    background-color: #000000; 
    border: 2px solid #ffffff; 
    border-radius: 6px; 
    outline: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

#reponse:focus {
    background-color: #ffffff; 
    color: #000000; 
}


#cle{
	width: 8%;
	animation: zoom 1s forwards;
	justify-self: center;
}



.images {
	width: 6%;
	display: inline-block;
	animation: zoom 1s forwards;
}

#enigme{
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	border-radius: 35px;
	padding: 30px;
	width: 45%;
}




/* Projets */
#projets h2 {
	text-align: center;
	font-size: 70px;
	margin-bottom: 40px;
}

@media(max-width:720px){
	#projets h2{
		font-size: 30px;
	}
}

#goku{
	width: 10%;
}

.bubble {
	position: relative;
	max-width: 650px;
	padding: 20px;
	background-color: #ffffff;
	color: #000000;
	border-radius: 50px; 
}


/* Contact */
#contact h2 {
	text-align: center;
	font-size: 70px;
	margin-bottom: 40px;
}

@media(max-width:720px){
	#contact h2{
		font-size: 30px;
	}
}


#contact p{
	color:white;
}

.img {
	display: flex;
	justify-content: center; 
	align-items: center; 
	margin: 20px; 
}

.lien {
	width: 77px; 
	margin: 45px;
}

/* Footer */

footer p{
	background-color: rgba(0, 0, 0, 0.9);
	color: white;
	padding: 50px;
	font-size: xx-large;
	text-align: center;
}