@font-face {
    font-family: 'Tuffy';
    src: url(Tuffy.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
font-family: 'Mno16';
src: url(Mno16.ttf) format("truetype");
font-weight: 400;
font-style: normal;
} /*sev.dev/fonts/mno16*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
/*@import url('https://fontlibrary.org//face/montserrat-ace');*/
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');*/





#cc0Link {left: 0px; font-family: 'Mno16';} 
#cc0Link a {border-bottom: 0px white solid;}
#playPause {right: 0px;}
#cc0Link, #playPause {bottom: 0px; padding: 10px 15px; position: fixed; z-index: 1; opacity: 1; filter: grayscale(0%); font-size: 24px; }

body {font-size: 16px; background-size: cover; background-attachment: fixed; background-position: center;
color: #fff; 
 background-color: #000; height: 100vh; width: 100vw; margin: 0;
background-image: url('bilths/Cévennes_France_night_sky_with_stars_02.jpg'); 
font-family: 'Tuffy', 'Noto Sans', sans-serif; /*'MontserratAceRegular',*/ font-weight: 200; text-align: center;
max-width: 96vw;
overflow-wrap: break-word;
  word-wrap: break-word;
hyphens: auto;
padding-left: 2vw; padding-right: 2vw;
 }
pre, code {font-family: 'Mno16', monospace;}
#content {padding-top: 100px; padding-bottom: 70px; padding-left: 0px; padding-right: 0px;
}

#outer {height: 100%; width: 100%; max-height: 100vh; max-width: 100vw;}
#outer { background-size: cover; background-attachment: fixed; background-position: center;
background-color: #000;
background-image: url('bilths/Cévennes_France_night_sky_with_stars_02.jpg'); }

.fig {height: 30vh; max-height: 30vh; width: 30vh; max-width: 30vh; background-size: cover; background-attachment: fixed; background-position: center; display: table-cell; text-align: center; vertical-align: bottom;}


p, figcaption, li {padding-top: 10px; padding-bottom: 10px; line-height: 1.5em; 
letter-spacing: 1px;}

figcaption {font-size: 0.75rem;}

/*stroke style from https://dev.to/codingdudecom/everything-about-stroke-text-in-css-561i*/
.stroke-text {
  --stroke-color: black;
  --stroke-width: 4px;
  letter-spacing: var(--stroke-width);
  color: white;
  text-shadow: var(--stroke-width) 0 0 var(--stroke-color),
    calc(var(--stroke-width) * -1) 0 0 var(--stroke-color),
    0 var(--stroke-width) 0 var(--stroke-color),
    0 calc(var(--stroke-width) * -1) 0 var(--stroke-color);
}

.smooth-16 {
  text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0
      var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0
      var(--stroke-color);
}

video {
object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;

}


h1 {font-size: 3rem; margin-bottom: 10px; text-align: center; margin-top: 10px; font-weight: 200;
 }

li, h1, p {margin: 10px; }
details {margin-top: 10px; margin-bottom: 10px;}

table {border-collapse: collapse; margin-left: auto; margin-right: auto;}

tr th, tr td {padding: 10px; vertical-align: top; border-top: 1px white solid; border-bottom: 1px white solid; }
/*old: box-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000; */

a { text-decoration: none; display: inline-block; padding-bottom: 2px; border-bottom-style: solid; color: #fff; border-bottom-color: #fff; box-shadow: 1px 2px 1px #000; font-size: 1rem;}

img {max-width: 90vw;}

pre {white-space: pre-wrap;}

#next {right: 0px; text-decoration: none; border: 0 white solid;  top: 0px; padding: 15px 30px; position: fixed; right: 0px; z-index: 1; opacity: 1; filter: grayscale(0%); }

/*#content 
{  filter: grayscale(0%); 
  justify-content: center;
	}*/

button {
 border: 0;
 background: #fff;
 color: #000;
 box-shadow: none;
 border-radius: 0px;
 padding: 10px 20px;
}
	
ol, li {list-style-position: inside;padding-left: 0px;}

input[type="radio"] {
        appearance: none;
      }

      input[type="radio"] {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px solid gray;
        /* Adjusts the position of the checkboxes on the text baseline */
        vertical-align: -2px;
        outline: none;
      }

      input[type="radio"]::before {
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        border-radius: 6px;
        background-color: white;
        font-size: 1.2em;
        transform: translate(3px, 3px) scale(0);
        transform-origin: center;
        transition: all 0.3s ease-in;
      }

      input[type="radio"]:checked::before {
        transform: translate(3px, 3px) scale(1);
        transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
      }

form p {padding-top: 0px; padding-bottom: 0px;}


#gallery {max-width: 90vw; width: 90vw; }