/* These are required to allow Gradient animation in Chrome */
@property --button-bg1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(0.00, 57.2%, 40.41%);
}
@property --button-bg2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(5.10, 73.6%, 30.69%);
}
@property --button-bg3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(6.80, 75.0%, 26.82%);
}
@property --button-bg4 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(7.20, 75.9%, 24.84%);
}
@property --button-bg5 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(8.60, 73.3%, 23.85%);
}
@property --button-bg6 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(8.50, 71.9%, 22.59%);
}
@property --button-bg7 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(9.90, 70.2%, 21.33%);
}
@property --button-bg8 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(10.9, 70.2%, 20.16%);
}
@property --button-bg9 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(12.3, 69.1%, 19.44%);
}
@property --button-bg10 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(12.7, 63.6%, 21.33%);
}
@property --button-bg11 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(15.2, 61.4%, 24.75%);
}

:root {
  --bg: hsl(0, 23%, 10%);
  --text: hsl(3, 70%, 75%);
  --text-bright: hsl(3, 70%, 85%);
  --side: hsl(352, 48%, 26%);
  --link: hsl(0, 62%, 46%);
  --visited: hsl(350, 62%, 46%);
  --button-text: hsl(22, 33%, 64%);
  --hljs-attribute: var(--button-text);
  --hljs-bg: hsl(0, 5%, 13.3%);
  --hljs-comment: hsl(0, 60.6%, 63.1%);
  --hljs-string: hsl(332.1, 89.6%, 51%);
  --hljs-text: hsl(324, 70%, 76%);
  --hljs-variable: hsl(270, 71.6%, 65.5%);
  --sans-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'PT Sans', 'Open Sans', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --serif: 'Droid Serif', 'Bodoni MT', 'Baskerville Old Face', 'Book Antiqua', serif;
  --source-sans-pro: 'Source Sans Pro', var(--sans-serif);
  --great-vibes: 'Great Vibes', 'Brush Script MT', var(--source-sans-pro);
}

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

/* Tags */
html {
  font-family: var(--source-sans-pro);
}
body {
  background: var(--bg);
  margin: 0px 0px 0px 310px;
  color: var(--text);
}
h1,
h2,
h3 {
  font-family: var(--serif);
}
h1 {
  font-size: 42px;
}
aside {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 300px;
  max-width: unset;
  height: 100vh;
  overflow: auto;
  background: var(--side) url('/imgs/glass.png');
  background-attachment: local;
  font-family: var(--source-sans-pro);
}
a {
  color: var(--link);
}
a:visited {
  color: var(--visited);
}
main {
  padding: 20px 40px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0px auto;
  border-radius: 6px;
}
video {
  width: 100%;
  max-height: 600px;
}
code {
  background: var(--hljs-attribute);
  border-radius: 50px;
  padding: 0px 6px 1px;
  color: var(--bg);
  font-size: 13.2px;
  line-height: 1.32;
}
hr {
  width: 91%;
  border: none;
  border-top: 1px solid var(--text);
  padding: 0px;
  margin: 37px auto;
  color: var(--text);
  text-align: center;
}
hr:before {
  content: '';
  position: relative;
  top: 1px;
  left: -6px;
  display: block;
  border-bottom: 1px solid var(--text);
}
hr:after {
  content: 'R P';
  position: relative;
  top: -10px;
  display: inline-block;
  padding: 0;
  font-family: var(--great-vibes);
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 0px 0px var(--bg),
               2px 0px 0px var(--bg),
               3px 0px 0px var(--bg),
               4px 0px 0px var(--bg),
              -1px 0px 0px var(--bg),
              -2px 0px 0px var(--bg),
              -3px 0px 0px var(--bg),
              -4px 0px 0px var(--bg);
}
footer {
  font-size: 13px;
  font-variant: oldstyle-nums;
  line-height: 1.35;
  text-align: center;
}

/* Nested tags */
aside a {
  color: var(--text);
  text-decoration: none;
}
aside a:visited {
  color: var(--text);
}
aside a:hover {
  text-decoration: underline;
}
aside code {
  font-size: 14px;
}
aside hr:after {
  text-shadow: 1px 0px 0px var(--hljs-bg),
               2px 0px 0px var(--hljs-bg),
               3px 0px 0px var(--hljs-bg),
               4px 0px 0px var(--hljs-bg),
              -1px 0px 0px var(--hljs-bg),
              -2px 0px 0px var(--hljs-bg),
              -3px 0px 0px var(--hljs-bg),
              -4px 0px 0px var(--hljs-bg);
}
aside ul {
  padding-left: 21px;
}
aside > ul > li {
  list-style: none;
  margin-top: 16px;
}
aside > ul > li > ul {
  margin-top: 7px;
  padding-left: 27px;
}
aside > ul > li > ul > li > ul {
  margin: 6px 0px;
  padding-left: 20px;
}
h2 code {
  font-size: 18px;
}
pre code {
  background: unset;
  border-radius: 0px;
  padding: 0px;
  color: var(--text);
}


/* Tables */
table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}
th {
  padding: 8px;
  background: rgba(255, 0, 50, 0.4);
  border-bottom: 3px solid #000;
}
td {
  background: rgba(255, 0, 50, 0.1);
  padding: 8px;
}
th:nth-of-type(odd) {
  background: rgba(255, 0, 50, 0.45);
}
tr:nth-of-type(even) td:nth-of-type(odd) {
  background: rgba(255, 0, 50, 0.25);
}
tr:nth-of-type(even) td {
  background: rgba(255, 0, 50, 0.2);
}
td:nth-of-type(odd) {
  background: rgba(255, 0, 50, 0.15);
}

/* Utility classes */
.hidden {
  display: none;
}
.opacity-0 {
  opacity: 0.0;
  transition: 500ms ease opacity;
}
.button-group-container {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.button,
.button:visited {
  --button-padding: 48px;
  --button-satin: calc(var(--button-padding) - 12px);
  --button-bg1: hsl(344.8, 57.2%, 40.41%);
  --button-bg2: hsl(349.9, 73.6%, 30.69%);
  --button-bg3: hsl(351.6, 75.0%, 26.82%);
  --button-bg4: hsl(352.0, 75.9%, 24.84%);
  --button-bg5: hsl(353.4, 73.3%, 23.85%);
  --button-bg6: hsl(353.3, 71.9%, 22.59%);
  --button-bg7: hsl(354.7, 70.2%, 21.33%);
  --button-bg8: hsl(355.7, 70.2%, 20.16%);
  --button-bg9: hsl(357.1, 69.1%, 19.44%);
  --button-bg10: hsl(357.5, 63.6%, 21.33%);
  --button-bg11: hsl(360.0, 61.4%, 24.75%);
  --button-transition: 0.5s;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
  height: 92px;
  background: url('/imgs/noise.png'), linear-gradient(
    var(--button-bg1),
    var(--button-bg2),
    var(--button-bg3),
    var(--button-bg4),
    var(--button-bg5),
    var(--button-bg6),
    var(--button-bg7),
    var(--button-bg8),
    var(--button-bg9),
    var(--button-bg10),
    var(--button-bg11)
  );
  border: 0px solid #FFFFFF3B;
  border-radius: 19px;
  margin: 9px 20px 9px 0px;
  padding: 0px var(--button-padding);
  color: var(--hljs-attribute);
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  transition:
    --button-bg1 var(--button-transition) linear,
    --button-bg2 var(--button-transition) linear,
    --button-bg3 var(--button-transition) linear,
    --button-bg4 var(--button-transition) linear,
    --button-bg5 var(--button-transition) linear,
    --button-bg6 var(--button-transition) linear,
    --button-bg7 var(--button-transition) linear,
    --button-bg8 var(--button-transition) linear,
    --button-bg9 var(--button-transition) linear,
    --button-bg10 var(--button-transition) linear,
    --button-bg11 var(--button-transition) linear;
}
.button:hover {
  --button-bg1: hsl(344.8, 57.2%, calc(40.41% * 1.4));
  --button-bg2: hsl(349.9, 73.6%, calc(30.69% * 1.4));
  --button-bg3: hsl(351.6, 75.0%, calc(26.82% * 1.4));
  --button-bg4: hsl(352.0, 75.9%, calc(24.84% * 1.4));
  --button-bg5: hsl(353.4, 73.3%, calc(23.85% * 1.4));
  --button-bg6: hsl(353.3, 71.9%, calc(22.59% * 1.4));
  --button-bg7: hsl(354.7, 70.2%, calc(21.33% * 1.4));
  --button-bg8: hsl(355.7, 70.2%, calc(20.16% * 1.4));
  --button-bg9: hsl(357.1, 69.1%, calc(19.44% * 1.4));
  --button-bg10: hsl(357.5, 63.6%, calc(21.33% * 1.4));
  --button-bg11: hsl(360.0, 61.4%, calc(24.75% * 1.4));
}
.button:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  height: 100%;
  width: var(--button-padding);
  background: radial-gradient(circle var(--button-satin) at 0% 50%, #2e0000de, transparent);
}
.button:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  height: 100%;
  width: var(--button-padding);
  background: radial-gradient(circle var(--button-satin) at 100% 50%, #2e0000de, transparent);
}
.button:last-of-type {
  margin-right: 0px;
}
.has-id {
  position: relative;
}
.has-id:hover:before {
  content: '#';
  position: absolute;
  left: -0.8em;
  color: var(--link);
}
.table-container {
  max-width: 100%;
  overflow: auto;
}

/* Specific classes */
.logo {
  max-height: 267px;
  margin: 0px 33px 0px 0px;
  float: left;
}
.side-title .logo {
  display: inline-block;
  max-height: 41px;
  margin: 0px 8px 0px 0px;
  float: unset;
  vertical-align: -9px;
}
.main-title,
.side-title {
  font-family: var(--great-vibes);
  font-weight: normal;
}
.main-title {
  margin-bottom: 24px;
  font-size: 52px;
  letter-spacing: -0.45px;
}
.side-title {
  margin: 25px auto 23px auto;
  padding: 0px;
  font-size: 35px;
  text-align: center;
}
.github-logo {
  width: 24px;
}
.github-logo path {
  fill: var(--text);
}
.github-logo:hover path {
  fill: var(--text-bright);
}
.bottom-spacer {
  display: block;
  height: 400px;
}

/* Mobile */
.hamburger-menu {
  position: fixed;
  top: 10px;
  right: 10px;
  display: none;
  width: 34px;
  cursor: pointer;
  stroke: var(--text-bright);
  z-index: 9;
}
.hamburger-menu:hover {
  stroke: var(--visited);
}
#mobile-nav {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100vh;
  background: var(--side) url('/imgs/glass.png');
  overflow: auto;
  transition: 500ms ease opacity;
  z-index: 8;
}
#mobile-nav li {
  width: 100%;
}

@media screen and (max-width: 907px) {
  body {
    margin: 0px;
  }
  aside {
    display: none !important;
  }
  .hamburger-menu {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .logo {
    max-height: 120px;
    margin: 0px auto 15px auto;
    float: unset;
  }
  #top {
    text-align: center;
  }
  .button,
  .button:last-of-type {
    display: flex;
    justify-content: center;
    margin: 9px;
  }
}