html {
		    height: 100%;
		    margin: 0;	}

@font-face {                  
font-family: 'Aber-Mono';
src: url(https://humantooth.neocities.org/fonts/Aber-Mono-Regular.woff) format('woff');
font-weight: normal; font-style: normal;} 
@font-face {  font-family:'AlphaProta'; src: url(https://eysselia.neocities.org/font/AlphaProta.ttf)}

		body {
background-color: SteelBlue;
background-image: url("moV.png");
background-repeat: repeat;
color: white;
font-family: Verdana; }

a:link { 
  text-decoration: none; }
a:visited {
  text-decoration: none; }
a:hover {
  text-decoration: underline; }
a:active {
  text-decoration: underline; }

.stcont a { text-decoration: none; color: lightseagreen;}
aside ul {  list-style-type: none;}
aside ul li a {color: LightSkyBlue; font-size: 16px; text-align: left;}
outer ul li a {color: #221e37; font-size: 16px; text-align: left;}

.fco {color: black; font-size:16px; font-family:'Aber-mono';}

li {  padding: 0px; margin:0}
h1 {
  color: navy;
  text-align: center; }

  .It {font-style: italic; text-align: center;}
  .ici {color: lightseagreen; font-size:10px; position:absolute;}

	.entete {			background-color: #221e37;
			width: 100%;
			margin: auto;	}
  .hero-text {
     text-align: center; position: absolute;
     bottom:50%; top: 30%; left: 50%;
     transform: translate(-50%, -50%);
     color: white;}
  .h-text {      position: relative; 
     text-align: center;
     top: 30%; left: 50%; 	
     transform: translate(-50%, -50%);
     color: black;}
  .hero-image {
     width: 100%; height: 100%;
     opacity: 1;
     background-position: center; background-repeat: no-repeat;
     background-size: auto;
     position: relative; }
  .hero-exclusions {
     position: fixed;
     text-align: center;
     top: 85%; left: 50%;
     transform: translate(-50%, -50%);
     color: white; }
  .responsive {
     max-width: 100%; height: auto; }
  .previous { display: grid;
     background-color: steelblue; color: black; text-align: center; font-size: 16px;
     max-width:55px; bottom:10px; position: sticky;}
     /*start of popup*/
  .exclusions {
     font-family: Georgia; font-size: 8pt; letter-spacing: 1px;
     text-shadow: none; font-style: normal; }
  .wrap {  width: 100%; max-height: 400px; overflow: hidden;}
 /* Menu dans entete*/ 
    .container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap ; justify-content: center; align-items: center; gap: 20px; }
    .box {  padding: 20px; flex: 1; } 
#container {
    display: flex; flex-direction: row;
    line-height: 1.2;
    /*padding: var(--padding); */
    margin: 0 auto; max-width: 80%;}
#primary-nav ul {
    padding: 0;    font-size: 1.2em;
    list-style: none;
    justify-content: space-evenly;  font-family: verdana;}
   /*aside container sticky test 03*/
    .stcont { position: sticky; top: 0;
       display: flex;  flex-direction: row;
       flex-wrap: wrap ; justify-content: center; align-items: center; gap: 5px; } 
 
/*intro*/
	.outer {
			position: relative;  display: block;
			top: 10px; bottom: 20px;
			background-color: steelblue;
			height: 90%; width: 80%;
			margin: auto;	} 
  
/* gallerie illu caeldass + sketch*/
	.outer2 {
			position: relative; display: block;	top: 0;
			background-color: #221e37;
			height: 80%;	width: 80%;
			margin: auto;	}
/*  .main {   max-width: 800px;   margin: auto; } */
  .row {  margin: 2% ;   width: 100%}
/* Add padding BETWEEN each column (if you want) */
  .row > .column {  padding: 2%; margin-left: auto;  margin-right: auto}
/* Create four equal columns that floats next to each other */
  .column {  float: left; text-align: center;  width: 20%; height: 20%; }
  .column2 {  float: left; text-align: center;  width: 45%;  padding: 2%; margin-left: auto;  margin-right: auto}
  .column3 {  float: left; text-align: center;  width: 30%;  padding: 2%; margin-left: auto;  margin-right: auto}
/* Clear floats after rows */
  .row:after {  content: "";   display: table;  clear: both; }
/* Content */
  .content {
  background-color: steelblue; text-align: center; padding: 3px; }
/* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 1000px) {
  .column { width: 100%; }  }
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
  .column { width: 60%; }  }
/* The Modal (background) */
  .modal {
    display: none;  position: fixed;
    z-index: 1000;
    left: 0;  top: 0;   width: 100%;  height: 100%;   max-width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;   justify-content: center;
    transition: opacity 0.5s ease; }
/* Modal content (image) */
  .modal-content {
    position: relative;
    width: 100%;   height: auto;  max-width:1910px;
    border-radius: 5px; animation: zoomIn 0.5s;}
@keyframes zoomIn {  from {transform: scale(0);}  to {transform: scale(1);} }
  .modal.show {  display: flex;  opacity: 1; }
/* Close button */
  .close {
    position: absolute;  top: 10px;  right: 15px;
    color: #ffffff; font-size: 35px;  font-weight: bold;  background-color:black; border-radius: 50%;
    cursor: pointer;  transition: transform 0.3s; }
/* Caption of modal image */
  .caption {
    position: relative;  bottom: 15px;  width: 90%;
    text-align: center;  color: #ffffff;  font-size: 24px; }
/* Défilement modal image */
  .modal-dialog {  position: relative;  width: 90%; overflow-y: scroll;}
  .modal-dialog-scrollable {  height: 100%;  overflow-y: scroll;}


/* gallerie grid responsive*/
	.blocg {
  display: grid;
  grid-gap: 20px;
  grid-template:
    "header header"
    "sidebar main"
    "footer footer"
    / 150px 1fr;}
  header { grid-area: header;  background-color: SteelBlue; padding: 0}
  aside { grid-area: sidebar; background: #221e37;}
  main { grid-area: main; background-color: SteelBlue;}
  footer { grid-area: footer;  background-color: SteelBlue; }
@media (max-width: 800px) {
    .blocg {
      grid-template:
        "header" 
        "Sidebar" 
        "MainContent" 
        "Footer"  /100%  }
  header { grid-area: header;  background-color: SteelBlue; }
  aside { grid-area: sidebar; background: #221e37; }
  main { grid-area: main; background-color: SteelBlue;}
  footer { grid-area: footer;  background-color: SteelBlue; }}