/*
Theme Name:  Era de Nyx, site officiel
Description: Site officiel d'Eta de Nyx
*/

/* ----- MEYER RESET CSS ----- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;}
	
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}
table {border-collapse:collapse;border-spacing:0;}

/* ----- BODY ------ */
html, body {width: 100%; margin: 0 auto; font-size: 100%; font-family: 'Oswald', sans-serif; font-weight: 200; background: #000;}
body {background: #000; color: #fff;}

/* FONTS */
h2, h3, h4, h5, h6 {font-family: 'Oswald', sans-serif; font-weight: 400;}
h1 {font-family: "Anton", sans-serif; font-size: 5em; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.03em;} 
h2 {font-size: 1.7em;} 
h3 {font-size: 1.2em;}
p {font-size: 1.2em;}
strong, b {font-weight: bold;}
i, em {font-style: italic;}

/* LINK */
a:link, a:active, a:visited {text-decoration: none; color: #000; } 
a:hover {color: #fff!important; text-shadow: 0px 0px 10px #fff!important;}
.logo:hover img {background: #fff!important;}

/* ----- NAVIGATION ----- */
#navigation {
	z-index: 998; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%;
	height: 11vh;
	margin: 0; 
	background: #000;
	box-shadow: 0px 10px 34px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 10px 34px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 34px 0px rgba(0,0,0,0.75);}

#navigation ul {width: 100%; margin: 3vh 0; padding: 0; list-style-type: none; text-align: center;}
#navigation ul li {display: inline-block; margin: auto 1.5%;}
#navigation ul li i {font-size: 2em;}
#navigation ul li p {font-size: 1em;}

/* ----- MAIN ----- */
#page {width: 75%; margin: 0 12.5% 10%; padding-top: 20vh;}

header {margin: 1% auto 10%; text-align: center;}
header p {font-size: 2.5em;}

/* ERROR */
#error {text-align: center;}
#error h1 {margin-top: 15%; font-size: 3em;}
#error p {font-size: 2em;}

/* ----- INDEX ------ */
#index {column-width: 25%; column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-gap: 2% ;}

#index article {width: 100%; margin: 0 auto 8%; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;}
#index article h2 {margin-top: 0.5%; font-size: 1.1em;}
#index article h2 i {margin-right: 0.5%;}

/* FORMAT */
#index article .defaut {padding: 8%; font-size: 1.1em; font-weight: 300; text-align: justify; color: #000!important; }
#index article .image img {width: 94%; padding: 3% 3% 2.5%; height: auto;}
#index article .quote {padding: 15%; font-weight: 400; font-size: 1.7em; text-align: center; color: #000!important; }
#index article .quote h2 {margin-bottom: 10%;text-transform: uppercase;  font-weight: 700;  font-size: 2em;}
#index article .quote span {font-weight: 200;}

/* ----- POST ----- */
#post {;}
#post header {margin: 5% auto; text-align: center;}
#post .meta {font-size: 1.7em; font-weight: 300;}
#post .content p {padding-bottom: 4%;}
#post .content blockquote {margin: 2% auto; font-style: italic; font-size: 1.6em; text-align: center;}

#post.single {width: 80%; margin: auto 10%;}
#post.single .content {column-width: 45%; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 4% ; text-align: justify; font-size: 1.5em;}
#post.single .content img {max-width: 100%; height: auto;}
#post.poesie {text-align: center;}
#post.poesie .content {font-size: 1.5em;}

#post.galerie {;}
#post.galerie .content {text-align: justify; font-size: 1.3em;}
#post.galerie .content p {font-size: 1.1em;}
#post.galerie .column-gallery {display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 1%; align-items: start; margin-top: 3%;}
#post.galerie .custom-gallery {max-width: 100%;}
#post.galerie .gallery-main img {width: 100%; max-height: 75vh; object-fit: contain; display: block; background: #000;}
#post.galerie .gallery-thumbs {display: flex; gap: 2%; justify-content: center; margin-top: 3%; flex-wrap: wrap;}
#post.galerie .gallery-thumbs img {width: 18%; height: 70px; object-fit: cover; opacity: 0.5; cursor: pointer; transition: all 0.3s ease;}

#post.contact {width: 80%; margin: auto 10%;}
#post.contact .content {text-align: center; font-size: 1.5em;}
.contact-intro {text-align: center;font-size: 1.5em; margin-bottom: 5%;}
.wpcf7 { width: 60%; margin: auto;}
.wpcf7 input, .wpcf7 textarea {border: none; color: #000; padding: 12px; width: 100%; margin-bottom: 1px; border-radius: 8px; box-sizing: border-box;}
.wpcf7 input[type="submit"] {color: #000; cursor: pointer;   width: 100%; padding: 14px; font-family: 'Oswald', sans-serif; font-size: 1.1em;}

/* ----- FOOTER ----- */
footer {width: 80%; margin: 10% auto 1%; text-align: center;}
footer ul {margin: 0 auto; padding: 0.5%; list-style-type: none;}
footer ul li {display: inline-block; margin : auto 0.5%; font-size: 1.7em;}

/* ----- RESPONSIVE MOBILE ----- */

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

    h1 {font-size: 2.5em;letter-spacing: 0.02em;}
	h2 {font-size: 1.4em;}
    h3 {font-size: 1.1em;}
    p  {font-size: 1.1em;}
	
    #page {width: 94%; margin: 0 3% 5%; padding-top: 18vh;}
	header {margin: 0 auto 8vh;}
	header p {font-size: 1.2em;}
	
	#navigation {height: auto;padding-bottom: 1vh;}
	#navigation ul {margin: 2vh 0;}
	#navigation ul li {margin: 0 3%;}
	#navigation ul li i {font-size: 1.5em;}
	#navigation ul li p {font-size: 0.8em;}

    #index {column-count: 1;column-width: 100%;}
	#index article {margin-bottom: 12%;}
	
	#post header {margin: -2vh auto 5vh;}
	#post .meta {font-size: 1.2em;}
	#post .content blockquote {margin: 5vh auto; font-size: 1.3em;}
	#post .content h2 {margin: 5% auto 1%;}
	#post.single {width: 100%;margin: auto;}
	#post.single .content {column-count: 1;column-width: 100%;font-size: 1.2em;}
	#post.single .content img {max-width: 100%; height: auto;}
	#post.poesie {text-align: justify;}
	#post.poesie .content p {font-size: 0.8em;}
	#post.galerie .column-gallery {display: block;}
	#post.galerie .content {font-size: 1.2em;}
	#post.galerie .gallery-main img {max-height: 65vh;}
	#post.galerie .gallery-thumbs img {width: 22%;height: 60px;}
	#post.contact .content {font-size: 1.1em;}

    footer {width: 95%;}
	footer ul li {font-size: 1.3em;}
	
}

/* ----- RESPONSIVE TABLETTE ----- */

@media screen and (max-width: 1024px) and (min-width: 801px) {

    h1 {font-size: 3em;}
    p  {font-size: 1.15em;}
	
    #page {width: 90%; margin: 0 5% 10%; padding-top: 18vh;}

    #navigation ul li i {font-size: 1.7em;}
    #navigation ul li p {font-size: 0.95em;}

    #index {column-count: 2;column-width: auto;}
	#index header p {font-size: 2.2em;}
	#index article {margin-bottom: 10%;}

	#post header {margin: 2% auto 5%;}
	#post .content blockquote {margin: 5vh auto;}
    #post.single {width: 95%;margin: auto;}
	#post.single .content {margin: 5% auto 0; column-count: 1;}
	#post.single .content img {max-width: 100%; height: auto;}
	#post.galerie .column-gallery {grid-template-columns: 1fr;}
	#post.galerie .gallery-main img {max-height: 70vh;}
	#post.galerie .gallery-thumbs img {width: 20%;height: 10vh;}
}



/* ----- ANIMATIONS ----- */
/* COLORS */
body, a:link, a:active, a:visited, #navigation {
    -webkit-animation: colors 30s infinite;
    -moz-animation: colors 30s infinite;
    -o-animation: colors 30s infinite;
    -ms-animation: colors 30s infinite;
    animation: colors 30s infinite;}
	
@-webkit-keyframes colors {
    0% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {color: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {color: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {color: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {color: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {color: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@-moz-keyframes colors {
    0% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {color: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {color: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {color: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {color: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {color: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@-ms-keyframes colors {
    0% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {color: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {color: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {color: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {color: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {color: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@-o-keyframes colors {
    0% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {color: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    20% {color: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {color: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {color: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {color: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@keyframes colors {
    0% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {color: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {color: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {color: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {color: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {color: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {color: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {color: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}

/* BACKGROUND CHANGE */
.background, .wpcf7 input,
.wpcf7 textarea  {
    -webkit-animation: background-change 30s infinite;
    -moz-animation: background-change 30s infinite;
    -o-animation: background-change 30s infinite;
    -ms-animation: background-change 30s infinite;
    animation: background-change 30s infinite;}
	
@-webkit-keyframes background-change {
    0% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {background: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {background: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {background: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {background: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {background: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@-moz-keyframes background-change {
    0% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {background: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {background: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {background: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {background: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {background: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@-ms-keyframes background-change {
    0% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {background: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {background: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {background: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {background: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {background: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@-o-keyframes background-change {
    0% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {background: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    20% {background: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {background: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {background: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {background: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}
@keyframes background-change {
    0% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    10% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    20% {background: #9fec07; text-shadow: 0px 0px 20px #9fec07;}
    30% {background: #00f8f2; text-shadow: 0px 0px 20px #00f8f2;}
    40% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    50% {background: #e10543; text-shadow: 0px 0px 20px #e10543;}
    60% {background: #f86c00; text-shadow: 0px 0px 20px #f86c00;}
    70% {background: #ffb142; text-shadow: 0px 0px 20px #ffb142;}
    80% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
    90% {background: #af30ed; text-shadow: 0px 0px 20px #af30ed;}
    100% {background: #dcf005; text-shadow: 0px 0px 20px #dcf005;}
}