:root {
  --black: hsl(216, 77%, 17%);
  --darktone: hsl(219, 77%, 22%);
  --lowlight: hsl(219, 92%, 41%);
  --basecolor: hsl(219, 55%, 25%);
  --midlight: hsl(219, 35%, 42%);
  --highlight: hsl(220, 31%, 65%);
  --bright: hsl(220, 9%, 93%);
  --primary-margin: min(5px,1%);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  padding: min(1%,5px);
  margin: var(--primary-margin);
  background: linear-gradient(to right, var(--bright) 30%, var(--black));
  background-clip: text;
  color: transparent;
  font-family: 'Times New Roman', Times, serif;
  text-shadow: var(--bright) 0px 0px 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  width: min(85%,500px);
  font-weight: bolder;
}

p {
  margin: var(--primary-margin);
  width: 65%;
}

body {
  padding-top: min(50px,10%);
  background: linear-gradient(to bottom, var(--highlight), var(--black));
  background-attachment: fixed;
}

footer {
  font-size: smaller;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.project {
  height: auto; 
  display: flow-root; 
  border-style: double none double none;
  border-color:white;
}

.blog {
  height: auto; 
  border-style: double none double none;
  border-color:white;
}

.blogtitle {
  display: inline; 
  padding-top: 0px;
}

ul.sitebar {
  list-style-type: none;
  margin-left: var(--primary-margin);
  padding: 0;
  overflow-x: hidden;
  background-color:var(--bright);
  background-clip: text;
  color: transparent;
  position: fixed;
  top: 0;
  width: 100%;
  height: fit-content;
}

ul.sitebar li {
  float: left;
}

ul.sitebar li a {
  display: block;
  color: var(--bright);
  
  text-align: center;
  padding: 14px 9px;
  font-size: 200%;
  text-decoration: none;
}

ul.sitebar li a:hover {
  color:var(--black);
  text-shadow: var(--black) 0px 0px 4px;
}

#fade-me-in.htmx-added {
  opacity: 0;
}
#fade-me-in {
  opacity: 1;
  transition: opacity 1s ease-out;
}