* { margin: 0; padding: 0; box-sizing: border-box;
  
/* COLORS */
  
  --text: #333;
  --bg1: #f5f5f5;
  --bg2: #f5f5f5;
  --h1-bg: #f5f5f5;
  --h1-text: #333;
  --border: #333;
  --link: #333;
  --underline: #999;
}
@media (prefers-color-scheme: dark) {
  * {
    --text: #DADADB;
    --bg1: #444;
    --bg2: #333;
    --h1-bg: #272727;
    --h1-text: #DADADB;
    --border: gray;
    --link: #DADADB;
    --underline: #888;
  }
}

/* FONT IMPORT */

:root {
  
  /* FONTS */
     --header: 'sysfont';
     --body: system-ui;
  
  /* MISC */
     --border-style: 2px solid var(--border);
     --drop-shadow-style: drop-shadow(.3rem .3rem 0rem var(--border));
     --h1-letter-spacing: .5px;
     --h1-weight: normal;
  
}
@font-face {
  font-family: 'sysfont';
  src: url("https://sweetfish.site/utility/fonts/sysfont.woff2");
}
@font-face {
  font-family: 'kare';
  src: url("https://sweetfish.site/utility/fonts/kare.otf");
}
@font-face {
  font-family: 'unifont';
  src: url("https://sweetfish.site/utility/fonts/unifont_upper-16.0.01.otf");
}
@font-face {
  font-family: 'textura';
  src: url("/utility/fonts/Pentiment_Textura.otf");
}
@font-face {
  font-family: 'druckers';
  src: url("/utility/fonts/Pentiment_Printed.otf");
}
@font-face {
  font-family: 'sligoil';
  src: url("/utility/fonts/Sligoil-Micro.otf");
}
@font-face {
  font-family: 'domitian';
  src: url("/utility/fonts/Domitian-Roman.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'domitian';
  src: url("/utility/fonts/Domitian-Bold.otf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'domitian';
  src: url("/utility/fonts/Domitian-Italic.otf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'domitian';
  src: url("/utility/fonts/Domitian-BoldItalic.otf");
  font-weight: bold;
  font-style: italic;
}

/* BASIC STRUCTURE */

       #dog {
            border-radius: 50%;
            border: 0px solid #fff2;
            margin: auto;
            padding: 20px;
            -webkit-transform-origin: 50% 50%;
                -ms-transform-origin: 50% 50%;
                    transform-origin: 50% 50%;
            -webkit-transition: -webkit-transform .8s ease;
            transition: -webkit-transform .8s ease;
            -o-transition: transform .8s ease;
            transition: transform .8s ease;
            transition: transform .8s ease, -webkit-transform .8s ease;
        }
        #dog:hover{
            -webkit-transform:rotate(calc(360deg));
                -ms-transform:rotate(calc(360deg));
                    transform:rotate(calc(360deg));
        }



main{
  position: relative;
  max-width: 850px;
  margin: auto;
  margin-left: 600px;
}

@media only screen and (max-width: 1250px){
  main{
  position: relative;
  max-width: 600px;
  margin: auto;
}
}

body {
  position: relative;
  margin: 0 auto;
  font-size: 17px;
  font-family: var(--body), system-ui, sans-serif;
  line-height: 1.4;
  color: white;
  background-image: url('https://partiallystars.neocities.org/pulsarmap.jpeg');
  background-size: 700px;
  background-color: black;
  background-repeat: no-repeat;
  background-position: left top; /* or other positions */
}
#main {
  padding: calc(4.7rem + .1vw) 5vw 5vw 5vw;
  position: absolute;
  top: 0;
  min-height: 100vh;
  width: 100%;
}



/* BASIC TEXT STYLING */

a {
  text-decoration: underline;
  color: var(--link);
  text-decoration-color: var(--underline);
}
a:hover {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
h1 {
  font-family: var(--header);
  font-size: 1.15rem;
  letter-spacing: var(--h1-letter-spacing);
  font-weight: var(--h1-weight);
  width: auto;
  margin: -1rem -1rem .75rem -1rem;
  padding: .55rem 1rem;
  background: #222220;
  color: lightgray;
    text-align: center;
}
.box-alone h1 {
  margin: -.55rem -1rem -.55rem -1rem;
  border: 0px;
  
}
h2 {
  font-family: var(--header);
  color: var(--underline);
  font-size: 1.15rem;
  letter-spacing: var(--h1-letter-spacing);
  line-height: 1.15rem;
  font-weight: var(--h1-weight);
  width: auto;
  margin: -1.85rem -1rem .75rem -1rem;
  padding: .55rem 1rem .7em .85em;
  border-bottom: var(--border-style);
  background: var(--h1-bg);
  color: var(--h1-text);
}
.box-alone h2 {
  margin: -1.2rem -1rem -.55rem -1rem;
  padding: .55rem 1rem;
}
h3 {
  font-family: var(--header);
  font-size: 1.15rem;
  letter-spacing: var(--h1-letter-spacing);
  font-weight: var(--h1-weight);
  width: auto;
  margin: -1rem -1rem .75rem -1rem;
  padding: .55rem 1rem;
  border-bottom: var(--border-style);
  background: var(--h1-bg);
  color: var(--h1-text);
}
h1 a, h2 a, h3 a {
  color: var(--link);
  text-align: center;
}
a h1, a h2, a h3 {
  color: var(--link);
}
::-moz-selection {
  color: var(--bg2);
  background: var(--text);
}
::selection {
  color: var(--bg2);
  background: var(--text);
}

/* BOXES */

.box {
  font-size: 1em;
  padding: 1rem;
  margin-bottom: 1.25rem;
  background: black; /*#0F0F13;*/
  
 /* filter: var(--drop-shadow-style);*/
}
.box-alone {
  padding: .55rem 1rem;
}
.box-text-only {
  padding-top: .85rem;
}

.sidebar {
  width: 150px;
  height: 250px;
  border: var(--border-style);
  filter: var(--drop-shadow-style);
  background: var(--bg2);
  margin: 50px;
  padding: 20px;


        }
    
    
/* FLEX */

.flex {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.3rem;
  width: 100%;
}
.flex-item {
  flex: 1 1 15rem;
}
.flex-no-wrap {
  flex-wrap: nowrap;
}
.flex-unequal {
  flex-wrap: nowrap;
}
@media only screen and (max-width: 680px) {
  .flex-unequal { flex-wrap: wrap; }
}
.flex-item-unequal {
  flex: 1 1 fit-content;
  min-width: 8rem;
}
.flex-buttons {
  display: flex;
  flex-flow: row wrap;
  padding: 1rem 0rem;
  gap: 10px;
  justify-content: center;
}

/* IMAGES */

.img-cover {
  margin: -.75rem -1rem -1rem -1rem;
  padding: 0rem;
  overflow: hidden;
}
.img-cover img {
  max-width: 100%;
}
.img-reduce-height img {
  max-height: 15rem;
  width: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.img-height-12em img {
  max-height: 12rem;
}
.img-position-topleft img {
  object-position: 0% 0%;
}
.img-position-bottom img {
  object-position: 50% 100%;
}
.img-text {
  margin: -.75rem -1rem .75rem -1rem;
  border-bottom: var(--border-style);
}
.img-alone {
  margin: -1rem;
}
.img-first {
  margin: -1rem -1rem 1rem -1rem;
}
figure {
  margin: 1rem 0em;
}
figure img {
  border: var(--border-style);
}
figure figcaption {
  margin: .75rem 0 0 0;
  font-size: .85rem;
  opacity: .75;
}
.img-render-crisp {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ADDITIONAL TEXT STYLING */

ul, ol {
  margin-bottom: 0em;
}
ol li::marker {
  font-family: var(--header);
  letter-spacing: var(--h1-letter-spacing);
}


li {
  margin-bottom: .35em;
}
li:last-of-type {
  margin-bottom: 0em;
}
ul, ol {
  padding-left: 2ch;
}
p {
  margin-top: .75em;
}
strong {
  color: var(--text);
  font-family: var(--header);
  letter-spacing: var(--h1-letter-spacing);
  line-height: 1.25;
}
q {
  font-family: var(--header);
  letter-spacing: var(--h1-letter-spacing);
  line-height: 1.25;
}
q:before, q:after {
  content: none;
}
time {
  font-size: .95rem;
  color: var(--underline);
}
time a {
  color: var(--underline);
}
time a:hover {
  color: var(--text);
}
small {
  font-size: .85em;
}
blockquote {
  padding: 0 0 0 1.5ch;
  margin: 0;
  position: relative;
  border-left: 1px solid var(--underline); 
}
aside {
  padding: 0 0 0 1.75em;
  margin: 0;
}
aside:before {
  content: "→  ";
  color: var(--underline);
  margin: 0 0 0 -1.2em;
}
hr {
  height: 1px;
  border: .5px solid var(--border);
  background: none;
  margin: .75em -1em;
}
.kare {
  font-family: 'kare';
  font-size: 1.75em;
}
@media only screen and (max-width: 680px) {
  .kare { display: none; }
}
.unifont {
  font-family: 'unifont';
  font-size: 1em;
}

/* CHECKOUT COUNTER */

.flex-item-checkout {
  flex: 3 1 10em;
  height: 100%;
  overflow: hidden;
}
@media only screen and (max-width: 680px) {
  .flex-item-checkout {
  flex: 1 1 20em;
  height: 100%;
}
}
.flex-item-checkout h1 {
  line-height: 1.15rem;
  font-size: 1rem;
  margin: -1rem -1rem .75rem -1rem;
  padding: .75rem 1rem;
}

/* INLINE FOOTNOTES */

label {
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  font-size: .75em;
  padding-left: .15em;
  color: var(--underline);
}
label:hover {
  color: var(--text);
}
label:before {content:"[";}
label:after {content:"]";}
label + input,
label + input + small {
  display: none;
}
input:checked + small {
  display: block;
  padding: 0em 0em 0em 1em;
  margin: .75em .5em 0em 0em;
  border-left: 1px solid var(--underline);
}

/* ARTICLE */

article {
  max-width: 55ch;
  margin: 0 auto;
  padding: 0em .25em;
}
.date {
  text-align: right;
  color: var(--underline);
}
.dropcap {
  float: left;
  font-family: 'textura';
  font-size: 4em;
  line-height: 60px;
  padding: .1em .1em .01em 0em;
}
.article-img {
  margin: 1.25em -1em .25em -1em;
  padding: 0em;
  overflow: hidden;
  border: var(--border-style);
}
.article-img img {
  width: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  max-height: 15em;
}
.article-img-center img {
  object-position: 50% 50%;
}
@media only screen and (max-width: 1250px) { 
  
  
  
  .article-img {
  border-top: var(--border-style);
  border-bottom: var(--border-style);
  border-left: 0px;
  border-right: 0px;
}
.article-img img {
  width: 99.99%;
}
}

/* NOTES */

.maxwidth {
  max-width: 38em;
  margin: auto;
}
.notes {
  font-family: var(--header);
  letter-spacing: var(--h1-letter-spacing);
  font-weight: var(--h1-weight);
  font-size: 1rem;
  padding: .5rem 1rem .5rem 1rem;
  margin-bottom: 1.3rem;
  border: var(--border-style);
  filter: var(--drop-shadow-style);
  background: var(--bg2);
  color: var(--h1-text);
}
.note-divide {
  margin: .5em -1em .5em -1em;
  border-top: var(--border-style);
}
.note-container {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  background: var(--h1-bg);
  margin: -.5rem -1rem -.5rem -1rem;
  padding: .55rem 1rem .55rem 1rem;
}
.note-title {
  display: flex;
  margin-right: auto;
  font-size: 1.15rem;
}
.note-date {
  display: flex;
  margin-left: auto;
  color: var(--underline);
  font-size: 1.15rem;
}
.notes a {
  text-decoration: none;
}
.notes a:hover {
  text-decoration: underline;
  text-decoration-color: var(--underline); 
}
.note-content {
  font-family: var(--body), system-ui, sans-serif;
  letter-spacing: 0px;
  border-top: var(--border-style);
  padding: .75em 1em 0em 1em;
  margin: .5em -1em 0em -1em;
}
.notes img {
  border: var(--border-style);
  margin: .75em 0em 1em 0em;
  max-width: 75%;
}
@media screen and ( max-width: 768px ) { 
  .notes img {
  max-width: 100%;
}
   }
.notes li {
  margin-bottom: .15em;
  line-height: 1.4;
}
.notes p {
  margin-bottom: 1em;
}
.note-img-2 {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  gap: .75em;
}
.note-img-2 img {
  border: var(--border-style);
  max-width: 100%;
  margin: 0em 0em 1em 0em;
}
.note-img-flex {
  flex: 1;
}

/* IMAGE GRID - SQUARE */

.grid {
  display: grid;
  grid-gap: 1.3em;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 150px = minimum image size */
  grid-auto-flow: dense;
  padding: 0em 0em 1em 0em;
}
.grid a {
  position: relative;
  border: 0;
}
.grid a:hover {
  transform: none;
}
.grid a:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.grid a img {
  position: absolute;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border: var(--border-style);
  filter: var(--drop-shadow-style);
  display: inline-block;
}
.grid-hover-text {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 98;
  font-size: 1rem;
  line-height: 1.25;
  font-family: var(--header), sans-serif;
  text-align: left;
  color: var(--text);
  background: var(--bg2);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-letter-spacing);
  padding: 1em;
  height: 100%;
  width: 100%;
  border: var(--border-style);
}
.grid-item:hover span, .grid-item:focus span {
  opacity: 1;
}
.grid-item-spoiler {
  display: inline-block;
  position: relative;
}
.grid-item-spoiler span {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 98;
  font-size: .9em;
  line-height: 1.15em;
  font-family: var(--header), sans-serif;
  text-align: left;
  color: var(--text);
  background: var(--bg2);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-letter-spacing);
  padding: 1em;
  height: 100%;
  width: 100%;
  border: var(--border-style);
}

/* IMAGE GRID - NOT SQUARE */

.grid-uneven {
  gap: 1.3em;
  column-count: 3;
}
.grid-uneven-item {
  padding-bottom: 1.3em;
}
.grid-uneven a {
  position: relative;
  border: 0;
}
.grid-uneven a:hover {
  transform: none;
}
.grid-uneven a img {
  border: var(--border-style);
  filter: var(--drop-shadow-style);
  display: inline-block;
}
@media ( max-width: 50em ) {
.grid-uneven {
	column-count: 2;
}
}
@media ( max-width: 30em ) {
.grid-uneven {
	column-count: 1;
}
}

/* LISTS GRID */

#main-lists {
  position: relative;
  max-width: 75rem;
  margin: 0 auto;
}
.grid-text {
  gap: 1.3em;
  column-count: 4;
}
.grid-text .box {
  break-inside: avoid;
}
@media ( max-width: 50em ) {
.grid-text {
	column-count: 2;
}
}
@media ( max-width: 30em ) {
.grid-text {
	column-count: 1;
}
}

/* LIGHTBOX */

.lightbox {
  display: none;
  color: var(--text);
}
.lightbox:target {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  align-content: center;
  background: var(--bg1);
  border: 0;
  z-index: 100;
}
.lightbox img {
  max-height: 90vh;
  z-index: 100;
}
.lightbox:target:after { /* × to close */
  content: "\00D7";
  position: fixed;
  font-size: 2em;
  font-weight: 200;
  line-height: 0;
  top: .75em;
  right: .5em;
  z-index: 100;
}
.lightbox-text {
  margin-top: 1em;
}

/* JUKEBOX */

.jukebox {
  font-size: 1em;
  padding: 0;
  margin-bottom: 1.25em;
  margin-left: auto;
  margin-right: auto;
}
.jukebox iframe {
  background: var(--border);
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45vh;
  border: var(--border-style);
  filter: var(--drop-shadow-style);
}

/* THE NEIGHBORHOOD */

.flex-neighbor {
  display: flex;
  column-gap: 1.25em;
  flex-direction: row wrap;
  padding: .25em;
}
.flex-3 {
  flex: 3 1;
}
.flex-2 {
  flex: 2 1;
}
.flex-neighbor a {
  text-decoration: none;
}
.flex-neighbor a:hover {
  text-decoration: underline;
}
.flex-2 a {
  font-family: var(--header);
  letter-spacing: var(--h1-letter-spacing);
}
@media screen and ( max-width: 768px ) { 
  .flex-neighbor { flex-direction: column; }
  .flex-3, .flex-2 { padding-bottom: .4em; }
   }

/* CLUBHOUSE */

.shelf {
  background-image: url(https://sweetfish.site/img/pixel/library/shelf.png);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background-position: 0em 2.5rem;
}
.flex-shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: .75rem;
  row-gap: 1.85rem;
}
.shelf img:hover {
  transform: scale(1.5);
  z-index: 50;
}

/* DETAILS AND SUMMARY */

details > summary {
    list-style-type: none;
    cursor: pointer;
}
details > summary::-webkit-details-marker {
    display: none;
}
details > summary::after {
    content: ' →';
}
details[open] > summary::after {
    content: ' ↓';
}

/* RESPONSIVE VIDEO EMBEDS */

figure.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
figure.video iframe, figure.video object, figure.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  visibility: hidden; /* so loading="lazy" should work? */
}
section:target iframe {
  visibility: visible;
}

/* EXTERNAL LINKS */

a[href*="//"]:after { 
  font-weight: 300;
  font-size: .85em;
  content: ""; /* top right arrow: ↗ */
  color: var(--text);
  opacity: .25;
}
a[href*="//"]:hover:after {
  color: var(--underline);
  opacity: 1;
}
nav a[href*="//"]:after { 
  content: "";
}
nav a[href*="//"]:hover:after {
  color: var(--underline);
  opacity: 1;
}
a[href$=".pdf"]:before { content: ""; }
a[href$=".mp3"]:before { content: ""; }
a[href$=".zip"]:before { content: ""; }
a[href$=".rar"]:before { content: ""; }
a[href$=".jpeg"]:before,
a[href$=".jpg"]:before,
a[href$=".gif"]:before,
a[href$=".png"]:before { content: ""; }

/* MISC */

img, svg, video, audio {
  display: block;
  max-width: 100%;
  height: auto;
}

/* MOBILE */

@media only screen and (max-width: 680px) {
  body { font-size: 16px; }
}
@media only screen and (max-width: 540px) {
  nav { width: 100%; }
}

/* GUESTBOOK */

.guestbook {
  height: 15em;
  width: 100%;
  margin-bottom: -.45em;
}
@media (prefers-color-scheme: dark) {
.guestbook {
  filter: grayscale(1) invert(1);
}
}

/* HEADER NAVIGATION */

header {
  display: flex;
  flex-wrap: wrap;
}
.header {
  width: 100%;
  z-index: 99;
  position: fixed;
  justify-content: space-between;
  padding: .25rem 1rem 0rem 1rem;
  background-color: var(--h1-bg);
  border-bottom: var(--border-style);
  font-family:  var(--header);
  font-size: .85rem;
  line-height: 1.8em;
  letter-spacing: var(--h1-letter-spacing);
}
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.header li a {
  display: block;
  padding: 0;
  text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover,
a.home:hover {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.header .home {
  display: block;
  flex-basis: 20%;
  font-size: 1em;
  max-width: 20%;
  padding: 0em;
  text-decoration: none;
}

/* HEADER HAMBURGER MENU */

.header ul li::marker {
  content: "";
}
.header .menu {
  clear: both;
  flex-basis: 100%;
  max-width: 100%;
  max-height: 0;
}
.header .menu-icon {
  cursor: pointer;
  display: flex;
  flex-basis: 39%;
  justify-content: flex-end;
  max-width: 39%;
  padding: 0;
  position: relative;
  user-select: none;
}
.header .menu-icon .navicon {
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
  color: var(--text);
}
.navicon:hover, .menu-icon:hover {
  color: var(--underline);
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  content: '🗀';
  font-family: 'unifont';
  font-size: 2rem;
  display: block;
  position: absolute;
  width: 100%;
  top: -.2rem;
  right: .18em;
}
.header .menu-btn {
  display: none;
  padding: 0;
}
.header .menu-btn:checked ~ .menu {
  max-height: 100%;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  content: '🗁';
  right: .12em;
}
.header label:before {content:"";}
.header label:after {content:"";}
.header .menu-btn:checked ~ ul {
  padding: 1em 0em;
}
header ul li ul {
  padding: .25em 1em 1em 1.5em !important;
  line-height: 1em;
}

/* HEADER DROPDOWN */

.header select {
  text-align: right;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0px solid;
  padding: .15em 0em .15em 0em;
  margin-left: 0em;
  margin-right: .5em;
  color: var(--link);
  background: var(--h1-bg);
  border: 0px solid var(--border);
  font-family: var(--header);
  letter-spacing: var(--h1-letter-spacing);
}
@media (min-width: 768px) {
.header {
    flex-wrap: inherit;
}
.header li:last-of-type {
  margin-bottom: -.25em;
}
.header li {
    float: left;
}
.header li a {
    padding: 0em .75em;
}
.header .menu {
    clear: none;
    flex-basis: inherit;
    max-height: none;
    max-width: inherit;
}
.header .menu-icon {
    display: none;
}
.header ul {
  padding-bottom: 0em;
}
header ul li:hover > ul,
header ul li:focus-within > ul,
header ul li ul:hover,
header ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block;
}
header ul li ul li {
  clear: both;
  width: 100%;
}
header li:hover,
header li:focus-within {
  cursor: pointer;
}
header li:focus-within a {
  outline: none;
}
header ul li ul {
  background: var(--h1-bg);
  border: var(--border-style);
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  margin-top: 0rem;
  margin-left: .7em !important;
  padding: .75em .15em 1em .15em !important;
  display: none;
  filter: var(--drop-shadow-style);
  line-height: 1.5em;
  height: auto;
}  
}
@media (max-width: 767px) {
.header {
    padding-bottom: .35em;
    font-size: 1em;
    position: absolute;
}
.header select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0px solid;
  margin-left: 0em;
  margin-right: 0em;
  color: var(--link);
  background: var(--h1-bg);
  border: 0px solid var(--border);
  font-family: var(--header), sans-serif;
  letter-spacing: var(--h1-letter-spacing);
  font-weight: var(--h1-weight);
  width: 100%;
  font-size: 1em;
  text-align: left;
}
}