* {
  box-sizing: border-box;
}

:root {
  --bg: #253031;
  --fg-triplet: 252, 247, 255;
  --fg: rgb(var(--fg-triplet));
  --vib-trip: 7, 190, 184;
  --vibrant: rgb(var(--vib-trip));
  --donate-button-height: 37.5px;
  --complement-blue: rgba(var(--vib-trip), 0.9);

  --font-title: 'Source Serif Pro', serif;
  --font-main: 'Hind Madurai', sans-serif;
  --font-subtitle: 'Prociono', serif;

  --padding: 2.5rem;
}

::selection {
  background: rgba(var(--vib-trip), 0.5);
}

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(30em, 100vw - 2 * var(--padding)), 1fr));
  grid-column-gap: 2em;
  max-width: 80em;
  margin-bottom: 4rem;
}

body {
  margin: 0;
  padding: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background-color: var(--bg);
}

p, li {
  max-width: 38em;
  line-height: 1.4;
}

li {
  max-width: 36em;
}

h1 {
  margin-bottom: 0;
}

.timeline h1 {
  margin-bottom: 0;
}
.timeline h2:not(:first-child) {
  margin-top: 2rem;
}
.timeline h2 {
  margin-bottom: 0;
}
.timeline h3, .timeline h4 {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.timeline p {
  margin-top: 0.38rem;
  margin-bottom: 1rem;
}
.timeline p, .timeline h3, .timeline h4 {
  margin-left: 1.5rem;
}
.timeline h3 code {
  font-weight: 500;
  margin-right: 0.45rem;
}
.timeline code {
  font-size: 1.25em;
}

.mt {
  margin: 3rem 0 0 0;
}
.m0 {
  margin: 0;
}

a, a:visited {
  color: var(--vibrant);
  text-decoration: none;
}
a:hover, a:visited:hover {
  color: #F7567C;
  /* background-image: -webkit-linear-gradient(left, var(--vibrant-blue) 0%, var(--yellow) 100%); */
  /* color: transparent; */
  /* -webkit-background-clip: text; */
}

h1:not(:first-of-type) {
  margin-top: 4rem;
}

li {
  margin-bottom: 0.3rem;
}

h1#donate::before, h1#consultancy::before, h1#career::before, h1#presence::before, h1#timeline::before {
  display: block;
  content: " ";
  margin-top: -4rem;
  height: 4rem;
  visibility: hidden;
  pointer-events: none;
}

h1:target {
  text-shadow: 0 3px var(--dark-blue);
  font-family: 'MetropolisRegular', sans-serif;
}

#donate-tray {
  display: flex;
  flex-wrap: wrap;
}

#donate-tray, .label, .flair {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -o-user-select: none;
  -moz-user-select: none;
}

#donate-tray a img, #bitcoin, #eth {
  border-radius: 0.15rem;
}
#donate-tray > *:not(:last-child) {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
#donate-tray img {
  width: 160px;
  height: var(--donate-button-height);
}
#paypal {
  position: relative;
}
#tip-footnote {
  text-align: center;
  font-size: 0.7em;
  color: rgba(255,255,255,0.70);
  position: absolute;
  bottom: -1.35em;
  left: 0;
  right: 0;
}

#bitcoin, #eth {
  background-color: var(--complement-blue);
  height: var(--donate-button-height);
  font-size: 1.1rem;
  padding: 0 1rem;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center
}
#bitcoin img, #eth img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

#eth img {
  transform: scale(1.25);
}

#bitcoin code, #eth code {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  -webkit-touch-callout: text;
  -o-user-select: text;
  -moz-user-select: text;
}

#bitcoin code::selection, #eth code::selection {
  background-color: #FC6471;
}

.shadowed {
  box-shadow: 0 2px 5px rgba(0,131,176,0.2)
}

img.flair {
  border: white 3px solid;
  width: 300px;
  margin-right: 0.5rem;
  margin-top: 1rem;
}

/* the 4px is a fudge */
@media all and (max-width: calc(600px + 1rem + 5rem + 4px)) {
  img.flair {
    width: calc(50% - 1rem);
    margin-right: 0;
  }
}

@media all and (max-width: 500px) {
  img.flair {
    width: 100%;
    margin-right: 0;
  }
}

@media all and (max-width: 414px) {
  #bitcoin {
    font-size: 1.1rem;
  }
  html {
    padding: 1.5rem 2rem;
  }
}

@media all and (max-width: 375px) {
  #bitcoin {
    font-size: 0.95rem;
  }
}

@media all and (max-width: 320px) {
  html {
    font-size: 10pt;
    padding: 1rem 1.5rem;
  }
  #bitcoin {
    font-size: 0.8rem;
  }
}

.label {
  font-size: 7px;
  letter-spacing: 1px;
  color: white;
  background-color: rgba(55, 222, 255, 0.4);
  border-radius: 0.2rem;
  text-transform: uppercase;
  font-family: 'MetropolisThin', sans-serif;
  padding: 0.2rem;
  padding-bottom: 0.16rem;
  padding-left: 0.25rem;
  mix-blend-mode: overlay;
  vertical-align: middle;
}

.frame {
  position: relative;
}
.frame .caption {
  position: absolute;
  bottom: -1rem;
  left: 0;
  right: 0;
  font-size: 70%;
  text-align: center;
  font-family: "MetropolisLight", sans-serif;
  opacity: 0.7;
}

#past-work {
  margin-top: 0.5rem;
}
#past-work img {
  border-radius: 17%;
  margin: 0.3rem;
  box-shadow: 0 2px 5px rgba(0,131,176,0.4)
}

h1 {
  font-family: var(--font-title);
}

h2, h3, h4 {
  font-family: var(--font-subtitle)
}

b {
  /* color: #A8E7E0; */
  /* text-shadow: 0.5px 1px 1px var(--cream); */
  /* font-weight: normal; */
  color: white;
  /* text-shadow: 0px 1px 1px rgba(247, 85, 144, 0.5); */
}

pre {
  background-color: rgba(var(--fg-triplet), 0.1);
  padding: 1rem;
  border-radius: 0.3em;
  border: 1px solid rgba(var(--fg-triplet), 0.05);
  max-width: fit-content;
}

p {
  line-height: 1.6;
}

a.button {
  background-color: rgba(var(--vib-trip), 0.9);
  padding: 0.5rem 1rem;
  border-radius: 0.3em;
  display: inline-block;
  color: white;
}
a.button:hover {
  color: white;
  background-color: rgba(var(--vib-trip), 0.75);
}
a.button:active {
  background-color: #FC6471;
}


/* LOGO */
.main-logo {
  width:100px;
  height:100px;
  position: fixed;
  top: 0;
  right: 0;
}

.block { width:50%; height:50%; float:left; overflow:hidden; }

/* ============= PSEUDO SHAPES */
.pCircle:after { content:''; display:block; width: calc(100% + 10px); height:calc(100% + 10px); border-radius:50%; border-width: 20px; border-style: solid; }

.small-border .pCircle:after {
  --w: 4px;
  border-width: var(--w); width: calc(100% + var(--w)); height:calc(100% + var(--w))
}
.small-border { transform: translateY(6px) }

.pTopRight:after { margin-left:-100%; }
.pBottomRight:after { margin-left:-100%; margin-top:-100%; }
.pBottomLeft:after { margin-top:-100%; }

.q1:after { background-color:var(--bg); }
.main-logo .q2 { background-color: var(--fg) }
.q2:after { background-color: #73BA9B; }
.q3:after { background-color:#FC6471;  }
.q4:after { background-color:#F6AE2D; }



/* back to the normal stuff */

video {
  width: 100%;
  aspect-ratio: 1920/1080;
  object-fit: cover;
  border: 5px solid black;
  border-radius: 3px
}

@media (max-width: 574.98px) {
  .main-logo {
    visibility: hidden;
  }
  :root {
    --padding: 1.5rem;
  }
  html {
    padding-top: 0;
  }
  video {
    margin: 1em calc(var(--padding) * -1);
    width: 100vw;
  }
  a.button {
    display: block;
    text-align: center;
    margin-left: 1em;
    margin-right: 1em;
  }
}

@media (max-width: 320.02px) {
  :root {
    --padding: 1rem;
  }
  .twitter-tweet {
    margin: 0 0 0 calc(var(--padding) * -0.15);
  }
}

html {
  font-family: var(--font-main);
  font-weight: 100;
  font-style: normal;
  padding: var(--padding);
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  scroll-behavior: smooth;
}

.shadowed code a {
  color: white;
}