/************/
/* VARIABLE */
/************/

/* font stacks from https://github.com/csstools/sanitize.css/blob/master/typography.css */
:root {
  --sans:
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ "Segoe UI",
    /* Android 4+ */ "Roboto",
    /* Ubuntu 10.10+ */ "Ubuntu",
    /* Gnome 3+ */ "Cantarell",
    /* KDE Plasma 5+ */ "Noto Sans",
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";

--serif: 
  charter,
  Georgia,
  Cambria,
  "Times New Roman",
  Times, serif; 

--mono:
    /* macOS 10.10+ */ "Menlo",
    /* Windows 6+ */ "Consolas",
    /* Android 4+ */ "Roboto Mono",
    /* Ubuntu 10.10+ */ "Ubuntu Monospace",
    /* KDE Plasma 5+ */ "Noto Mono",
    /* KDE Plasma 4+ */ "Oxygen Mono",
    /* Linux/OpenOffice fallback */ "Liberation Mono",
    /* fallback */ monospace,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";

}

.sans {
  font-family: var(--sans);
}

.serif {
  font-family: var(--serif);
}

.mono {
  font-family: var(--mono);
}

/**********/
/* GLOBAL */
/**********/

/* fluid typography base size, which respects user defined base size + sane breaking
 * https://css-tricks.com/simplified-fluid-typography/ 
 * sanitize.css */
 html {
  font-size: clamp(1em, 1em + 0.2vw, 3em);
  word-break: break-word;
  line-height: 1.35;
}

/* other global defaults */
html {
  color: darkslategray; /* because who likes black? */
  background-color: aliceblue; /* ... or white? */
  font-family: var(--sans);
}

/*************/
/* ELEMENTAL */
/*************/

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* decrease line-height, because otherwise wrapping looks weird */
h1, h2, h3 {
  line-height: 1.1;
}

a {
  color: darkslategray; /* i.e. keep color once clicked */
  cursor: pointer;
}

a:hover, a:active {
  color: darkturquoise;
}

/* inline code, from markdown `code` construction */
code {
  padding: 0 0.15rem;
  border-radius: 0.25rem;
  background: lightgray;
  color: black;
  font-family: var(--mono);
}

/* block code, from markdown ``` construction */
pre code {
  display: inline-block;
  padding: 0.5rem;
  background: black;
  color: white;
  overflow-wrap: anywhere;  
  white-space: pre-wrap;
}

 /* to prefix $ in bash in a way that isn't selected on tripple click */
code.language-bash::before {
  content: "$ ";
  background: none;  
  color: gray;
}

video {
  border: teal 2px solid;
  border-radius: 0.25rem;
}

@media only screen and (min-width: 530px) {
  video {
    align-self: center;
    width: 75vw;
  }
}

figure {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

img {
	border-radius: 0.25rem;
  max-width: 100%;
  display: block;
  margin: auto;
}

/**************/
/* STRUCTURAL */
/**************/

.scrollBuffer {
  margin-left: calc(100vw - 100%); /* prevent scrollbar related jumping */;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background: lightblue;
  gap: 0.25rem;
  padding: 0.25rem;
}

  .nav__tab /* i.e. unpressed */ {
    padding: 0 0.25rem 0 0.25rem;
    font-size: 1.25rem;
    text-decoration: none;
    background-color: aliceblue;
    border-radius: 0.25rem;
  }

  .nav__tab--current, 
  .nav__tab:hover, 
  .nav__tab:active {
	color: aliceblue;
    background-color: teal;
  }

/* the outermost 'frame' */
main, article {
  max-width: 35rem;
  min-width: min-content; /* to prevent content flowing off */
  margin-top: 2rem;
}

.linkbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem
}

.linkbar__entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 0.75;
  gap: 0.25rem;
}
  
.linkbar__entry--site {
  flex-direction: row;
  align-items: center;
}
  
.linkbar * svg {
  height: 2.5rem;
  fill: darkslategray;
}

.linkbar--site * svg {
  height: 1rem;
}

/* Possibly superfluous */

.image--profilePic {
  max-width: 12.5rem;
  border: 5px solid teal;
  border-radius: 50%;
}

.backButton {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 2.5rem;
  background-image: radial-gradient(whitesmoke 50%, transparent 65%)
}

.backButton .svg-inline--fa {
  height: 60%;
}

.small-mono {
  font-family: var(--mono);
  font-size: 0.75rem;
}

/**********/
/* ATOMIC */
/**********/

.w-50pc {
  width: 50%;
}

.noTxtDec {
  text-decoration: none;
}

.noTopMargin {
  margin-top: 0;
}

.noBottomMargin {
  margin-bottom: 0;
}