/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/* What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html { font-size: 1em; line-height: 1.4; }

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

fieldset { border: 0; margin: 0; padding: 0; }

textarea { resize: vertical; }

/* ==========================================================================
Author's custom styles
========================================================================== */
body { background-color: #1d1d1f; color: #8c939a; font-family: 'Courier New', monospace; font-size: 3rem; }

main { margin: 5vw; max-width: 80vw; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) { html { font-size: 0.5em; }
  main { margin: 2vw; max-width: 96vw; } }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) { html { font-size: 0.5em; }
  main { margin: 2vw; max-width: 96vw; } }

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) { html { font-size: 0.6em; }
  main { margin: 3vw; max-width: 96vw; } }

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) { html { font-size: 0.8em; }
  main { margin: 5vw; max-width: 80vw; } }

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) { html { font-size: 1vw; }
  main { margin: 5vw; max-width: 80vw; } }

summary:hover { color: #dde0e2; }

details[open] > summary > i { color: #dde0e2; }

.text-items > div { font-family: "Trebuchet MS"; font-weight: bold; font-size: 2rem; padding-top: 1rem; padding-left: 2.5rem; }

.text-items > div * { margin-bottom: unset; line-height: 2.4rem; }

.text-items > div span { font-weight: normal; font-style: italic; color: #5a6066; }

.link-items > div > a { font-family: "Trebuchet MS"; font-weight: bold; font-size: 2rem; padding-left: 0.5rem; color: #42acc7; text-decoration: none; text-underline-offset: 0.1em; }

.link-items > div > a:hover { color: #b8e0ea; -webkit-text-decoration: underline 0.05em #b8e0ea; text-decoration: underline 0.05em #b8e0ea; -webkit-text-decoration-color: #b8e0ea; text-decoration-color: #b8e0ea; text-underline-offset: 0.1em; }

#profile-pic { border-radius: 50%; float: left; text-align: center; shape-outside: margin-box; margin: 0 1.5rem 0.1rem 0; max-width: 20vw; }

details::before, details > div::before { position: absolute; top: 2rem; left: 0; width: 2rem; height: 3px; margin: auto; content: ''; background-color: #8c939a; }

details::after, details > div::after { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; height: 100%; content: ''; background-color: #8c939a; }

details:last-child::after, details > div:last-child::after { height: 2rem; }

.folder::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; text-align: center; width: 1.25em; margin-right: 0.5rem; content: "\f07b"; }

details[open] > .folder::before { padding-left: 0.5rem; content: "\f07c"; color: #dde0e2; }

.fas, .fab { margin-right: 0.5rem; }

details { position: relative; margin-left: 3.7rem; line-height: 1; color: #8c939a; }

details summary { list-style: none; font-style: italic; }

details summary::-webkit-details-marker { display: none; }

details div { margin-left: 3.7rem; }

details summary, details div { position: relative; padding-top: 0.5rem; padding-left: 2rem; -webkit-box-sizing: border-box; box-sizing: border-box; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }

/* ==========================================================================
Helper classes
========================================================================== */
.hidden, [hidden] { display: none !important; }

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */ }

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active, .sr-only.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; }

.invisible { visibility: hidden; }

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
.clearfix::before, .clearfix::after { content: " "; display: table; }

.clearfix::after { clear: both; }

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ }

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }

/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print { *, *::before, *::after { background: #fff !important; color: #000 !important; /* Black prints faster */ -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
  abbr[title]::after { content: " (" attr(title) ")"; }
  /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
  pre { white-space: pre-wrap !important; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  /* Printing Tables: https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables */
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }