HTML { background: black; font-size: 1em; } 

BODY {
 font-family: "Avenir Next", Helvetica, Verdana, Arial, sans-serif;
 font-size: 3vw; line-height: normal; background: black;
 } 

/* DIV ALIGNMENT */
DIV.mainbod { background: white; padding: 1vw; margin: 1vw; } 
DIV.innerbod { width: 80%; margin: 0 auto; } 

DIV.senter, DIV.droiter, DIV.gauche  {
 display: flex; align-items: center; justify-content: center; } 

DIV.droit { float: right; } /* mainly for main menu bar */
DIV.left1 { float: left; } 

/* DIV BACKGROUND PADDING BORDER MARGIN */
DIV.box0, DIV.box1, DIV.box2 { margin: 1vw; padding: 1vw; } 
DIV.box0a { margin: 0.5vw; padding: 0.5vw;} 
DIV.box1, DIV.box2 { background: #eeddff; border-radius: 1rem; box-shadow: 5px 5px #ffddee; } 
DIV.box0a, DIV.box1 { border: 2px solid navy; }
DIV.box2 { border: 6px double navy; } 
DIV.foot1 { border-top: 2px solid navy; padding: 1vw; } 

/* EVERYTHING ELSE */

H1, H2, H3, H4, H5, H6 {
 font-family: 'Trebuchet MS', Arial, Palatino;
 text-align: center; font-weight: normal; 
 } 
H3, H4, H5, H6 { padding: 0; margin: 0; } 
H3, H4, H5 { margin-top: 9px; } 

H1 { font-size: 6vw; color: navy; margin: 7px; padding: 0; }
H2 { font-size: 5.5vw; color: maroon; margin: 3px; padding: 0; }
H3 { font-size: 5vw; color: navy; }
H4 { font-size: 4.5vw; color: maroon; }
H5 { font-size: 4vw; color: navy; }
H6 { font-size: 3.5vw; color: maroon; } 

H2.toomuch {font-size: 3vw; } 

A { text-decoration: none; border-bottom: 1px solid; } 
A:link { color: purple} 
A:visited { color: darkmagenta; } 
A:hover { color: fuchsia; } 
A:active { color: green; } /* cyan */

P { text-align: left; margin: 0.5rem 0 0.5rem 0; padding: 0; }  

P.headbar {text-align: right; margin: 0; } /* top right */
P.headbar { text-transform: uppercase; } 

P.topbar { text-align: center; } /* Top-link */ 
P.footbar { margin: 0; text-align: right; }  /* bottom */ 
P.headbar, P.footbar, P.topbar { font-size: 0.75rem; } 

IMG { display: block; max-width: 100%; height: auto; } 
IMG.ltlogo { float: left; } 

UL, OL { text-align: left; list-style-position: inside; }

HR { height: 2px; background: maroon; margin: 2vw; } 

LI.lipara { margin-bottom: 1.5em; } 

.cb { clear: both; } 
.linkunline A { border-bottom: 0; } 
.vld IMG { display: inline; } 

/* ABOVE FOR SMALL SCREEN, BELOW FOR MEDIUM */

@media screen and (min-width: 640px) and (max-width: 1079px) {

BODY { font-size: 2vw;; } 

H1 { font-size: 5vw; color: navy; margin: 7px; padding: 0; }
H2 { font-size: 4.5vw; color: maroon; margin: 3px; padding: 0; }
H3 { font-size: 4vw; color: navy; }
H4 { font-size: 3.5vw; color: maroon; }
H5 { font-size: 3vw; color: navy; }
H6 { font-size: 2.5vw; color: maroon; } 

 } /* at-media -medium screen */

/* BELOW FOR LARGE SCREEN */

@media screen and (min-width: 1080px) {

BODY { font-size: 11pt; } 

DIV.mainbod { padding: 1em; margin: 2em; } 

DIV.droiter { float: right; align-items: flex-end; justify-content: normal; } 
DIV.gauche { float: left; align-items: flex-start; justify-content: normal; } 

H1 { font-size: 36pt; }
H2, H2.toomuch { font-size: 26pt; }
H3 { font-size: 22pt; }
H4 { font-size: 18pt; }
H5 { font-size: 16pt; }
H6 { font-size: 14pt; } 

 } /* at-media -large screen */

/* low21.css - updated 2023-12-09
 */