:root {
  --font-size-body: 16px;
  --font-size-mono: 14px;
  --color-background: #fff;
  --color-offset: #eee;
  --color-faded: #ccc;
  --color-gray: #767676;
  --color-text: #3d3d3d;
  --color-text-extreme: #000;
  --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #000000;
    --color-offset: #2a2a2a;
    --color-faded: #555;
    --color-gray: #767676;
    --color-text: #e5e5e5;
    --color-text-extreme: #fff
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility
}

* {
  margin: 0;
  padding: 0
}

html,
body {
  height: 100%
}

html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  background: var(--color-background);
  color: var(--color-text)
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased
}

p,
h1,
h2 {
  overflow-wrap: break-word
}

h2 {
  font-size: 1rem;
  color: var(--color-text-extreme);
  font-weight: 500
}

h1 {
  font-size: 2rem
}

h2 {
  margin: 3rem 0 1rem
}

p,
ol,
ul {
  margin: 1rem 0
}

a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-faded);
  text-underline-offset: 1px;
  color: inherit;
  transition: 100ms text-decoration-color ease-in-out
}

a:hover {
  text-decoration-color: var(--color-gray)
}

ul {
  list-style-type: none;
  margin-left: 2rem
}

ul li:before {
  position: absolute;
  margin-left: -2rem;
  content: "—";
  color: var(--color-faded);
  font-weight: 500;
  margin-right: 0.5rem
}

ol {
  list-style-type: none;
  margin-left: 2rem;
  counter-reset: list
}

ol li:before {
  position: absolute;
  margin-left: -2rem;
  color: var(--color-faded);
  font-weight: 500;
  margin-right: 0.5rem;
  content: counter(list) ".";
  counter-increment: list
}

b,
strong {
  font-weight: 500
}

time {
  color: var(--color-gray)
}

.content {
  width: 100%;
  max-width: 650px;
  margin: auto;
  padding: 12rem 1rem
}

.space {
  height: 2rem
}

.posts {
  margin-left: -0.5rem;
  margin-right: -0.5rem
}

.posts li:before {
  content: ""
}

.posts a {
  display: flex;
  text-decoration: none;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;

  transition: background 200ms ease-in-out
}

.posts a:hover {
  background: var(--color-offset);
  transition: none
}

.rating-stars {
  text-align: right
}

.non-decoration {
  text-decoration: none
}

.block {
  display: block
}

.flex {
  display: flex
}

.items-center {
  align-items: center
}

.space-between {
  justify-content: space-between
}

.font-medium {
  font-weight: 500
}

.title {
  margin-bottom: 0.5rem
}

.font-0 {
  margin-top: 0
}

.font-1 {
  margin-left: 0.25rem
}

.font-3 {
  margin-bottom: 0.75rem
}

.font-4 {
  margin-bottom: 2rem
}

.font-7 {
  margin-top: 4rem
}



.text-gray {
  color: var(--color-gray)
}

.text-extreme {
  color: var(--color-text-extreme)
}



::-moz-selection {
  color: var(--color-background);
  background: var(--color-text-extreme)
}

::selection {
  color: var(--color-background);
  background: var(--color-text-extreme)
}



input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.row {
  display: flex;
}

.row .col {
  flex: 1;
}

.row .col:last-child {
  margin-left: 1em;
}

.tabs {
  overflow: hidden;
}

.tab {
  width: 100%;
  overflow: hidden;
  display: grid;
  padding-top: .5em;
  padding-bottom: .5em
}

.tab-label {
  display: flex;
  justify-content: space-between;
  padding-top: .5em;
  padding-bottom: .5em;
  font-weight: bold;
  cursor: pointer;
  /* margin-bottom: 0.75rem; */
}

.tab-label:hover {
  /* background: var(--color-offset); */
  transition: none
}

.tab-label::after {
  content: "❯";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.35s;
}

.tab-content {
  max-height: 0;
  padding: 0 .5em;
  transition: all 0.35s;
}

input:checked+.tab-label {}

input:checked+.tab-label::after {
  transform: rotate(90deg);
}

input:checked~.tab-content {
  max-height: 100vh;
  /* padding: .5em; */
}


@media (max-width: 1200px) {
  .content {
    padding: 3rem 1rem
  }
}

.side {
  width: 275px;
  margin-left: -275px;
  padding-right: 4rem;
  float: left;
  display: flex
}

@media (max-width: 1200px) {
  .side {
    width: 100%;
    float: none;
    padding: 0;
    margin: 0 0 3rem
  }
}

.phone {
  display: none
}

@media (max-width: 1200px) {
  .phone {
    display: block
  }
}

.desktop {
  display: block
}

@media (max-width: 1200px) {
  .desktop {
    display: none
  }
}