:root {
  --padding: 1em;
  --text-color: #4a4a4a;
  --bg-color: #f9f9f9;
  --bg-dark-color: #f1f1f1;
  --highlight-color: #1d7484;
  --highlight-secondary-color: #982c61;
  --highlight-dark-color: #144f5a;
}

html {}

body {
  max-width: 95%;
}

article a[href^="http://"]:not([href*="negatethis.com"]),
article a[href^="https://"]:not([href*="negatethis.com"]), 
article a[href^="//"]:not([href*="negatethis.com"]) {
  background: url(/assets/ext.svg) no-repeat;
  background-origin: padding-box;
  padding-right: 1.3em;
  background-size: 0.7em;
  background-position-y: center;
  background-position-x: calc(100% - 0.3em);
}

main {
  display: flex;
  flex-direction: row;
}

#banner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  width: 100vw;
  text-align: center;

  background-color: beige;
}

.main-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1em;
}

.u-photo {
  max-width: 15%;
  max-height: 15%;
  margin: 0;
  object-fit: contain;
  border: 4px solid var(--highlight-color);
}

#tree {
  display: block;

  max-width: 40%;
  max-height: 40%;

  margin: 0 auto;
}

.no-bullets {
  list-style-type: none;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding: var(--padding);
}

.sidebar ul {
  padding: 0;
}

.sidebar li {
  padding: 4px;
}

.sidebar li:hover {
  background-color: var(--bg-dark-color);
}

footer>.sidebar li {
  box-sizing: border-box;
  border: 1px solid var(--highlight-color);
  text-align: center;
}

.sidebar a {
  display: inline-block;
  width: 100%;
}

.sidebar a:hover {
  cursor: pointer;
  border-bottom: 0;
}

#indie-webring {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#indie-webring>a {
  width: fit-content;
}

#envs-webring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#envs-controls {
  display: flex;
  gap: 1em;
}

article {
  flex: 3 1 0;
  max-width: 60%;
  padding: var(--padding);
}

footer {
  flex: 1 1 0;
}

.blogroll {
  list-style-type: none;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

.blogroll a {
  text-decoration: underline;
}

.now-playing-container {
  border: 4px solid var(--highlight-dark-color);
  padding: 0 1em;
}

@media screen and (max-width: 850px) {
  main {
    flex-flow: column wrap;
  }

  article {
    order: 1;
    max-width: 95%;
  }

  #left-sidebar {
    order: 2;
  }

  footer {
    order: 3;
  }
}