/* Feuille de style pour toutes les pages */

html {
	scroll-behavior: smooth;
}

/* Import des polices */

@font-face {
	font-family: 'Raleway';
	src: url(assets/Raleway-VariableFont_wght.ttf) format('truetype');
}

@font-face {
	font-family: 'Raleway Italic';
	src: url(assets/Raleway-Italic-VariableFont_wght.ttf) format('truetype');
}

@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	src: url(assets/material-symbols-outlined.woff2) format('woff2');
}

body {
	background: linear-gradient(to bottom, rgb(144, 212, 233), rgb(138, 207, 253))  fixed no-repeat;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
}

*:not(.footer, body, .expandedIMG>img, .expandedIMG, footer, nav, nav>ul>li, span, h1, span, i, a, p, br, nav, nav>p, .legende, section, .expandableIMG, .expandableIMG>img, [style*="diplay:inline"]){
	margin: 1vh 1.5vw;
}

/* Bandeau de navigation */

nav {
	position: fixed;
	top: 0;
	left: 0;
	background: #C095BA; 
	width: 100%;
	text-align: center;
	display: flex;
	margin-bottom: 1em;
	z-index: 2;
	cursor: pointer;
	justify-content: space-around;
	overflow: 0;
	font-size: 2em;
}

nav>p {
	font-size: large;
	vertical-align: middle;
	text-decoration: underline;
	margin: 0;
	padding: 0 1em;
	width: max-content;
	flex-grow: 2;
}

nav>p:hover{
	background-color: #B085AA;
}

nav>p.material-symbols-outlined {
	vertical-align: middle;
	text-decoration: none;
	flex-grow: 0.5;
}

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: grayscale;
}

aside.base {
	display: none;
}

aside#pagenav.shown{
	position: fixed;
	top: 0;
	left: 0;
	width: fit-content;
	height: 40%;
	background: rgb(189, 188, 123) ;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	z-index: 2;
	margin: 0;
	vertical-align: middle;
	
}

.pn1 {
	color: black;
	text-decoration: underline;
	font-size: 1em;
	margin: 0 0.5em;
	padding: 0;
	word-wrap: normal;
}

.pn1 .material-symbols-outlined {
	vertical-align: middle;
	text-decoration: none;
	margin-right: 0.5em;
}

.pagenav {
	display: grid;
	place-items: center;
	flex-grow: 1;
}

.pagenav:hover {
	background-color: #a665235f;
}

/* Contenu */

h1.titre {
	font-size: 2em;
	text-align: center;
	color: black;
	margin-top: 1em;
	display: block;
	font-weight: 400;
	cursor: pointer;
	text-decoration: underline;
}

p {
	font-size: 1em;
	margin: 0 1.5em;
}

.red {
	color: red;
	text-decoration: underline;
}

h2 {
	text-decoration: underline;
	font-weight: 400;
	margin: 1.5vh 1.5vw;
}

.expandableIMG {
	padding: 0;
	margin: 0;
	width: 100%;
}

.expandableIMG>img {
	cursor: zoom-in;
}

.expandableIMG#masahiro>img {
	width: 15vw;
}

.expandedIMG{
	display: grid;
	position: fixed;
	background: linear-gradient(to bottom, rgb(134, 202, 223), rgb(138, 207, 253)) fixed no-repeat;
	top: 0;
	left: 0;
	place-items: center;
	width: 100%;
	height: 100%;
	cursor: zoom-out;
	font-size: 1.6em;
	margin:0;
	z-index: 1;
}
.expandedIMG>img {
	margin-left: 0;
	height: 80vh;
	margin-top: 1em;
}

.expandedIMG>#myGithubIMG {
	width: 75%;
	margin-top: 1em;
}

.expandedIMG>.legende {
	padding-bottom: 3em;
	margin: 0;
}

p.legende {
	font-size: 0.8em;
	color: #494949;
	cursor: initial;
	margin: 1em 0;
}

a.legende {
	color: #494949;
	cursor: pointer;
}

.Flex1 {
	display: flex;
	flex-direction: row;
	column-gap: 2em;
	margin: 1em 2em;
}

.Flex2 {
	display: flex;
	flex-direction: row;
	column-gap: 1em;
	margin: 1em 2em;
	align-items: center;
}

@media screen and (orientation : portrait){
	.Flex1 {
		flex-direction: column;
	}
	
	nav {
		flex-wrap: wrap;
	}
	.expandableIMG#QR_exp>img, .expandableIMG#masahiro>img {
		width: 90vw;
		height: auto;
		margin-top: 3vh;
	}
	.expandableIMG#square>img, .expandableIMG#MyGithub>img {
		width: 70vw;
		height: auto;
		margin-top: 3vh;
	}
	.expandedIMG>img {
		width: 90%;
		height: auto;
	}
	.expandedIMG>p.legende {
		margin: 0 1em;
	}
	.qrimg {
		width: 90%;
	}
}

.expandableIMG>#MyGithubIMG {
	width: 15vw;
}

code#code, code#code2, code#code3{
	font-size: 1em;
	background-color: #f6f6f6;
	color: hsl(210,8%,20%);
	padding: 0.5em;
	border-radius: 0.5em;
	border-color: black;
	border-style: solid;
	position: static;
	display: block;
	width: fit-content;
	margin: auto 0;
	word-wrap: break-word;
}
code#code+span, code#code2+span, code#code3+span {
	color: #252832;
	font-size: 1.5em;
	height: 100%;
	cursor: default;
}

/* Générateur */

.gen {display: none;}

#qrcode {
	display: grid;
	place-items: center;
	size: min-content;
}

.qrimg {
	display: block;
	width: 45%;
}

#border {
	width: 4em;
}

#colorFG {
	width: 6em;
}

#colorBG {
	width: 6em;
}

.funcs_sel_bt {
	cursor: pointer;
	background-color: #b89524;
	color: white;
	padding: 8px;
	margin-bottom: 0;
	font-size: 16px;
	border: none;
	cursor: pointer;
	margin: 0;
}

.funcsdiv {
	position: relative;
	display: inline-block;
	margin: 0;
} 
.funcsdiv *, #gen, #gen *, #link, .link-bt, #url_gen, #funcs_bt, #funcs{
	margin: 0;
}

.funcs_sel {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.funcs span {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	width: 100%;
}

.funcs_sel_hover {
	display: block;
	position: absolute;
	cursor: pointer;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	margin-top: 0;
}
.funcs_sel_it {
	text-align: center;
	padding-right: 1em;
	display: block;
	padding: 0 0;
}

.funcs_sel_it:hover {
	background-color: #ddd;
}

/* Pied de page */

footer {
	text-align: center;
	display: flex;
	flex-direction: row;
	left: 0;
	width: 100%;
	justify-content: space-around;
	flex-wrap: wrap;
	background-color: #585858;
	font-size: small;
	position: fixed;
	bottom: 0;

}

.sources {
	text-align: center;
	color: #ffffff;
	text-decoration: underline;
	flex-grow: 1;
}

.hidden, .hidden * {
	display: none;
}