@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@200;300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geo:ital@0;1&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

body {
	margin: auto;
	background-image: url(https://www.publicdomainpictures.net/pictures/40000/nahled/black-background-1365087945eJf.jpg);
	background-size: 100%;
	background-repeat: repeat;
	font-family: "Geo", sans-serif;
	height: auto;
}

/* Navbar CSS */

.navbar {
	margin: 0 auto;
	display: block;
	text-align: center;
	font-size: 35px;
}

ul li {
	list-style: none;
	margin: 0 auto;
	border-left: 2px solid #f3b814;
	display: inline-block;
	padding: 0 30px;
	position: relative;
	text-decoration: none;
	text-align: center;
}

li a {
	text-decoration: none;
	color: white;
}

li a:hover {
	color: #f3b814;
}

li:hover {
	cursor: pointer;
}

/* Faux accueil CSS */

h1 {
	color: #f3b814;
}

.jokediv {
	margin: auto;
	padding: 20px;
	font-size: 50px;
	text-align: center;
}

.joke {
	color: white;
}

.joke:hover {
	color: #f3b814;
	cursor: pointer;
}

.question {
	color: #f3b814;
}

.Oui1 {
	font-size: 60px;
}

.Oui2 {
	font-size: 80px;
}

.Oui3 {
	font-size: 120px;
}

.Non1 {
	font-size: 30px;
}

.Non2 {
	font-size: 20px;
}

/* Home CSS */

.menu {
	display: grid;
	grid-template-columns: 35% 15.75% 15.75% 35%;
	gap: 5px;
	padding-left: 50px;
	padding-right: 50px;
	grid-template-rows: 65% 35%;
}

.desc1, .desc2 {
	font-size: 30px;
	text-align: center;
	place-content: center;
}

.desc1 {
	grid-column-start: 1;
	grid-column-end: 1;
	grid-row-start: 1;
	grid-row-end: 3;
}

.desc2 {
	grid-column-start: 4;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;
}

.portrait1, .portrait2 {
	max-width: 350px;
	min-width: 350px;
	min-height: 350px;
	max-height: 350px;
	border-radius: 200px;
	border: 2px solid white;
	cursor: pointer;
}

.toggle-btn {
	color: white;
	font-size: 50px;
	cursor: pointer;
}

.toggle-btn:hover {
	color: #f3b814;
}

.title { 
	color: #f3b814;
	margin-right: auto;
	cursor: pointer;
}

.content {
	border: 2px solid #f3b814;
	border-radius: 25px;
	display: none;
	height: 75%;
	width: 100%;
	align-items: center;
}

.subDesc.content {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 1;
}

.subDesc2.content {
	grid-column-start: 1;
	grid-column-end: 1;
	grid-row-start: 1;
	grid-row-end: 1;
}

.titleBis {
	color: #f3b814;
	margin: auto;
	padding: 5px;
}

.classes, .paragraphe, h1 {
	margin: auto;
}

.paragraphe {
	font-size: 28px;
	color: white;
}

.classes {
	font-weight: bold;
	font-size: 30px;
	color: #f3b814;
}

.titleDiv  {
	display: grid;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 1;
	color: #f3b814;
	align-items: center;
	text-align: center;
	font-size: 35px;
}

.toggle-btn.show {
	display: grid;
}

.show {
	display: grid;
}

.toggle-btn.unshow {
	display: none;
}

.unshow {
	display: none;
}

/* Download CSS */

.table {
	position: relative;
	top: 15px;
	margin: auto;
	border-collapse: collapse;
	text-align: center;
	border: 1px #f3b814 solid;
	width: 60%;
	border-radius: 25px;
	margin-bottom: 50px;
}

.td1 {
	color: #f3b814;
}

.td1, .th1 {
	padding: 15px;
	font-size: 25px;
	border: 2px #f3b814 solid;
	border-radius: 25px;
	width: 55%;
}

.td1 {
	height: 150px;
}

.th1 {
	color: #f3b814;
}

a {
	color: white;
}

a:hover {
	color: #f3b814;
	cursor: pointer;
}

/* About CSS */

.creditDiv {
	margin: auto;
	align-items: center;
	text-align: center;
	position: relative;
	top: 15px;
	border: 2px #f3b814 solid;
	border-radius: 25px;
	width: 55%;
	padding: 40px;
}

.crédit {
	font-size: 40px;
	color: rgb(255, 255, 255);
}

.crédit1 {
	font-size: 50px;
	font-weight: bold;
}

.créditTitre {
	font-size: 50px;
	font-weight: bold;
	color: #f3b814;
}

.avis {
	color: white;
	font-size: 50px;
	font-weight: bold;
	padding: 15px;
}

.avis:hover {
	color: #f3b814;
	cursor: pointer;
}

 /* Responsive vue tablette */

@media only screen and (max-width:1100px) {
	
	/* Responsive pour accueil */

	.portrait1, .portrait2 {
		max-width: 200px;
		min-width: 200px;
		min-height: 200px;
		max-height: 200px;
		border-radius: 100px;
		border: 2px solid white;
	}

	.titleDiv  {
		font-size: 27px;
	}

	.desc1, .desc2 {
		font-size: 22px;
	}

	.paragraphe {
		font-size: 22px;
	}

	.classes {
		font-size: 27px;
	}

	.content {
		height: auto;
	}

	/* Responsive pour a propos*/

	.crédit {
		font-size: 25px;
	}

	.crédit1 {
		font-size: 30px;
	}

	.créditTitre {
		font-size: 40px;
	}

	.avis {
		font-size: 30px;
	}
}

/* Responsive vue mobile */

@media only screen and (max-width:690px) {

	/* Responsive Jokes */

	.jokediv, h1 {
		font-size: 37px;
	}
	
	/* Responsive Navbar */

	.navbar {
		font-size: 20px;
	}

	ul li {
		border-left: 2px solid #f3b814;
		padding: 0px 5px;
		margin: 0 auto;
	}

	/* Responsive pour accueil */

	.menu {
		display: grid;
		grid-template-columns: auto;
		gap: 5px;
		padding-left: 50px;
		padding-right: 50px;
		grid-template-rows: 20% 50% 50% 10%;
	}

	.desc1 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 2;
		grid-row-end: 2;
	}

	.desc2 {
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 3;
		grid-row-end: 3;
	}
	
	.portrait1, .portrait2 {
		max-width: 200px;
		min-width: 200px;
		min-height: 200px;
		max-height: 200px;
		border-radius: 100px;
		border: 2px solid white;
	}

	.titleDiv  {
		font-size: 23px;
		grid-column-start: 1;
		grid-column-end: 1;
		grid-row-start: 1;
		grid-row-end: 1;
	}

	.desc1, .desc2 {
		font-size: 20px;
	}

	.paragraphe {
		font-size: 20px;
	}

	.classes {
		font-size: 24px;
	}

	.content {
		height: auto;
	}

	/* Responsive pour a propos*/

	.crédit {
		font-size: 15px;
	}

	.crédit1 {
		font-size: 20px;
	}

	.créditTitre {
		font-size: 30px;
	}

	.avis {
		font-size: 20px;
	}
}