* {
    box-sizing: border-box
}

:root {
    --sans: 1.2em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
    --mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
    --m1: 8px;
    --rc: 10px
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: auto;
    max-width: 600px;
    font: var(--sans);
    font-weight: 400;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    }

img,
iframe {
    border: 0;
    max-width: 100%;
}

img.r {
    float: right;
}

a {
    text-decoration: underline
}

a:hover {
    text-decoration:none
}

pre {
    font: 1em/1.6 var(--mono);
    background: padding:1em;
    overflow: auto
}

code {
    font: 1em/1.6 var(--mono)
}

blockquote {
    border-left: 5px solid;
    padding: 1em 1.5em;
    margin: 0
}

hr {
    border: 0;
    border-bottom: 1px solid
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: .6em 0;
    font-weight: 400
}

h1 {
    font-size: 2.625em;
    line-height: 1.2
}

h2 {
    font-size: 1.625em;
    line-height: 1.2
}

h3 {
    font-size: 1.2em;
    line-height: 1.2;
    font-style: normal;
    text-transform: uppercase;}
}

h4 {
    font-size: 1.1875em;
    line-height: 1.23
}

h5,
h6 {
    font-size: 1em;
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1em 0
}

th,
td {
    text-align: left;
    vertical-align: top;
    border: 1px solid;
    padding: .4em
}

thead,
tfoot {
    background: var()
}

pre,
code,
input,
select,
textarea,
button,
img {
    border-radius: var(--rc)
}

input,
select,
textarea {
    font-size: 1em;
    color: var();
    background: var();
    border: 0;
    padding: .6em
}

button,
input[type=submit],
input[type=reset],
input[type="button"] {
    -webkit-appearance: none;
    font-size: 1em;
    display: inline-block;
    color: var();
    background: var();
    border: 0;
    margin: 4px;
    padding: .6em;
    cursor: pointer;
    text-align: center
}

button:hover,
button:focus,
input:hover,
textarea:hover,
select:hover {
    opacity: .8
}

/article {
    background: var();
    border-radius: var(--rc);
    padding: 1em;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)
}

[style*="--c:"]:first-child,
section>section:first-child,
article:first-child {
    margin-left: 0
}

[style*="--c:"]:last-child,
section>section:last-child,
article:last-child {
    margin-right: 0
}

.left {
	float:left;margin-right:1.6rem;margin-top:1rem;margin-bottom:1rem
}
.right {
	float:right;margin-left:1.6rem;margin-top:1rem;margin-bottom:1rem
	}
.center {
    display: block;
    margin: auto
}

.w150 {
    width: 15rem
}

.border {
    border: 1px solid;
    padding: .5rem;
    border-radius: .8rem
}

.toTop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    margin-right: 1rem;
    font-size: 200%
}
/* ungrid.css (97 bytes minified) */
@media (min-width: 30em) {
    .row { width: 100%; display: table; table-layout: fixed; }
    .col { display: table-cell; }
}
.row2 {
    border-spacing: 0.5rem 0;
} /* = Gutter width*/

/* for Feedback button*/
#mySidenav a {
  position: fixed;
  left: -100px;
  transition: 0.6s;
  padding: 10px 10px 10px 10px;
  width: 130px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  /**/
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}

#contact {
  bottom: 1rem;
  background-color: #04AA6D;
}
.nowrap {
    white-space: nowrap;
}
/* for my popup pseudo modals */
.popup {
     width: fit-content; max-width:100%;
   color:#FFF; background:#767676;padding: 1rem;
}
details{
	cursor:pointer;
}
summary{
    list-style: none; /* or 'none' for no arrow*/
    text-decoration:underline dotted;  /*or 'underline'*/
    text-decoration-style: dotted;
}

.hidden {
	display: none;
}
/* for "Ideal Line Length */
#grad1 { height: 2.5rem; width: 50rem; background-image: linear-gradient(to right, red , red, orange, yellow, yellow, lightgreen, lightgreen, lightgreen, yellow); }

/*  for Emoji*/
.M{
	font-size:120%;
}
.L{
	font-size:150%;
}
.XL {
	font-size:300%;
}
.XXL {
	font-size:500%;
}