/*******************************************************************************
 * NEDAO CSS styling. Found in a RoboDAO repo !
 * Copyright 2019 -- The RoboDAO (find our team on Keybase !)
 ******************************************************************************/

html {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*, *:before, *:after {
	box-sizing: inherit;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
	display: block;
}

body {
	background-image: linear-gradient(black 0%, rgba(63, 25, 96, 0.6) 40%, white 80%),
		url('../images/chateau_neuchatel.jpg');
	background-attachment: fixed;
	background-repeat:no-repeat;
	background-size: cover;
	background-blend-mode: lighten;
	margin: auto;
	padding: 0%;
	max-width: 100vw;
}

.modal {
	display: none;
	position: fixed;
	z-index: 10;
	padding-top: 16.66vh;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.6);
}

.modalcontent {
	position: relative;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.88);
	border-radius: 4px;
	margin: auto;
	padding: 0;
	border: 1px solid rgba(#000000, 0.6);
	width: 40%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
}

.modalheader {
	border-radius: 4px;
	background-color: rgb(84, 148, 236);
	background-color: rgba(84, 148, 236, 0.0);
	background-image: linear-gradient(178deg, #5393ecff 0%, #93ecec40 80%, rgba(255, 255, 255, 0.8) 100%);
	padding: 2px 12pt;
}

.modalbody {
	margin: 4px 12pt;
	padding-bottom: 6pt;
	max-height: 60vh;
	overflow-y: scroll;
}

@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0.5}
  to {top:0; opacity:1}
}

.closex {
	float: right;
	margin-top: 6px;
	font-size: 1.6em;
	font-weight: bold;
}

.closex:hover, .closex:focus {
	cursor: pointer;
	text-shadow: 0 0 2px yellow;
	color: white;
}

abbr {
	cursor: help;
}

a {
	text-decoration: none;
	text-shadow: 0 0 6px white;
}

a:hover, a:focus {
	text-shadow: 0 0 4px yellow;
}

span {
	margin-left: 2pt;
}

nav {
	position: sticky;
	background-color: rgba(144, 242, 255, 0.6);
	overflow: hidden;
	top: 0;
	width: 100vw;
	padding-right: 10px;
	max-height: 36pt;
	overflow: hidden;
	transition: width 0.4s;
}

nav a {
	float: left;
	display: block;
	color: black;
	text-align: center;
	margin-top: 0;
	padding: 4pt 6pt;
	text-decoration: none;
	font-size: 24pt;
	transition: color 0.4s, text-shadow 0.4s, margin-top 0.4s;
}

nav a:hover {
	color: white;
	text-shadow: 0 0 8px yellow;
}

nav a.active {
	background-color: rgba(202, 242, 248, 0.6);
}

nav span.navscrollgap {
	display: inline-block;
	margin: 0 12px;
	padding: 0 12px;
	width: 12px;
	background-color: transparent;
}

span.identipic {
	display: inline-block;
	margin: 6pt 8pt 0pt 0pt;
	background-position: center;
	background-size: cover;
	background-clip: border-box;
	background-image: url("../images/no-identicon.png");
	filter: grayscale(1);
	border-radius: 24pt;
	box-shadow: 2px 1px 8px black;
	width: 48pt;
	height: 48pt;
	transition: border-radius 0.4s, box-shadow 0.4s;
}

nav span.identipic {
	float: right;
	margin: 6pt 8pt 0 0;
	border-radius: 12pt;
	box-shadow: 2px 1px 8px black;
	width: 24pt;
	height: 24pt;
	padding: 0;
}

span.identipic:hover {
	border-radius: 6pt;
	box-shadow: 4px 2px 10px black;
}

nav span.navstatus.warn {
	background-color: rgba(255, 142, 0, 0.76);
	border-color: rgba(255, 142, 22, 0.5);
	box-shadow: 0 0 14px rgb(255, 138, 0);
}

nav span.navstatus.okay {
	background-color: rgb(103, 227, 136);
	border-color: rgba(125, 212, 108, 0.54);
	box-shadow: 0 0 14px rgb(20, 245, 16);
	color: white;
}

nav span.navstatus {
	float: right;
	margin: 8pt 10pt 8pt 0;
	height: 100%;
	background-color: rgba(255, 0, 0, 0.76);
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	border-color: rgba(255, 22, 22, 0.5);
	box-shadow: 0 0 12px rgb(255, 0, 0);
	padding: 4pt 6pt;
	font-size: 8pt;
	text-align: center;
}

nav a.menuopenbtn {
	display: none;
}

.screencontent {
	display: block;
	margin: 0% 8.33% 1vw 8.33%;
	padding: 0.4% 2% 0.4% 2%;
}

mark {
	background: rgba(255, 252, 0, 0.8);
	box-shadow: 0 0 4px 2px rgba(255, 252, 0, 0.8);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Gruppo', cursive;
}

h1, h2 {
	text-align: center;
	text-shadow: 0 0 8px white;
}

h3 {
	margin-top: 1em;
	margin-bottom: 1em;
}

h4, h5, h5 {
	margin-top: 0.8em;
	margin-bottom: 0.4em;
}

footer {
	margin: 24pt auto 0 auto;
	padding: 12pt auto;
	text-align: center;
}

.partenaire img {
	width: 20%;
	margin-bottom: 24pt;
}

p {
	text-align: justify;
	text-align-last: left;
}

.popup {
	text-shadow: 0 0 8px white;
	transition: text-shadow 0.4s, color 0.2s;
}

.popup:hover, .popup:focus {
	cursor: help;
	text-shadow: 0 0 2px yellow;
	color: white;
}

.doors {
	display: grid;
	margin: 4.16% auto;
	grid-template-columns: 22% 22% 22% 22%;
	grid-row-gap: 2vh;
	grid-column-gap: 2vw;
	justify-content: center;
	width: 100%;
	/*filter: blur(8px);
	-webkit-filter: blur(8px);*/
	perspective-origin: center;
}

.door {
	padding: 18pt;
	border-radius: 22px;
	border-style: solid;
	border-width: thin;
	border-color: rgba(255, 255, 255, 0.72);
	box-shadow: 4px 4px 6px black;
	overflow: hidden;
	background: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(226, 219, 233, 0.8) 40%, rgba(119, 119, 119, 0.8) 100%);
	background-blend-mode: overlay;
	z-index: 1;
	perspective: 200px;
	transition: box-shadow 0.2s, transform 1s, background 2s;
	transform-origin: center;
	transform: rotateY(20deg);
	transform-style: preserve-3d;
}

.door p {
	font-size: 10pt;
}

.door:hover {
	cursor: pointer;
	box-shadow: 6px 6px 10px black;
	background: linear-gradient(rgba(255, 255, 255, 0.8) 0%, rgba(226, 219, 233, 1.0) 40%, rgba(184, 184, 184, 0.8) 100%);
	transform: rotateY(0deg);
}

.hideme {
	transition: margin 0.4s;
}

form {
	margin: 18pt auto;
	padding: 12pt;
	border-radius: 22px;
	border-style: solid;
	border-width: thin;
	border-color: rgba(255, 255, 255, 0.72);
	box-shadow: 4px 4px 6px black;
	overflow: hidden;
	background: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(226, 219, 233, 0.8) 40%, rgba(119, 119, 119, 0.8) 100%);
	background-blend-mode: overlay;
	z-index: 1;
}

.fieldsfield {
	display: grid;
	grid-template-columns: 20vw 30vw;
	grid-row-gap: 2vw;
	grid-column-gap: 48pt;
	text-align: right;
	justify-content: center;
}

#formbtn {
	float: right;
	font-size: 1.2em;
	font-family: sans-serif;
}

input {
	padding: 2pt 4pt;
	border-radius: 2px;
}

input[type="ethaddr"] {
	font-family: monospace;
	font-size: 1.2em;
	box-shadow: 0 0 12px 4px rgba(255, 255, 242, 0.4);
	color: rgb(0, 255, 0);
	background-color: rgba(42, 42, 42, 0.8);
}

code {
	font-size: 1.1em;
	padding: 1px 2pt;
	border-radius: 2px;
	background-color: rgba(16, 36, 15, 0.42);
}

code a {
	color: rgb(34, 255, 162);
	text-decoration: underline;
}

code a:hover {
	background-color: rgba(42, 94, 40, 0.42);
}

pre {
	display: block;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(2, 24, 0, 0.64);
	padding: 6pt 12pt;
	text-align: left;
	background-color: rgba(28, 38, 29, 0.84);
}

code, pre {
	color: rgb(0, 255, 0);
}

/* Extra small devices */
@media screen and (max-width: 575px) {
	html {
		font-size: 0.8em;
	}
	
	nav.dispmenu .hideme {
		margin-right: -200px;
	}
	
	nav:not(.dispmenu) a:not(.menuopenbtn) {
		margin-top: -40pt;
		margin-left: -200pt;
	}
	
	nav a.menuopenbtn {
		text-align: left;
		display: block;
	}
	
	.screencontent {
		margin: 0% 5% 1vw 4%;
		padding: 0% 0%;
	}
	
	.modalcontent {
		width: 86%;
	}
	
	.fieldsfield {
		grid-template-columns: 80vw;
		text-align: left;
	}
	
	.doors {
		grid-template-columns: 92%;
	}
	
	.door {
		transform: rotateY(0deg);
	}
	
	.door .popup {
		font-size: 1.6em;
	}
	
	.partenaire img {
		width: 60%;
	}
}

/* Small devices */
@media screen and (min-width: 576px) and (max-width: 767px) {
	.screencontent {
		margin: 0% 4.16% 1vw 4.16%;
		padding: 0% 2%;
	}
	
	.modalcontent {
		width: 80%;
	}
	
	.closex {
		font-size: 2em;
	}
	
	.fieldsfield {
		grid-template-columns: 20vw 60vw;
		grid-column-gap: 2%;
	}
	
	.doors {
		grid-template-columns: 92%;
	}
	
	.door {
		transform: rotateY(10deg);
	}
	
	.door .popup {
		font-size: 1.4em;
	}
	
	.partenaire img {
		width: 40%;
	}
}

/* Medium devices */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.screencontent {
		margin: 0% 4.16% 1vw 4.16%;
		padding: 0% 4%;
	}
	
	.modalcontent {
		width: 68%;
	}
	
	.closex {
		font-size: 2em;
	}
	
	.fieldsfield {
		grid-template-columns: 30vw 40vw;
		grid-column-gap: 2%;
	}
	
	.doors {
		grid-template-columns: 50% 50%;
	}
	
	.partenaire img {
		width: 33%;
	}
}

/* Large devices */
@media screen and (min-width: 992px) and (max-width:1199px) {
	.screencontent {
		margin: 0% 8.33% 1vw 8.33%;
		padding: 0% 4%
	}
	
	.modalcontent {
		width: 60%;
	}
}

/* Extra Large devices : see default values above ! */
/*@media screen and (min-width: 1200px) and (max-width: 2159px) {
	
}*/

/* Ultra Large devices */
@media screen and (min-width: 2160px) {
	html {
		font-size: 1.25em;
	}
	
	.screencontent {
		margin: 0% 16.66% 1vw 16.66%;
		padding: 0% 4%;
	}
	
	.modalcontent {
		width: 36%;
	}
	
	.fieldsfield {
		grid-template-columns: 10vw 20vw;
		grid-column-gap: 1%;
	}
}