/* 
FONTS AVAILABLE
Roboto: 100, 100italic, 300, 300italic, 400, 400italic, 500, 500italic, 700, 700italic, 900, 900italic
Roboto Condensed: 300, 300italic, 400, 400italic, 700, 700italic
Roboto Serif: 1, 2, 3, 4, ..., 900, 900italic (all hundreds available)
*/
/*
FONTS LOADED (these weights were loaded using colons in the link href, update as necessary)
Roboto: 100, 400, 700, 900
Roboto Condensed: 400, 700
Roboto Serif: 100, 400, 700, 900
*/

/*    Variables
/* ------------------------------------------------------------------ */

:root {
  --color: #000;
  --color-subtle: #444;
  --color-very-subtle: #ccc;
  --bg-color: #f4f3f0; /* was #eee */
  --bg-color-subtle: #ccc;
  --bg-color-very-subtle: #d8d7d4; /* was #ddd */
  --color-accent: #963;
  --color-accent2: #364;
  --color-accent3: #568;
  --color-link: #963;
  --shadow-very-dark: rgba(0, 0, 0, 0.3);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --color-selection: #000;
  --color-bg-selection: #ed9;
  --color-progress-bar: var(--color-accent2);
  --color-hr: #999;
  --tiny-radius: 2px;
  --small-radius: 5px;
  --medium-radius: 10px;
  --large-radius: 20px;
  --infinite-radius: 1000px;
  --thin-font-weight: normal;
  --large-gap: 100px;
  --medium-gap: 50px;
  --gap: 30px;
  --small-gap: 20px;
  --tiny-gap: 10px;
  --horizontal-gap: 5%;
  --vertical-gap: var(--gap);
  --transition-time: 300ms;
  --color-instagram: #e4405f;
  --color-linkedin: #0077b5;
  --color-twitter: #1da1f2;
  --color-facebook: #3b5998;
  --color-youtube: #ff0000;
  --color-github: #979; /* custom, not the same as github logo */
  --color-medium: #00ab6c;
  --color-google: #4285f4;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* include only the ones that need to be overridden */
    --color: #ddd;
    --color-subtle: #aaa;
    --color-very-subtle: #333;
    --bg-color: #222;
    --bg-color-subtle: #333;
    --bg-color-very-subtle: #282828;
    --color-accent: #fb1;
    --color-accent2: #696;
    --color-accent3: #c43;
    --color-link: #1ac;
    --color-hr: #666;
    --shadow-very-dark: rgba(0, 0, 0, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --color-selection: #000;
    --color-bg-selection: #696;
    --color-hr: #888;
  }
}

/*    COMMON TAGS
/* ------------------------------------------------------------------ */

::selection {
  color: var(--color-selection);
  background: var(--color-bg-selection);
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  line-height: 1.5em;
  color: var(--color);
  background: var(--bg-color);
}

a {
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  /* only abbreviations that have a title attribute will show this */
  cursor: pointer;
  border-bottom: dotted 1px var(--color-accent);
}

ol {
  padding-left: 1em;
}
ul {
  list-style-type: "—";
  padding-left: 1em;
}
li {
  padding-left: 10px;
}

h1 {
  font-size: 2.4em;
  line-height: 1.6em; /* multi-line styling has been handled in mobile.css */
  font-weight: 700;
  margin-top: 60px;
  margin-bottom: 30px;
}
h2 {
  font-size: 2em;
  line-height: 1.5em; /* multi-line styling has been handled in mobile.css */
  font-weight: 500;
  margin-top: 45px;
  margin-bottom: 23px;
}
h3 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.6em;
  line-height: 1.2em;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 15px;
}
h4 {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1em;
  line-height: 1.5em; /* larger because it's uppercase */
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
h5 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9em;
  line-height: 1.45em; /* larger because it's uppercase */
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 5px;
}
h6 {
  /* currently same as subheading-small */
  font-size: 80%;
  font-weight: normal; /* not needed to be set in subheading-small */
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
hr {
  border: 0;
  border-top: dotted 1px var(--color-hr);
  margin: var(--small-gap) 0;
}
hr.narrow {
  margin: var(--tiny-gap) 0;
}

section {
  margin-bottom: 100px;
}

img {
  width: 100%;
  height: auto;
}

/* Although we are using PrismJS for code highlighting, the inline-code is not being highlighted in posts because the markdown parser is not injecting the class='language-xxx' while creating the <code> block from `inline code here`. Hence, I am adding the code styling here */
code {
  font-family: "Fira Mono", monospace;
  font-size: 0.8em;
  color: var(--color-accent);
  background: var(--bg-color-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--small-radius);
}

progress {
  width: 100%;
  margin: 20px 0;
}

table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  border-bottom: solid 1px var(--color);
}
thead {
  font-family: "Fira Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-top: solid 1px var(--color);
  border-bottom: solid 1px var(--color);
}
thead,
tfoot {
  font-size: 95%;
  font-weight: 500;
}
tbody {
  font-size: 90%;
}
th,
td {
  padding: 0.5em 1em;
}
tbody th,
tbody td {
  border-bottom: solid 1px var(--color-very-subtle);
}
tfoot {
  border-top: none;
}

/*   COMMON CLASSES
/*=========================================================================== */

/* body content outside of navbar */
.except-nav {
  margin: 0 10% 80px; /* remember to include top padding/margin in .header */
}

.spacer50 {
  height: 50px;
}
.spacer30 {
  height: 30px;
}
.spacer20 {
  height: 20px;
}
.spacer10 {
  height: 10px;
}

.inline {
  display: inline-block;
}

.dotted {
  border-bottom: dotted 1px var(--color-subtle);
}

.grid-container {
  display: grid;
  gap: var(
    --horizontal-gap
  ); /* override with --vertical-gap when necessary, because --horizontal-gap is in % and maybe too much when the grid is expected to contain multiple rows */
}

.double-spaced {
  line-height: 1.8em;
}
.smaller-text {
  font-size: 90%;
}
.larger-text {
  font-size: 110%;
}
.tiny-text {
  font-size: 80%;
}
.italic {
  font-style: italic;
}
.bold {
  font-weight: bold;
}
.uppercase {
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 0.1em;
}
.underlined {
  border-bottom: solid 1px var(--color-accent);
}
.centered {
  text-align: center;
}
.justified {
  text-align: justify;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.mono {
  font-family: "Fira Mono", monospace;
}

.card {
  box-shadow: 0px 0px 4px 4px var(--shadow-dark);
}
.card-thin {
  box-shadow: 0px 0px 2px 2px var(--shadow-very-dark);
}
.card-very-thin {
  box-shadow: 0px 0px 1px 1px var(--shadow-very-dark);
}

.rounded-tiny {
  border-radius: var(--tiny-radius);
}
.rounded-small {
  border-radius: var(--small-radius);
}
.rounded-medium {
  border-radius: var(--medium-radius);
}
.rounded-large {
  border-radius: var(--large-radius);
}
.rounded-infinite {
  border-radius: var(--infinite-radius);
}

.button {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 3em !important; /* line-height seems to adjust to uppercase, hence higher than expected value is provided */
  padding-top: 0 !important;
  padding-bottom: 0 !important; /* this is to avoid the padding-top/bottom being inherited from the parent element, because line-height is taking care of the height */
  letter-spacing: 0.1em !important;
  color: var(--color-link) !important;
  background-color: var(--bg-color) !important;
  border: solid 1px var(--color-link) !important;
  border-radius: var(
    --small-radius
  ) !important; /* be consistent for rounded corners */
  cursor: pointer !important;
}

.nav-button {
  /* create a transparent border so that it doesn't change size on hover */
  border-bottom: solid 2px rgba(0, 0, 0, 0);
}
.nav-button:hover {
  border-bottom: solid 2px var(--color-link);
}
.nav-button-active {
  color: var(--color-accent);
  border-bottom: solid 2px var(--color-accent);
}

.space-span-left {
  margin-right: 1em;
}
.space-narrow-span-left {
  margin-right: 0.25em;
}
.space-span-right {
  margin-left: 1em;
}
.space-narrow-span-right {
  margin-left: 0.25em;
}

.hidden-at-first {
  display: none;
}

.subheading-small {
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.server-message {
  padding: var(--small-gap);
  margin-bottom: var(--small-gap);
  text-align: center;
  color: var(--color-accent);
  border: solid 1px var(--color-accent);
  border-radius: var(--small-radius);
}

.server-message-minimal {
  margin: var(--tiny-gap) 0;
  color: var(--color-accent);
  font-weight: 500;
}

.color-accent {
  color: var(--color-accent);
}
.color-accent2 {
  color: var(--color-accent2);
}
.color-accent3 {
  color: var(--color-accent3);
}
.color-link {
  color: var(--color-link);
}
.color-subtle {
  color: var(--color-subtle);
}
.uncolor {
  color: inherit !important;
}
.dotted {
  border-bottom: dotted 1px var(--color-subtle);
}

.padded {
  padding: var(--gap) max(var(--gap), 5%); /* fixed top and bottom, but variable sides */
}
.padded-tiny {
  padding: var(--tiny-gap) max(var(--tiny-gap), 3%); /* fixed top and bottom, but variable sides */
}
.padded-medium {
  padding: 12%; /* fine-tuned */
}

.clickable {
  cursor: pointer;
}

/* Progress bar things */
.progress-item {
  margin-bottom: 20px;
}
.progress-bar-container {
  background-color: var(--bg-color-subtle);
  border-radius: var(--tiny-radius);
  height: 10px;
}
.progress-bar {
  height: 10px;
  background-color: var(--color-progress-bar);
  width: 100%; /* set dynamically in html */
  /* so that the text (if any) can overflow outside */
}

/* Google's material icons */
.material-icons {
  font-size: inherit;
  vertical-align: middle;
}
.material-icons-outlined {
  font-size: inherit;
  vertical-align: middle;
}

.fancy-text {
  font-size: 90%;
  font-weight: 700;
  color: var(--bg-color);
  background-color: var(--color-accent2);
  border-radius: var(--tiny-radius);
  padding: 0 0.3em;
}

.grayscale {
  transition: var(--transition-time);
  filter: grayscale(100%);
}

.logo150 {
  max-width: 150px;
  height: auto; /* so that the image is not stretched */
  border-radius: 75px;
}

.tag {
  font-size: 80%;
  color: var(--color);
  text-transform: lowercase;
  background-color: var(--bg-color-subtle);
  border-radius: var(--small-radius);
  padding: 0.4em 0.6em; /* fine-tuned */
  line-height: 2.4em; /* fine-tuned, so that they are separated at multi-line */
}

/*   FORMS
/*=========================================================================== */

input,
textarea {
  display: block;
  width: 100%;
  margin-bottom: var(--tiny-gap);
  border-radius: var(--small-radius);
  padding: var(--tiny-gap);
  line-height: 2em; /* larger than usual */
  color: var(--color-subtle);
  background-color: var(--bg-color); /* transparent */
  border: solid 1px var(--color-hr); /* line color, kind of */
}
input:focus,
textarea:focus {
  outline: none;
  border: solid 1px var(--color-accent);
}

.contact .country {
  display: none;
  visibility: hidden;
}

/*   NAVBAR
/*=========================================================================== */

.nav-container {
  padding: 5vh 0;
}
.theme-toggle {
  width: fit-content;
  position: absolute;
  top: 10px;
  right: 10px;
  border: solid 1px var(--color-accent);
}
nav img.profile-photo {
  transition: var(--transition-time);
  filter: grayscale(20%);
  /* center */
  display: block;
  margin: 0 auto 5vh;
  width: min(30%, 150px);
  height: auto;
  border-radius: var(--infinite-radius);
}
nav img.profile-photo:hover {
  transition: var(--transition-time);
  filter: none;
}
.tagline {
  /* currently sits in the navbar */
  font-size: 1em;
  font-weight: normal;
  /* text-transform: uppercase; */
  text-align: center;
  /* letter-spacing: 0.2em; */
  color: var(--color-subtle);
  margin-bottom: var(--gap);
  padding: 0 var(--tiny-gap);
}
nav ul li {
  border-bottom: solid 1px var(--color-hr);
  margin: 0px auto 5px;
  line-height: 2.5em;
  width: 80%;
  display: block;
  text-align: center;
}
nav ul li:hover {
  /* TODO: check why this isn't working */
  /* NOTE: apparently if the #link has been visited, it is not being colored on hover */
  color: var(--color-link);
  border-bottom: solid 1px var(--color-link);
}
nav ul li a {
  display: inline-block; /* align won't work with 'block' */
  width: 130px; /* fine-tuning, use a border to help with fine-tuning whenever the navigation links change */
  text-align: left; /* within at anchor that contains icon + text */
  /* border: solid 1px black; */
}
nav ul li a span {
  margin-right: 10px;
}
nav .nav-social-bar {
  width: 100%;
  margin-top: 8vh;
  text-align: center;
}
nav .nav-social-bar i {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25em;
  font-size: 1.2em;
  line-height: 2em; /* in case they move to a new line */
}
i {
  color: var(--color-subtle);
}
i.fa-instagram:hover {
  color: var(--color-instagram);
}
i.fa-twitter:hover {
  color: var(--color-twitter);
}
i.fa-linkedin:hover {
  color: var(--color-linkedin);
}
i.fa-github:hover {
  color: var(--color-github);
}
i.fa-medium:hover {
  color: var(--color-medium);
}
i.fa-google:hover {
  color: var(--color-google);
}
i.fa-youtube:hover {
  color: var(--color-youtube);
}
nav .nav-social-bar p {
  color: var(--color-subtle);
  font-size: 0.7em;
  line-height: 1em;
  margin-top: var(--tiny-gap);
}

/*   HEADER (is common site wide)
/*=========================================================================== */

.header {
  border-bottom: solid 1px var(--color-hr);
  text-align: right;
}
.header h1 {
  font-family: "Georgia", serif;
  font-size: 3.6em;
  line-height: 3.6em; /* multi-line styling has been handled in mobile.css */
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0;
}