body{
  font-size: 18px;
  font-family: ui-rounded,'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  font-weight: 900;
  font-weight: normal;
  height: 100%;
}

h1 {
  font-size: 2em;
  padding: 1em;
}

.menu {
  mix-blend-mode: difference;
}

/*.menu li {
  display: inline-block;
  padding: 0.7em;
  font-size: 1.2em;
}*/

 /* The side navigation menu */
.sidebar {
  margin: 0;
  padding: 0.5em;
  width: 200px;
/*  background-color: #f1f1f1;*/
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
/*  padding: 16px;*/
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 200px;
/*  padding: 1px 16px;*/
  height: 1000px;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
    float: left;
    margin: 0.2em;
  }
  div.content {margin-left: 0;}
  .hide {
    display: none;
  }
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
    margin: none;
  }
} 

ul {
  list-style-type: none;
  margin: 0;
  position: fixed;
  right: 1em;
  padding: 2em;
  z-index: 100;
}

ol {
  list-style-type: none;
}

#cv {
    /* Prevent vertical gaps */
  line-height: 1;
  -webkit-column-count: 3;
  -webkit-column-gap:   2em;
  -moz-column-count:    3;
  -moz-column-gap:      2em;
  column-count:         3;
  column-gap:           2em;  
  padding-top: 4em; 
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 2em;
  position: relative !important;
  z-index: 100;
}

#cv_list {
  position: relative !important;
  list-style-type: "\2726";
  padding-top: 0.2em;
  padding-left: 1em;
  padding-right: 0.1em;
}

#cv_list li {
  padding-top: 0.2em;
  padding-left: 0.3em;
}

a:link {
  background: rgb(175,84,237);
  background: linear-gradient(270deg, rgba(175,84,237,1) 0%, rgba(64,168,235,1) 56%, rgba(21,210,219,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  padding: 0.1em;
}

a:visited {
  background: rgb(175,84,237);
  background: linear-gradient(270deg, rgba(175,84,237,1) 0%, rgba(64,168,235,1) 56%, rgba(21,210,219,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

a:hover {
/*  padding: 0em !important;
  margin: 0.1em;*/
  background: linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  -webkit-text-fill-color: white;
  text-fill-color: white;
  overflow: hidden;
}

a.active {
  text-decoration: underline 0.05em wavy rgb(175,84,237);
}

::-webkit-scrollbar {
  width: 40px;
} 

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(147,70,252,1) 0%, rgba(103,121,217,1) 15%, rgba(35,158,125,1) 38%, rgba(208,168,45,1) 64%, rgba(233,159,14,1) 81%, rgba(252,70,107,1) 100%);
  border-radius: 20px;
} 

.sticky_1 {
  position: fixed;
  z-index: 100;
  mix-blend-mode: difference;
}

.sticky {
  position: fixed;
  top: -0.5em;
  z-index: 100;
}

.links {
  color: ghostwhite;
  position: absolute;
  line-height: 1.2;
  width: 500px;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.links h2 {
  font-size: 1.2em;
  margin-bottom: -0.4em;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  background: black; 
  border-radius: 50%; 
  width: 500px; 
  height: 500px; 
  padding: 4em;
}

#photos {
  /* Prevent vertical gaps */
  line-height: 5;
  position: relative;
  -webkit-column-count: 3;
  -webkit-column-gap:   2em;
  -moz-column-count:    3;
  -moz-column-gap:      2em;
  column-count:         3;
  column-gap:           2em;  
  padding: 2em;
}

#photos_few {
  /* Prevent vertical gaps */
  line-height: 5;
  position: relative;
  -webkit-column-count: 2;
  -webkit-column-gap:   2em;
  -moz-column-count:    2;
  -moz-column-gap:      2em;
  column-count:         2;
  column-gap:           2em;  
  margin: 2em;
}

#webgarden {
  /* Prevent vertical gaps */
  line-height: 5;
  position: relative;
  -webkit-column-width: 250px;
  -webkit-column-gap:   2em;
  -moz-column-width:    250px;
  -moz-column-gap:      2em;
  column-width:         250px;
  column-gap:           2em;  
  padding: 2em;
}

#spring {
  /* Prevent vertical gaps */
  line-height: 5;
  position: relative;
  -webkit-column-width: 360px;
  -webkit-column-gap:   2em;
  -moz-column-width:    360px;
  -moz-column-gap:      2em;
  column-width:         360px;
  column-gap:           2em;  
  padding: 2em;
}

#spring img {
  max-width:  100%;
}

#webgarden p {
  line-height: 1 !important;
  margin-top: -1em;

}
#description {
  padding-left: 2em; 
  padding-right: 2em;
  padding-top: 5em;
}

#text {
  line-height: 1; 
  position: relative;
  padding-top: 4em;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 2em;
  max-width: 100%;
}

#text img {
  width:  100%;
  max-width: 800px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

#photos_few img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

section div {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

@media (max-width: 1500px) {
  #cv {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}

@media (max-width: 800px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
  #photos_few {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
  #cv {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
  #description_l { 
    padding-right: 1em;
    margin-top: 0.6em;
    margin-right: 1em;
    margin-left: 0.5em;
  }
}

/*Spring 83 poem 9*/

.bckg9 { 
  --background: #ff2975;
  --text: ghostwhite;
  --shadow: white; 
  width:  100%;
  aspect-ratio: 7.5/10;
  background: var(--background); 
  color: var(--text); 
  font-family: 'Arial Rounded MT Bold', Arial Black, sans-serif; 
  font-size: 1.2rem; 
  line-height: 1.7; 
  border-radius: 60% 40% 60% 40% / 50% 70% 60% 60%; 
  text-shadow: 0px 0px 20px var(--shadow), 0px 0px 8px pink, 0px 0px 4px var(--text); 
  animation: morph 10s linear infinite alternate;
  overflow: hidden;
}

@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  }
  100% {
    border-radius: 40% 60%;
  }
}

.haiku9 {
  position: relative;
  left: 15px;
  top: 25%;
  padding-inline: 2rem;
}

.links9 a {
  all: unset;
}

.links9 {
  position: relative;
  left: 8px;
  top: 45%; 
  padding-inline: 2rem;
}


.links9 a:link { 
  text-decoration: none; 
  color: var(--text);
}

.links9 a:visited {
  color: var(--text);
}

.links9 a:hover {
  text-shadow: none;
}