/* Variables */
:root {
  --bg-color: antiquewhite;
  --border-color: rgba(0, 0, 0, 0.25);
  --b-col-back-light: rgba(255, 255, 255, 0.384);
  --b-col-primary:grey;
  --b-col-back-semi-light: transparent;
}

/*———————————————————————————————————————————————————————————————*/
/* Global */

* {
  font-family: "Liberation Serif", serif, Georgia, "Times New Roman", Times;
}

h1 {
  font-size: xx-large;
  text-align: center;
}

h2 {
  font-size: x-large;
}

h3 {
  font-size: larger;
}

hr {
  border: 0;
  border-bottom: 0.06rem solid grey;
}

p, ol, ul, nav, blockquote, details, code, #author {
  font-size: large;
}

abbr a { /* double decorations look ugly */
  text-decoration: none;
}

pre { /* Source: https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

figcaption, .audio-caption {
  font-size: small;
  margin-top: 0.313rem;
}

::selection {
  color: black;
  background-color: lightgreen;
}

body {
  background-color: var(--bg-color);
  padding-bottom: 1rem; /* Ensures the bottom nav doesn't display over content. */
}

code, code pre {
  font-family: monospace;
  font-size: medium;
  margin: 0.5rem 0 0.5rem 0;
  background-color: cornsilk;
  word-break: break-all;
}

code:hover {
  user-select: all;
}

summary {
  cursor: pointer;
}

blockquote {
  text-align: left;
  border-left: 0.125rem dotted grey;
  margin-left: 1.5rem;
  margin-right: 0;
  padding-left: 1rem;
  border-radius: .5rem;
}

figure {
  margin-left: 0;
  margin-right: 0;
}

.important {
  color: tomato;
}

.ascii {
  font-family: monospace;
}

/*———————————————————————————————————————————————————————————————*/
/* Index */

#cr-sub-title, nav {
  text-align: center;
}

#index-together, #index-invites {
  text-align: center;
}

#for-linux {
  text-align: center;
}

#for-linux a {
  font-size: normal;
  color: papayawhip;
  background-color: rgba(0, 0, 0, 0.042);
  padding: 0rem 0.188rem 0rem 0.188rem;
  text-decoration: none;
}

#for-linux a:hover {
  color: black;
}

/* Removed vertical middle align because it reduces flow when navigating to other pages. */
/* #index-page {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-right: .5rem;
}

@media (min-width: 39rem) {
  #index-page {
    position: absolute;
    width: 39rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
} */

/*———————————————————————————————————————————————————————————————*/
/* beggar */

/*———————————————————————————————————————————————————————————————*/
/* bio */

#bio-pic-container {
  float: left;
  text-align: center;
  margin-top: 0.875rem;
  margin-right: 0.5rem;
}

#bio-pic {
  width: 7.25rem;
  height: 7.25rem;
  background: url("../img/thrasher.jpg");
  background-size: 7.25rem 7.25rem;
  border-radius: 0.375rem;
}

#bio-pic:hover {
  transform: scale(1.85);
  transition: .25s;
  background: url("../img/thrasher-fbi.jpg");
  background-size: 7.25rem 7.25rem;
}

#bio-pic-text {
  font-size: xx-small;
  font-style: italic;
  font-family: monospace;
  text-decoration: none;
  color: black;
}

#bio-intro {
  display: block;
}

#bio-page #sources li {
  margin-left: -1.5rem;
}

#bio-page h2 {
  border-bottom: 0.06rem solid grey;
}

#bio-page .sub-title {
  text-align: center;
}

#exp-container, #edu-container {
  display: inline-block;
  max-width: 19.25rem;
  vertical-align: top;
}

#butterfly img {
  width: 4.56rem;
  height: 4.31rem;
}

#butterfly-container {
  height: 9rem; /* Prevents it from drawing above text. */
  text-align: center;
  margin-top: 1rem;
}

@keyframes translateButterfly {
  from {
    margin-top: -0.125rem;
  }
  to {
    margin-top: 0.5rem;
  }
}

@keyframes rotateButterfly {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(7deg);
  }
}

#butterfly {
  animation: translateButterfly 0.42s, rotateButterfly 0.7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  text-align: center;
  font-size: 0.625rem;
  text-decoration: none;
  color: black;
  display: inline-block;
}

/*———————————————————————————————————————————————————————————————*/
/* miscellaneous pages: essay, note, shout-out, contact, support */

#misc-pages h2 {
  border-bottom: 0.06rem solid grey;
}

#misc-pages h3 {
  margin-bottom: 0;
}

#misc-pages p {
  margin-top: 0;
}

#misc-pages li {
  text-align: left;
}

/*———————————————————————————————————————————————————————————————*/
/* quotes */

#quotes-page h2 {
  border-bottom: 0.06rem solid grey;
}

.quote-year {
  display: inline;
}

#quotes-page a {
  text-decoration: none;
}

.strong-quote {
  background-color: rgba(106, 255, 106, 0.13);
}

/*———————————————————————————————————————————————————————————————*/
/* Software */

#setup-page {
  text-align: left;
}

#setup-page .sub-title {
  text-align: center;
}

#setup-page div {
  display: inline-block;
  vertical-align: text-top;
  margin-right: 0.5rem;
  max-width: 29rem;
}

#setup-page h2 {
  border-bottom: 0.06rem solid grey;
}

#setup-page h1 sup {
  font-size: small;
}

/* https://stackoverflow.com/questions/38157007/how-do-i-achieve-automatic-numbering-for-headings-using-css */

/* .readability {
  counter-reset: heading;
}

.readability h1:before {
  content: counter(heading)") ";
  counter-increment: heading;
}

.readability  h1 {
  counter-reset: subheading;
}

.readability  h2:before {
	content: counter(heading)"." counter(subheading)") ";
	counter-increment: subheading;
} */

/*———————————————————————————————————————————————————————————————*/
/* Portfolio */

#portfolio-page {
  margin-bottom: 1rem;
}

#portfolio-page h2 {
  border-bottom: 0.06rem solid grey;
}

#portfolio-page img {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0.25rem;
}

#thesis-jan img {
  height: 19.25rem;
}

#thesis-vladie img {
  height: 18.25rem;
}

#portfolio-page iframe {
  margin-bottom: 0.25rem;
}

#amigara-screenshots img, #magnolia-screenshots img {
  height: 10.75rem;
}

#scifi-props img {
  height: 10.85rem;
}

#scifi-props img:last-child {
  width: 100%;
  height: auto;
}

#blarney-castle img:first-child {
  width: 100%;
  height: auto;
}

#blarney-castle img {
  height: 8.85rem;
}

#stevens-mod img:nth-child(1), #stevens-mod img:nth-child(2) {
  width: 100%;
  height: auto;
}

#stevens-mod img {
  height: 8.4rem;
}

#city-scene img:first-child {
  width: 100%;
  height: auto;
}

#city-scene img {
  height: 7.20rem;
}

#dm-vault img {
  height: 10rem;
}

#tractor-wip img:first-child {
  width: 40rem;
  height: auto;
}

#tractor-wip img {
  height: 11.25rem;
}

@media (pointer:none), (pointer:coarse) {
  @media screen and (orientation: portrait){
    #portfolio-page img, #portfolio-page iframe {
      width: 100%;
      height: auto;
    }

    #exp-container, #edu-container {
      display: block;
      max-width: 39rem;
    }
  }
}

/*———————————————————————————————————————————————————————————————*/
/* Symbols */

.symbol-box {
  display: inline-block;
  vertical-align: top;
  max-width: 30rem;
}

.monospace-symbols {
  font-family: monospace;
  font-size: 1.2rem;
}

.inv-on-android {
  color: grey;
}

/*———————————————————————————————————————————————————————————————*/
/* Music */

.yt-song {
  display: inline-block;
  vertical-align: bottom;
}

.yt-song figcaption {
  width: 18.75rem;
  height: 2rem;
}

/*———————————————————————————————————————————————————————————————*/
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */

.youtube-player {
  position: relative;
  width: 18.75rem;
  height: 11.25rem;
  overflow: hidden;
  background: #000;
}

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.youtube-player img {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: .4s all;
  -moz-transition: .4s all;
  transition: .4s all;
}

.youtube-player .play {
  position: absolute;
  width: 7.5rem;
  height: 5.25rem;
  left: 50%;
  top: 50%;
  margin-left: -3.75rem;
  margin-top: -2.625rem;
  background: url("../img/play.png") no-repeat;
  cursor: pointer;
  transform: scale(0.6,0.6);
}

.youtube-player .play:hover {
  transform: scale(0.55,0.55);
}

/*———————————————————————————————————————————————————————————————*/
/* Readability */

.readability {
  max-width: 39rem;
  margin: auto;
  hyphens: none;
}

.sub-title {
  text-align: justify;
}

.asterisk {
  text-decoration: none;
}

.margin-comment {
  font-size: medium;
  margin-left: auto; 
  margin-right: 0; 
  width: 21rem;
}

#author, #edit-list, .margin-comment {
  text-align: right;
}

#author {
  margin-bottom: 0;
}

figure summary, figure details pre, #edit-list summary {
  font-size: small;
}

#edit-list summary {
  text-decoration: underline;
  cursor: pointer;
  color: darkslategrey;
  margin-top: 0;
}

#edit-list li {
  font-size: x-small;
  font-family: monospace;
  text-align: left;
  padding-bottom: 0.125rem;
}

.quote {
  text-align: left;
  border-left: 0.125rem dashed grey;
  margin-left: 1.5rem;
  padding-left: 1rem;
}

.inline-quote {
  color: grey;
}

.readability img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.375rem;
}

.readability td {
  vertical-align: top;
}

.readability a {
  /* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

.readability iframe {
  display: block;
}

/* Proper aspect ratio of full width YouTube/Vimeo: 
Credits to Michael Coker https://stackoverflow.com/a/42497946/13963944 */
.iframe-container {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  width:100%;
}

.iframe-container iframe {
  position: absolute;
  top: 0; left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

/* Mobile and portrait mode */
/* @media (pointer:none), (pointer:coarse) {
  @media screen and (orientation: portrait){
     
  }
} */

.readability video {
  max-width: 42rem;
  width: 100%;
}

#bottom-nav {
  z-index: 53;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  padding: 0.125rem 0.5rem 0 0.5rem;
  margin: 0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: 0.06rem solid rgba(0, 0, 0, 0.19);
  border-bottom: 0;
  background-color: var(--bg-color);
  box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.075);
}

#bottom-nav a {
  text-decoration: none;
  color: dimgray;
}

#bottom-nav a:hover {
  color: black;
}

.comment {
  font-style: italic;
}

.pitchfork, .end-symbol {
  font-family: sans-serif;
}

.end-symbol {
  font-size: 2rem;
  text-align: center;
  margin: 2rem;
}

.fleuron {
  font-size: 1.5rem;
  text-align: center;
  margin: 1.5rem;
}

.source {
  font-size: smaller;
  font-family: monospace;
  vertical-align: text-top;
}

.source a {
  text-decoration: none
}

.dagger {
  vertical-align: text-bottom;
}

li ul li {
  list-style-type: lower-alpha;
}

.footnote {
  margin: 0;
}

/* Mastodon comment CSS below is all copy-pasted from Veronica Berglyd Olsen: https://berglyd.net/blog/2023/03/mastodon-comments/, but slightly tweaked by me */

#mastodon-comments-list button {
  background-color: var(--b-col-back-light);
  border: 0.063rem solid var(--b-col-primary);
  border-radius: 0.5rem;
  display: block;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-family: monospace;
  text-transform: lowercase;
}

/* Wrapper */

#mastodon-comments div.mastodon-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

#mastodon-comments div.reply-original {
  display: none;
}

#mastodon-comments div.reply-child {
  display: block;
  flex: 0 0 1.75rem;
  text-align: right;
}

.comment-level {
  font-size: 1.438rem;
  opacity: 0.75;
}

/* Comment */

#mastodon-comments div.mastodon-comment {
  background-color: var(--b-col-back-light);
  border: 0.063rem solid var(--b-col-primary);
  border-radius: 0.5rem;
  display: block;
  flex: 1 1 auto;
  font-size: 1rem;
  margin: 0 0 0.75rem 0;
  padding: 0;
}

#mastodon-comments div.comment-meta {
  background-color: var(--b-col-back-semi-light);
  border-radius: 0.5rem 0.5rem 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

#mastodon-comments div.comment-avatar {
  display: block;
  flex: 0 0 4rem;
}

#mastodon-comments div.comment-avatar img {
  width: 4rem;
  border-radius: 10%;
  margin-top: 0.15rem;
}

#mastodon-comments div.comment-author {
  display: block;
  flex: 1 1 0;
  white-space: nowrap;
  overflow-x: hidden;
  width: 0;
}

#mastodon-comments div.comment-author-name {
  font-weight: 700;
  margin: 0;
}

#mastodon-comments div.comment-author-name a {
  color: var(--b-col-text);
  text-decoration: none;
}

#mastodon-comments div.comment-author-reply,
#mastodon-comments div.comment-date {
  font-size: 0.9rem;
  margin: 0;
}

#mastodon-comments div.comment-author-reply a,
#mastodon-comments div.comment-date a {
  color: var(--b-col-text-dim);
  text-decoration: none;
}

#mastodon-comments div.comment-author-reply a:hover,
#mastodon-comments div.comment-date a:hover {
  color: var(--b-col-text-dim);
  text-decoration: underline;
}

#mastodon-comments div.comment-content {
  display: block;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
  margin: 0;
}

#mastodon-comments img.comment-emoji {
  height: 0.75rem;
  vertical-align: baseline;
  display: inline; /* ensures custom icons are next to the name, not below */
}

#mastodon-comments div.comment-content p {
  margin: 0.7rem 0 0 0;
}

#mastodon-comments div.comment-content p:first-of-type {
  margin: 0;
}

#mastodon-comments a {
  word-break: break-all; /* Prevents links creating a scrollbar on mobile */
}

/*———————————————————————————————————————————————————————————————*/
/* Essay specific */

/* takemymoney.html */

.grey-soft {
  color: grey;
}

.altruistic {
  font-weight: bold;
}