/*----------------------------------main--------------------------------------*/

body {
	font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
	color: #000;
	background: #fff;
	margin: 0 auto;
	font-size: 1em;
	border-bottom: 15px silver solid;
	}

/*----------------------------------general styling--------------------------------------*/

a {
	color: #316896;
	text-decoration: none;
}

a img {
	border: none;
}

a:hover {
	color: indianred;
	text-decoration: underline;
}

acronym, abbr {
	border-bottom: 1px dashed #333;
	letter-spacing: .07em;
	cursor: help;
}

.caps {
	font-variant: small-caps;
	font-size: 0.8em;
	letter-spacing: 0.1em;
}


/*----------------------------------content--------------------------------------*/



#titlebox{
	width: 100%;
	border-top: 40px black solid;
	border-bottom: 40px black solid;
	background-color: #faf8eb;
	background-image:
  radial-gradient(circle at top left,     #faf8eb, transparent 70%),
  radial-gradient(circle at top right,    #e1dcc6, transparent 70%),
  radial-gradient(circle at bottom right, #0b4664, transparent 70%),
  radial-gradient(circle at bottom left,  #efece8, transparent 70%);
	background-image: url("background.jpg");	
	background-size: cover;
	background-position: 50% 75%;
}


	h1 {
		text-align: left;
		padding-left: 0.1em;
		font-size: 6em;
		font-weight: normal;
		line-height: 1.3em;
		
		width: 8em;
		padding-right: 1em;
		margin: 1em auto;
		max-width: 90%;

		text-shadow: 0 2px 0 rgba(255,255,255,0.75);
	}

.h1-blur {
  background: rgba(255,255,255,0.1); /* keeps the blur subtle */
  backdrop-filter: blur(2px);        /* tiny, barely noticeable blur */
  padding: 0 0.25em 0.25em 0; 
	border-radius: 20px;
}

	#titlebox p{
		text-align:center;
		font-size: 2em;
    max-width: 90%;
		width: 22em;
		margin: auto;
		padding: 0.3em;
		line-height: 2em;
		background: silver;
		border-radius: 4px;
		margin-bottom: 10px;
		background: rgba(192, 192, 192, 0.7);
    backdrop-filter: blur(6px);
	}

	#titlebox p span{
		display: inline;
		
		padding-bottom: 0.3em;
		border-bottom: 1px white solid;
		border-radius: 4px;
	}




	.main {
			margin-top: 5em;
			padding-bottom: 1em;
		
		width: 50em;
		max-width: 90%;
		margin-right: auto;
		margin-left: auto;
		}

.main img{
	float: left;
	margin-right: 1.4em;
	max-width: 50%;
	height: auto;
	border-radius: 3px;
}

.main p, .main ul{
	font-size: 1.4em;
  text-align: left;
	margin-top: 0;
}

ul{
	list-style-position: outside;
	padding-left: 0em;
}

li{
	position: relative;
	left: 1em;
	margin-right: 1em;
}



.footer_box {
	padding: 1em;
	border-top: 15px silver solid;
	background: white;
	line-height: 1em;
	text-align: center;
	background-image: linear-gradient(to right, rgb(255,255,255) 0%, rgb(230,225,230) 50%, rgb(255,255,255) 100%);	
}

.footer_box p{
	font-size: 0.9em;
	opacity: 40%;
	width: 40em;
	max-width: 95%;
	margin: 0 auto;
}



/*--------- responsive layout --------- */

/* if 1-column sommaire won’t fit vertically,
or if it obfuscates the title and lead,
we switch it to two-column */

@media all and (max-height: 580px), all and (max-width: 550px) {

	html{
		font-size: 0.9em; /* shrink, shrink */
	}

}

/* if screen becomes narrow */

@media all and (max-width: 41em) {
	h1{
		font-size: 5em;
		max-width: 99%;
		padding: 0 0.15em;
	}
}

/* if screen becomes very narrow */

@media all and (max-width: 400px) {
	h1{
		font-size: 4em;
	}
}

/*-------------------------------------*/

.niousletter{
	padding: 2em;
	border: none;
}

	.niouslettersignup{
		text-align: left;
	}

	.niouslettersignup input{
		display: inline-block;
		height: 3.1em;
		margin: 0;
		padding: 0 0.5em;
		font-size: 1em;
		line-height: 1.5em;
	}

	input.emailsub{
		width: 55%;
		min-width: 20em;
	}

	input.pouf{
		float: right;
		width: 25%;
		min-width: 8em;
		margin-bottom: 1em;
	}

	.pouf:hover{
		cursor: pointer;
	}

/*-------------------------------------*/


/* Dark Mode Styling */
@media (prefers-color-scheme: dark) {
    body {
        color: #ddd;
        background: #333333;
        background-image: none;
    }
	
	  img{
		  filter: brightness(0.8)
	  }

	
		h1{
			color: black;
		}
	
	#titlebox{
		color: black;
	}

    a {
        color: #79b8ff;
    }

    a:hover {
        color: #ff6b6b;
    }

    h2 {
        color: #fff;
    }


    input, textarea {
        background: #222;
        color: #ddd;
        border: 1px solid #555;
    }

    input::placeholder, textarea::placeholder {
        color: #888;
    }
	
	
	 .footer_box {	
	    background: black;
      background-image: linear-gradient(to right, rgb(40,40,40) 0%, rgb(60,60,60) 50%, rgb(40,40,40) 100%);
    }
	
	
}