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: 90%; margin: 0 auto; } 
DIV.blogbod { 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.spacer1, DIV.spacer2, DIV.spacer3 { width: 100%; } 
DIV.spacer1, DIV.spacer3 { height: 2rem; } 
DIV.spacer2 { height: 1rem; } 

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

/* 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.plug1 { margin: 0; } 
P.headbar, P.plug1 { text-transform: uppercase; } 

P.topbar { text-align: center; } /* Top-link */ 
P.footbar { margin: 0; text-align: right; }  /* bottom */ 
P.headbar, P.footbar, P.topbar, P.plug1, .littlercentre { 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; } 
HR.mnr { margin-left: auto; margin-right: auto; width: 50%; } 

.cntr, .littlercentre { text-align: center; } 
.gauchetext, DIV.listing H4 { text-align: left; } 
.autoleft { margin-left: auto; } 
.cb { clear: both; } 
.blk {color: black; font-weight: bold; } 
.vld IMG { display: inline; } 
.grabby { cursor: pointer; color: red; padding: 0 2px; border: 1px solid; } 
.grabby:hover {color: rebeccapurple; } 
.linkunline A { border-bottom: 0; } 

/* ONLINE STORE */
DIV.stor { background: navy; padding: 0.5vw 1vw; } 
DIV.stor H3, DIV.stor H4 { color: white; margin: 0; } 

/* 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; }
H2 { font-size: 4.5vw; }
H3 { font-size: 4vw; }
H4 { font-size: 3.5vw; }
H5 { font-size: 3vw; }
H6 { font-size: 2.5vw; } 

 } /* 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-end; justify-content: normal; } 
DIV.forty { width: 40%; } 

DIV.col2, DIV.col2a, DIV.col2b { column-count: 2; } 
DIV.col2, DIV.col2a { column-gap: 40px; } 
DIV.col2a { column-rule: 2px solid maroon; }
DIV.col2b { column-gap: 0; }
DIV.unbreak2 { break-after: column; } 

DIV.spacer1 { height: 3rem; } 
DIV.spacer2 { height: 2rem; } 
DIV.spacer3 { height: 1rem; } 

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; } 

 } 

/* photoj.css - updated 2022-02-03
 */
