/* DUKEART CSS STYLE * BY DUKE * CC-BY-NC 4.0 */
@font-face { font-family: Nasa; src: url('nasalization-rg.ttf'); }

/* LOADING */

@keyframes loading {
0%   { background:#000; width:40%; }
100% { background:#fff; width:80%; }
}

#loading {
    width: 600px;
	margin: 0 0;
    height: 20px;
	font-size: 1em;
	text-align: left;
    animation-name: loading;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
	display:block;
}

/* GENERAL */

* {
	border:0;
	margin:0;
	padding:0;
	width:auto;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	text-decoration:none;
	text-align:center;
	font-family:"Nasa",serif,"sans-serif","Monotype Corsiva";
	background:transparent;
	color:#157;
}

body {
	background:#000;
	color:#157;
}
#title {
	background:transparent;
	padding:5px;
	text-align:center;
	margin:0 auto;
	border:none;
	border-radius:15px;
	display:inline-block;
}

@keyframes rootblink {
0%   { background:transparent;border-radius:0px;width:50%; }
50%  { background:#259; }
100% { background:#000;border-radius:10px;width:70%; }
}


#title:active {
   background-color:#157;
   box-shadow:0 5px #123;
   transform:translateY(4px);
}

div.section {
	width:50%;
	padding:2px;
	margin:5px auto;
	border:1px solid;
	border-color:#000;
	border-radius:10px;
	color:#259;
}

div.main {
	background:transparent;
	display:block;
}
div.main:hover {
    color:#fff;
}

.logo {
	display:inline-block;
}

/* BUTTON (STYLE SWITCH) */
.button {
    border:1px solid;
	border-radius:15px;
    padding:2px;
    text-align:center;
    display:inline-block;
}
.button:hover {
	background-color:#157;
	border-radius:15px;
	color:#fff;
}

.button:active {
   background-color:#157;
   box-shadow:0 5px #123;
   transform:translateY(4px);
}
/* FORM */
form { display:inline-block; }
input {
	color:#fff;
	background:none;
	display:inline-block;
}

input.submit {
	width:100px;
	border:1px solid;
	border-radius:10px;
	display:inline-block;
}
input:hover { border-width:2px; }
input:active { border-width:2px; }

h0,h1,h2,h3,h4,h5,h6 { font-family:"Nasa",serif,"sans-serif","Monotype Corsiva"; }
h0 { font-size:2em; }
h1 { font-size:1.6em; }
h2 { font-size:1.2em; }
h3 { font-size:0.8em; }
h4 { font-size:0.5em; }
h5 { font-size:0.4em; }
p { font-style:oblique; }
b { font-weight:bold; }
a {
	background:transparent;
	color:#157;
	display:inline-block;
	margin:0 auto;
	width:auto;
}
a:hover { color:#fff; }

#canvas { width:auto; }
#audio {
	background:#123;
	padding:5px;
	margin:10px;
	border:1px solid;
	border-radius:5px;
}
#audio:hover {
	background:#456;
}
.footer {
	height:110px;
	font:14pt Nasa;
	position:bottom;
	bottom:0;
	background:transparent;
}
.gallery {
	background-color:#fff;
	padding:0;
	}
.miniature { display:block; }
.view {
	background-color:#fff;
	padding:0;
	}
/* ========================= FIN COMMONS */
/* ========================= STYLE ADAPTATIF */
/* ========================= LARGEUR > 720px */
@media screen and (min-width:720px) {
	.section { width:90%; }
	.section p { font-size:1em; }
	.footer {
		width:100%;
		font-size:1.2em;
		}
}
/* ========================= LARGEUR 520 à 720px */
@media screen and (min-width:520px) and (max-width:720px) {
	.section { width:100%; }
	.section h4 { font-size:1.3em; }
	.footer {
		width:100%;
		font-size:1em;
	}
	img { display:none; }
}
/* ========================= LARGEUR 320 à 520px */
@media screen and (min-width:320px) and (max-width:520px) {
/*	a { width:95%; }
	.section h1 { font-size:1.2em; }
	.section h2 { font-size:1.1em; }
	.section h3 { font-size:1em; }
	.section h4 { font-size:0.9em; }
	.section p { font-size:0.8em; }
	.footer {
		width:100%;
		font-size:0.8em;
	}*/
	img { display:none; }
}
/* ========================= LARGEUR 120 à 320px */
@media screen and (min-width:120px) and (max-width:320px) {
	* { width:100%; }
	#main { width:100%; }
	.section h1 { font-size:1em; }
	.section h2 { font-size:1.1em; }
	.section h3 { font-size:0.9em; }
	.section h4 { font-size:0.8em; }
	.section p { font-size:0.6em; }
	img { display:none; }
	.footer {
		width:95%;
		font-size:0.7em;
	}
}
/* ========================= LARGEUR 20 à 120px */
@media screen and (min-width:20px) and (max-width:120px) {
	* { width:95%; }
	h1 { font-size:1em; }
	h2 { font-size:0.9em; }
	h3 { font-size:0.8em; }
	h4 { font-size:0.7em; }
	p { font-size:0.5em; }
	img { display:none; }
	.footer {
		width:95%;
		font-size:0.7em;
	}
}