:root {
  font-size: 18px;
}
:root {
  --background-color: #ffffff;
  --color: #232629;
  --link-color: #0074cc;
  --link-hover-color: #0a95ff;
  --btn-color: #ffffff;
  --btn-background-color: rgba(50, 50, 50, 1);
  --github-mark-url: url(3524c849ab38de4be923.png);
  --x-logo-url: url(c9d69acfaf852c0ddb71.png);
  --linkedin-logo-url: url(1491f15f814d70e025c9.png);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #202124;
    --color: #bdc1c6;
    --link-color: #33a7ff;
    --link-hover-color: #3dc8ff;
    --btn-color: #151515;
    --btn-background-color: rgba(232, 232, 232, 1);
    --github-mark-url: url(925aa8e685ab0217bb34.png);
    --x-logo-url: url(4d73a49285dbe9cac801.png);
    --linkedin-logo-url: url(44a86b5e1a09bc7bed86.png);
  }
}
/* Copy of the variables in :root above */
:root[data-color-scheme='light'] {
  --background-color: #ffffff;
  --color: #232629;
  --link-color: #0074cc;
  --link-hover-color: #0a95ff;
  --btn-color: #ffffff;
  --btn-background-color: rgba(50, 50, 50, 1);
  --github-mark-url: url(3524c849ab38de4be923.png);
  --x-logo-url: url(c9d69acfaf852c0ddb71.png);
  --linkedin-logo-url: url(1491f15f814d70e025c9.png);
}
/* Copy of the variables in @media (prefers-color-scheme: dark) :root above */
:root[data-color-scheme='dark'] {
  --background-color: #202124;
  --color: #bdc1c6;
  --link-color: #33a7ff;
  --link-hover-color: #3dc8ff;
  --btn-color: #151515;
  --btn-background-color: rgba(232, 232, 232, 1);
  --github-mark-url: url(925aa8e685ab0217bb34.png);
  --x-logo-url: url(4d73a49285dbe9cac801.png);
  --linkedin-logo-url: url(44a86b5e1a09bc7bed86.png);
}
/* size of iPad screen is 768px x 1024px in portrait mode */
@media only screen and (min-width: 768px) and (min-height: 768px) {
  :root {
    font-size: 22px;
  }
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
* {
  font-family: Arial, Helvetica, sans-serif;
}
body {
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--color);
}
h1 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
}
h2 {
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 0;
}
a,
a:link,
a:visited {
  color: var(--link-color);
  text-decoration: none;
}
a:hover,
a:active {
  color: var(--link-hover-color);
}
img.github-mark {
  content: var(--github-mark-url);
  width: 60px;
  height: auto;
  margin: 20px;
}
img.so-icon {
  width: 100px;
  height: auto;
}
img.x-logo {
  content: var(--x-logo-url);
  width: 44px;
  height: auto;
  margin: 28px;
}
img.linkedin-logo {
  content: var(--linkedin-logo-url);
  width: 60px;
  height: auto;
  margin: 20px;
}
.flex-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  height: auto;
  overflow: visible;
  text-align: left;
}
.flex-box.horizontal {
  flex-direction: row;
}
.flex-box.no-wrap {
  flex-wrap: nowrap;
  padding: 0;
}
.margin-top-1 {
  margin-top: 1rem;
}
.margin-top-1-half {
  margin-top: 1.5rem;
}
.margin-top-2 {
  margin-top: 2rem;
}
.margin-bottom-1 {
  margin-bottom: 1rem;
}
ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
li {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.projects-list {
  width: 100%;
  max-width: 30rem;
}
.text-align-center {
  text-align: center;
}
div.for-margin {
  min-height: 50vh;
  width: 100%;
}
div.color-scheme-toggle-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 3rem;
  --toggle-switch-height: 1.6rem;
  --toggle-ball-diameter: 1.2rem;
  --toggle-switch-width: calc(2 * var(--toggle-switch-height));
  --toggle-ball-top: calc(
    (var(--toggle-switch-height) - var(--toggle-ball-diameter)) / 2
  );
  --toggle-ball-left: calc(
    (var(--toggle-switch-height) - var(--toggle-ball-diameter)) / 2
  );
  --toggle-ball-left-toggled: calc(
    var(--toggle-switch-width) - var(--toggle-ball-diameter) -
      var(--toggle-ball-left)
  );
}
/*
 * Toggle switch using CSS
 * Reference: https://dev.to/karankmr/how-to-create-a-custom-toggle-switch-using-css-4pmi
 */
input.toggle-switch {
  display: none;
}
input.toggle-switch + label {
  display: inline-block;
  position: relative;
  margin: auto;
  background-color: var(--btn-background-color);
  height: var(--toggle-switch-height);
  width: var(--toggle-switch-width);
  border-radius: calc(var(--toggle-switch-height) / 2);
  cursor: pointer;
  transition: background-color 1s;
}
input.toggle-switch + label::after {
  content: '';
  position: absolute;
  left: var(--toggle-ball-left);
  top: var(--toggle-ball-top);
  height: var(--toggle-ball-diameter);
  width: var(--toggle-ball-diameter);
  border-radius: 50%;
  background-color: var(--btn-color);
  transition: left 0.5s, background-color 1s;
}
input.toggle-switch:checked + label::after {
  left: var(--toggle-ball-left-toggled);
}
/*
 * The following supplement is for displaying the Sun and Moon unicode characters
 * inside toggle switch label.
 */
input.toggle-switch + label::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: var(--btn-color);
  left: var(--toggle-ball-left-toggled);
  top: var(--toggle-ball-top);
  height: var(--toggle-ball-diameter);
  width: var(--toggle-ball-diameter);
  font-size: var(--toggle-ball-diameter);
  content: '\2600';
}
input.toggle-switch:checked + label::before {
  left: var(--toggle-ball-left);
  content: '\263E';
}


/*# sourceMappingURL=dark_color_scheme.d6fc5e12f27e876bbd0c.css.map*/