body {
    margin: 0px;
    padding: 0px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ColorScheme-PositiveText { color:#27ae60; }
.ColorScheme-Text { color:#232629; }
.ColorScheme-NeutralText { color:#f67400; }
        
main {
    flex-grow: 3;
    padding:10px;
    font-size: smaller;
}

header {
    position: fixed;
    width: 100%;
    background: linear-gradient(to bottom, #fff 85%, rgba(0,0,0,0));
    padding-bottom: 40px;
    z-index:2;
}

main { padding-top: 180px; }

#logo {
    display: flex;
    justify-content: center;
}
#logo svg { width: 80px; height:80px; padding-top:5px; }

#nav { display: flex; flex-direction: row; justify-content: center; }
#nav li { display: flex; flex-wrap: wrap; justify-content: start; padding:0px; color: black; text-shadow: 1px 1px 5px #666; margin:0 1em 0 1em; cursor:pointer; }
#nav > li > span { display:none; margin:0px;padding:0px;}
#nav svg { width: 32px; height: 32px; }

h1,h2,h3 { text-align: center; text-shadow: 2px 2px 5px #9D78AD; }
h1 { font-family: titleFont; font-size: 60px; margin:15px 0 10px 0; }

ul {margin:0px; padding:0px;}
.svg_nav { max-height:2em;}
.tx {line-height:2;}
.svg_icon {
    height:30px; width:30px; margin-right:10px;
}

.mono-col {
    margin: 1em auto;
    width: 400px;
    max-width: 100%;
}
.mono-col > li {
    margin: .5em 0 .5em 0;
}
.mono-col > li > input {
    font-size:120%;
}

fieldset.res {
    max-width: 800px;
    margin: 2em auto 0px auto;
    border-radius: 25px;
    box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.5);
} 

ol li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0.1em;
    line-height: 2em;
}

ol , ul {
    list-style: none;
    padding:0px;
    margin:0px;
}

form.form > ol {
    padding:0;
    margin:0;
    list-style-type:none;
}

form input , form select {
    padding: 10px 16px;
    border-radius: 10px;
    width:100%;
}

form input {
    box-sizing: border-box;
}

form input[type = submit] {
    margin: 10px auto;
    padding:12px 30px 12px 30px;
    display: block;
    width: auto;
    background-color:#80ff80;
    border-radius: 25px;
    cursor:pointer;
    font-size:1.1em;
}

form select {
    margin: 6px 0;
    border: none;
    background-color: #f1f1f1;
}
form select:hover {
    cursor:pointer;
    background-color: #f0f0ff;
}

form textarea {
    width:100%;
    border-radius: 10px;
}

.message { 
    width: fit-content;
    margin: 5px auto; 
}

legend.legend {
    border-color: #a3aba3;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    background-color:#d5dbec;
    font-size: 1em;
    font-weight: bold;
    padding: 4px 20px 0px 20px;
}

.res > ul > li { padding: .2em 0 .2em 0; }
.res > ul > hr { margin : 0px; color: #dda; }
.date {
    font-weight: bold;
}

.tags, .categories, .date { padding-right:.5em; }

.tags, .categories, .datas, .date {
    font-size:0.8em;
}

.datas { margin:0px; padding-left:1em; }

.files { font-size:0.9em; display: block; }
.files > a { text-decoration: none; }

.files > h5 {
    display:inline-block;
    font-size: 0.8em;
    margin:0px;
}


form label {
/*     padding: 6px 26px 0px; */
    margin: 0px;
    box-sizing: border-box;
    border-radius: 4px;
    width:100%;
    font-weight: bold;
}

p.p {
    font-weight:normal; line-height:1em; margin:3px 0px 5px 0px;
}

.help {
    cursor:help;
}

.img_ta {
    max-height: 1.6em;
    float: right;
    padding: 0px;
    box-sizing: border-box;
    color:black;
    width:2em;
}
.span_ta {
    float: right;
    padding:0px 8px 0 0px;
    font-size: small;
    font-stretch: condensed;
    font-weight: bold;
}
.img_ta:hover,
.span_ta:hover { cursor:pointer; }
.green { fill:green; }
.red { fill:red; } 
.l_icon { height : 1.2em; }
.logs {
    padding-left: .8em;
    /*margin-top: .5em;
    flex-grow: 3;*/
    font-size:0.8em;
    line-height:2;
}
#lien {
    display: block;
    text-align: center;
    padding: 14.5px;
}
#lien:hover {
    color:blue;
    cursor:pointer;
}
#cde { display:none; }
.message p {
    display: flex;
    align-items: normal;
    margin: 8px 0 8px 0;
}

form.form output.w20 {
    text-align:center;
    width: 100%;
}
form.form input.w20 {
    width:49%;
    margin:0.5%;
    padding:0;
}
    
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: content-box;
	/* your thumb styles */
}

input[type=range]::-moz-range-thumb {
	/* again your thumb styles */
}

input[type=range]::-ms-thumb { /* should come after -webkit- */
	/* again your thumb styles */
	/* may require different margins */
}

input[type=range]::-webkit-slider-runnable-track {
	/* your track styles */
}


input[type=range]::-ms-track { /* should come after -webkit- */
	border-color: transparent;
	color: transparent;
	/* again your track styles */
}
input[type=range].s {
    cursor: w-resize;
}
input[type=range].e {
    cursor: e-resize;
}
input[type=range].s::-moz-range-track {
  background-color: green;
}
input[type="range"].s::-moz-range-progress {
  background-color: #ccc;
}
input[type=range].e::-moz-range-track {
  background-color: #ccc;
}
input[type="range"].e::-moz-range-progress {
  background-color: green;
}
input[type="range"] {
    font-size: medium;
}
input[type="file"] {
    font-size:inherit;
    border:solid #bbb 1px;
    text-align: center;
    border-top-width: 2px;
    border-left-width: 2px;
}


footer {
    padding: 0.5em;
    display: flex;
    border-top: black solid 1px;
    justify-content: space-between;
}
footer li { cursor:pointer; }
footer > span, a.ref_menu {
    padding:5px;
}
footer svg {width:32px; height:32px;  margin-left:25px;}

ul.footer {
    display: flex;
    flex-direction: row;
}
a.ref_menu {
    display:flex;
    color:black;
    text-decoration:none;
    border: solid 1px;
    border-radius: 5px;
}
a.ref_menu > span {
    display: inline-block;
    padding-left:10px;
}









@media (min-width:800px) {
main { font-size: initial; padding-top: 220px; } 
h1 { font-size:100px; margin:35px 0 10px 0;}
#logo svg { width: 100px; height: 120px; padding-top:20px; }

#nav > li > span {display:inline-block; padding-left:10px; }
    
form.form > ol > li {
    display: flex;
    justify-content: unset;
    margin:.1em;
    flex-grow: 0.04;
}
form label {
}

input.form-control { width:400px;}

form.form input.w20, form.form output.w20 {
    width: 24%;
    height: 1.5em;
}
form input , form select {
    font-size: 1.1em;
}

.img_ta {
/*     margin:8px; */
}
#nav li {
    flex-grow: 0.04;
}
.mono-col > li {
    font-size:120%;
}
.logs {
    font-size:1.1em;
    line-height:1.6;
}

.tags, .categories, .date { padding-right:1em; }

.tags, .categories, .datas, .files, .date {
    font-size:1em;
}

.res > ul > li { padding: .5em 0 .5em 0; }
    
}

@font-face {
  font-family: titleFont;
  src: url(Great_Vibes/GreatVibes-Regular.ttf);
  font-weight: bold;
}