/*! modern-normalize v1.0.0 | MIT License | github.com/sindresorhus/modern-normalize */

/* Document

*/

/** Use a better box model (opinionated). */

*, *::before, *::after {

box-sizing: border-box;

}

/** Use a more readable tab size (opinionated). */

:root {

-moz-tab-size: 4;
tab-size: 4;

}

/**

  1. Correct the line height in all browsers.

  2. Prevent adjustments of font size after orientation changes in iOS.

*/

html {

line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */

}

/* Sections

*/

/** Remove the margin in all browsers. */

body {

margin: 0;

}

/** Improve consistency of default fonts in all browsers. (github.com/sindresorhus/modern-normalize/issues/3) */

body {

font-family:
              system-ui,
              -apple-system, /* Firefox supports this but not yet `system-ui` */
              'Segoe UI',
              Roboto,
              Helvetica,
              Arial,
              sans-serif,
              'Apple Color Emoji',
              'Segoe UI Emoji';

}

/* Grouping content

*/

/**

  1. Add the correct height in Firefox.

  2. Correct the inheritance of border color in Firefox. (bugzilla.mozilla.org/show_bug.cgi?id=190655)

*/

hr {

height: 0; /* 1 */
color: inherit; /* 2 */

}

/* Text-level semantics

*/

/** Add the correct text decoration in Chrome, Edge, and Safari. */

abbr {

text-decoration: underline dotted;

}

/** Add the correct font weight in Edge and Safari. */

b, strong {

font-weight: bolder;

}

/**

  1. Improve consistency of default fonts in all browsers. (github.com/sindresorhus/modern-normalize/issues/3)

  2. Correct the odd 'em' font sizing in all browsers.

*/

code, kbd, samp, pre {

font-family:
              ui-monospace,
              SFMono-Regular,
              Consolas,
              'Liberation Mono',
              Menlo,
              monospace; /* 1 */
font-size: 1em; /* 2 */

}

/** Add the correct font size in all browsers. */

small {

font-size: 80%;

}

/** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */

sub, sup {

font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;

}

sub {

bottom: -0.25em;

}

sup {

top: -0.5em;

}

/* Tabular data

*/

/**

  1. Remove text indentation from table contents in Chrome and Safari. (bugs.chromium.org/p/chromium/issues/detail?id=999088, bugs.webkit.org/show_bug.cgi?id=201297)

  2. Correct table border color inheritance in all Chrome and Safari. (bugs.chromium.org/p/chromium/issues/detail?id=935729, bugs.webkit.org/show_bug.cgi?id=195016)

*/

table {

text-indent: 0; /* 1 */
border-color: inherit; /* 2 */

}

/* Forms

*/

/**

  1. Change the font styles in all browsers.

  2. Remove the margin in Firefox and Safari.

*/

button, input, optgroup, select, textarea {

font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */

}

/** Remove the inheritance of text transform in Edge and Firefox.

  1. Remove the inheritance of text transform in Firefox.

*/

button, select { /* 1 */

text-transform: none;

}

/** Correct the inability to style clickable types in iOS and Safari. */

button {

-webkit-appearance: button;

}

/** Remove the inner border and padding in Firefox. */

/** Restore the focus styles unset by the previous rule. */

/** Remove the additional ':invalid' styles in Firefox. See: github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */

/** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */

legend {

padding: 0;

}

/** Add the correct vertical alignment in Chrome and Firefox. */

progress {

vertical-align: baseline;

}

/** Correct the cursor style of increment and decrement buttons in Safari. */

/**

  1. Correct the odd appearance in Chrome and Safari.

  2. Correct the outline style in Safari.

*/

/** Remove the inner padding in Chrome and Safari on macOS. */

/**

  1. Correct the inability to style clickable types in iOS and Safari.

  2. Change font properties to 'inherit' in Safari.

*/

/* Interactive

*/

/* Add the correct display in Chrome and Safari. */

summary {

display: list-item;

}

/**

* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
* A thin layer on top of normalize.css that provides a starting point more
* suitable for web applications.
*/

/**

* Removes the default spacing and border for appropriate elements.
*/

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {

margin: 0;

}

button {

background-color: transparent;
background-image: none;

}

/**

* Work around a Firefox/IE bug where the transparent `button` background
* results in a loss of the default `button` focus styles.
*/

button:focus {

outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;

}

fieldset {

margin: 0;
padding: 0;

}

ol, ul {

list-style: none;
margin: 0;
padding: 0;

}

/**

* Tailwind custom reset styles
*/

/**

* 1. Use the user's configured `sans` font-family (with Tailwind's default
*    sans-serif font stack as a fallback) as a sane default.
* 2. Use Tailwind's default "normal" line-height so the user isn't forced
*    to override it to ensure consistency even when using the default theme.
*/

html {

font-family: Poppins, sans-serif; /* 1 */
line-height: 1.5; /* 2 */

}

/**

* Inherit font-family and line-height from `html` so users can set them as
* a class directly on the `html` element.
*/

body {

font-family: inherit;
line-height: inherit;

}

/**

* 1. Prevent padding and border from affecting element width.
*
*    We used to set this in the html element and inherit from
*    the parent element for everything else. This caused issues
*    in shadow-dom-enhanced elements like <details> where the content
*    is wrapped by a div with box-sizing set to `content-box`.
*
*    https://github.com/mozdevs/cssremedy/issues/4
*
*
* 2. Allow adding a border to an element by just adding a border-width.
*
*    By default, the way the browser specifies that an element should have no
*    border is by setting it's border-style to `none` in the user-agent
*    stylesheet.
*
*    In order to easily add borders to elements by just setting the `border-width`
*    property, we change the default border-style for all elements to `solid`, and
*    use border-width to hide them instead. This way our `border` utilities only
*    need to set the `border-width` property instead of the entire `border`
*    shorthand, making our border utilities much more straightforward to compose.
*
*    https://github.com/tailwindcss/tailwindcss/pull/116
*/

*, ::before, ::after {

box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */

}

/*

* Ensure horizontal rules are visible by default
*/

hr {

border-top-width: 1px;

}

/**

* Undo the `border-style: none` reset that Normalize applies to images so that
* our `border-{width}` utilities have the expected effect.
*
* The Normalize reset is unnecessary for us since we default the border-width
* to 0 on all elements.
*
* https://github.com/tailwindcss/tailwindcss/issues/362
*/

img {

border-style: solid;

}

textarea {

resize: vertical;

}

input::placeholder, textarea::placeholder {

color: #9ca3af;

}

button,

role=“button”

{

cursor: pointer;

}

table {

border-collapse: collapse;

}

h1, h2, h3, h4, h5, h6 {

font-size: inherit;
font-weight: inherit;

}

/**

* Reset links to optimize for opt-in styling instead of
* opt-out.
*/

a {

color: inherit;
text-decoration: inherit;

}

/**

* Reset form element properties that are easy to forget to
* style explicitly so you don't inadvertently introduce
* styles that deviate from your design system. These styles
* supplement a partial reset that is already applied by
* normalize.css.
*/

button, input, optgroup, select, textarea {

padding: 0;
line-height: inherit;
color: inherit;

}

/**

* Use the configured 'mono' font family for elements that
* are expected to be rendered with a monospace font, falling
* back to the system monospace stack if there is no configured
* 'mono' font family.
*/

pre, code, kbd, samp {

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}

/**

* Make replaced elements `display: block` by default as that's
* the behavior you want almost all of the time. Inspired by
* CSS Remedy, with `svg` added as well.
*
* https://github.com/mozdevs/cssremedy/issues/14
*/

img, svg, video, canvas, audio, iframe, embed, object {

display: block;
vertical-align: middle;

}

/**

* Constrain images and videos to the parent width and preserve
* their instrinsic aspect ratio.
*
* https://github.com/mozdevs/cssremedy/issues/14
*/

img, video {

max-width: 100%;
height: auto;

}

.container {

width: 100%;
padding-right: 1rem;
padding-left: 1rem;

}

@media (min-width: 640px) {

.container {
  max-width: 640px;
  padding-right: 2rem;
  padding-left: 2rem;
}

}

@media (min-width: 768px) {

.container {
  max-width: 768px;
  padding-right: 4rem;
  padding-left: 4rem;
}

}

@media (min-width: 1024px) {

.container {
  max-width: 1024px;
  padding-right: 5rem;
  padding-left: 5rem;
}

}

@media (min-width: 1280px) {

.container {
  max-width: 1280px;
  padding-right: 7rem;
  padding-left: 7rem;
}

}

@media (min-width: 1536px) {

.container {
  max-width: 1536px;
  padding-right: 9rem;
  padding-left: 9rem;
}

}

.bg-gray-50 {

--tw-bg-opacity: 1;
background-color: rgba(249, 250, 251, var(--tw-bg-opacity));

}

.bg-gray-100 {

--tw-bg-opacity: 1;
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));

}

.bg-gray-900 {

--tw-bg-opacity: 1;
background-color: rgba(17, 24, 39, var(--tw-bg-opacity));

}

.bg-primary-700 {

--tw-bg-opacity: 1;
background-color: rgba(67, 56, 202, var(--tw-bg-opacity));

}

.hover:bg-primary-700:hover {

--tw-bg-opacity: 1;
background-color: rgba(67, 56, 202, var(--tw-bg-opacity));

}

.dark .dark:bg-gray-800 {

--tw-bg-opacity: 1;
background-color: rgba(31, 41, 55, var(--tw-bg-opacity));

}

.dark .dark:bg-gray-900 {

--tw-bg-opacity: 1;
background-color: rgba(17, 24, 39, var(--tw-bg-opacity));

}

.border-gray-200 {

--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));

}

.border-primary-600 {

--tw-border-opacity: 1;
border-color: rgba(79, 70, 229, var(--tw-border-opacity));

}

.border-primary-700 {

--tw-border-opacity: 1;
border-color: rgba(67, 56, 202, var(--tw-border-opacity));

}

.dark .dark:border-gray-800 {

--tw-border-opacity: 1;
border-color: rgba(31, 41, 55, var(--tw-border-opacity));

}

.rounded-md {

border-radius: 0.375rem;

}

.rounded-lg {

border-radius: 0.5rem;

}

.border {

border-width: 1px;

}

.border-t-4 {

border-top-width: 4px;

}

.border-b {

border-bottom-width: 1px;

}

.cursor-pointer {

cursor: pointer;

}

.block {

display: block;

}

.inline-block {

display: inline-block;

}

.flex {

display: flex;

}

.table {

display: table;

}

.hidden {

display: none;

}

.dark .dark:inline {

display: inline;

}

.dark .dark:hidden {

display: none;

}

.flex-col {

flex-direction: column;

}

.items-center {

align-items: center;

}

.justify-end {

justify-content: flex-end;

}

.justify-center {

justify-content: center;

}

.h-36 {

height: 9rem;

}

.h-full {

height: 100%;

}

.h-screen-1/2 {

height: 50vh;

}

.text-sm {

font-size: 0.875rem;
line-height: 1.25rem;

}

.text-lg {

font-size: 1.125rem;
line-height: 1.75rem;

}

.text-xl {

font-size: 1.25rem;
line-height: 1.75rem;

}

.text-2xl {

font-size: 1.5rem;
line-height: 2rem;

}

.text-3xl {

font-size: 1.875rem;
line-height: 2.25rem;

}

.text-4xl {

font-size: 2.25rem;
line-height: 2.5rem;

}

.my-5 {

margin-top: 1.25rem;
margin-bottom: 1.25rem;

}

.mx-auto {

margin-left: auto;
margin-right: auto;

}

.mb-3 {

margin-bottom: 0.75rem;

}

.mb-10 {

margin-bottom: 2.5rem;

}

.mb-24 {

margin-bottom: 6rem;

}

.min-h-screen {

min-height: 100vh;

}

.opacity-60 {

opacity: 0.6;

}

.overflow-hidden {

overflow: hidden;

}

.p-3 {

padding: 0.75rem;

}

.p-5 {

padding: 1.25rem;

}

.py-1 {

padding-top: 0.25rem;
padding-bottom: 0.25rem;

}

.py-4 {

padding-top: 1rem;
padding-bottom: 1rem;

}

.py-5 {

padding-top: 1.25rem;
padding-bottom: 1.25rem;

}

.px-8 {

padding-left: 2rem;
padding-right: 2rem;

}

.pt-2 {

padding-top: 0.5rem;

}

.pr-5 {

padding-right: 1.25rem;

}

.pl-5 {

padding-left: 1.25rem;

}

.pt-32 {

padding-top: 8rem;

}

.fixed {

position: fixed;

}

.absolute {

position: absolute;

}

.relative {

position: relative;

}

.top-0 {

top: 0px;

}

.bottom-0 {

bottom: 0px;

}

.top-8 {

top: 2rem;

}

.right-8 {

right: 2rem;

}

.-right-64 {

right: -16rem;

}

}

.hover:shadow-lg:hover {

--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

}

.text-center {

text-align: center;

}

.text-right {

text-align: right;

}

.text-gray-300 {

--tw-text-opacity: 1;
color: rgba(209, 213, 219, var(--tw-text-opacity));

}

.text-gray-400 {

--tw-text-opacity: 1;
color: rgba(156, 163, 175, var(--tw-text-opacity));

}

.text-gray-500 {

--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));

}

.text-gray-800 {

--tw-text-opacity: 1;
color: rgba(31, 41, 55, var(--tw-text-opacity));

}

.text-primary-700 {

--tw-text-opacity: 1;
color: rgba(67, 56, 202, var(--tw-text-opacity));

}

.text-white {

--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));

}

.hover:text-white:hover {

--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));

}

.dark .dark:text-gray-100 {

--tw-text-opacity: 1;
color: rgba(243, 244, 246, var(--tw-text-opacity));

}

.w-64 {

width: 16rem;

}

.w-2/3 {

width: 66.666667%;

}

.w-1/4 {

width: 25%;

}

.w-3/4 {

width: 75%;

}

.w-4/5 {

width: 80%;

}

.w-full {

width: 100%;

}

.z-0 {

z-index: 0;

}

.z-10 {

z-index: 10;

}

.z-20 {

z-index: 20;

}

.-z-10 {

z-index: -10;

}

.transition-all {

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

}

.duration-500 {

transition-duration: 500ms;

}

@keyframes spin {

to {
  transform: rotate(360deg);
}

}

@keyframes ping {

75%, 100% {
  transform: scale(2);
  opacity: 0;
}

}

@keyframes pulse {

50% {
  opacity: .5;
}

}

@keyframes bounce {

0%, 100% {
  transform: translateY(-25%);
  animation-timing-function: cubic-bezier(0.8,0,1,1);
}

50% {
  transform: none;
  animation-timing-function: cubic-bezier(0,0,0.2,1);
}

}

pre {

background: #222;
color: #ffffff;
padding: 10px;
overflow: auto;
width: 100%;

}

pre code {

width: auto;

}

.highlight .cm {

color: #608B4E;

}

.highlight .kd, .highlight .kc {

color: #3F9CCA;

}

.highlight .nx {

color: #68D0FE;

}

.highlight .k {

color: #C586A1;

}

.highlight .p {

color: #DCD285;

}

.highlight .s2 {

color: #CE743A;

}

.highlight .mi {

color: #B5CEA8;

}

.highlighter-rouge {

margin-bottom: 1.25rem

}

svg:not(:root).svg-inline–fa {

overflow: visible

}

.svg-inline–fa {

display: inline-block;
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em

}

.hexagon {

position: relative;
width: 50px;
height: 28.87px;
background-color: #f9fafb;
margin: 14.43px 0;
border-left: solid 3px #4338ca;
border-right: solid 3px #4338ca;

}

.hexagon:before, .hexagon:after {

content: "";
position: absolute;
z-index: 1;
width: 35.36px;
height: 35.36px;
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 4.3223px;

}

.hexagon:before {

top: -17.6777px;
border-top: solid 4.2426px #4338ca;
border-right: solid 4.2426px #4338ca;

}

.hexagon:after {

bottom: -17.6777px;
border-bottom: solid 4.2426px #4338ca;
border-left: solid 4.2426px #4338ca;

}

.dark .hexagon {

background-color: var(--bg-gray-700);

}

.post h1 {

font-weight: 600;
font-size: 1.875rem;
line-height: 2.25rem;
margin-bottom: 1.25rem;
--tw-text-opacity: 1;
color: rgba(67, 56, 202, var(--tw-text-opacity))

}

.post h2 {

font-weight: 600;
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 1.25rem;
margin-top: 2.5rem;
--tw-text-opacity: 1;
color: rgba(67, 56, 202, var(--tw-text-opacity))

}

.post p {

font-weight: 300;
line-height: 2.25rem;
--tw-text-opacity: 1;
color: rgba(17, 24, 39, var(--tw-text-opacity));
letter-spacing: 0.025em

}

.dark .post p {

font-weight: 300;
line-height: 2.25rem;
--tw-text-opacity: 1;
color: rgba(243, 244, 246, var(--tw-text-opacity));
letter-spacing: 0.025em

}

.row {

display: flex;
flex-wrap: wrap;
margin-left: -0.75rem;
margin-right: -0.75rem

}

.col {

padding-left: 0.75rem;
padding-right: 0.75rem

}

.card {

min-height: 16rem

}

.card.featured {

--tw-bg-opacity: 1;
background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
border-radius: 0.375rem;
display: block;
margin-bottom: 0.75rem;
padding: 1.25rem;
padding-bottom: 12rem;
position: relative;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 300ms;

}

.card.featured h2, .card.featured p, .card.featured span {

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-duration: 300ms

}

.dark .card.featured {

--tw-bg-opacity: 1;
background-color: rgba(31, 41, 55, var(--tw-bg-opacity));

}

.dark .card.featured h2 {

--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))

}

.card.featured:hover {

--tw-bg-opacity: 1;
background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
--tw-scale-x: 0.98;
--tw-scale-y: 0.98;

}

.card.featured:hover h2 {

--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))

}

.card.featured:hover p, .card.featured:hover span {

--tw-text-opacity: 1;
color: rgba(165, 180, 252, var(--tw-text-opacity))

}

.btn {

border-radius: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem

}

.btn-primary span {

--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))

}

.btn-large {

padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 2.5rem;
padding-right: 2.5rem

}

p {

margin-bottom: 1.25rem

}

.tab-content>.tab-pane {

display: none;

}

.tab-content>.active {

display: block;

}

.fade {

transition: opacity .15s linear;

}

.fade:not(.show) {

opacity: 0;

}

.nav-link.active {

background-color: var(--gray-200);
border-left: 3px solid var(--primary-700);
color: var(--primary-700);

}

.experience ul {

list-style-type: disc;
padding-left: 0.75rem;
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity))

}

.experience li {

margin-bottom: 0.75rem

}

.btn-primary {

--tw-bg-opacity: 1;
background-color: rgba(79, 70, 229, var(--tw-bg-opacity))

}

.nav-opened aside {

right: 0;

}

.nav-opened .overlay {

display: block;

}

body {

--white: #fff;
--primary-50: #eef2ff;
--primary-100: #e0e7ff;
--primary-200: #c7d2fe;
--primary-300: #a5b4fc;
--primary-400: #818cf8;
--primary-500: #6366f1;
--primary-600: #4f46e5;
--primary-700: #4338ca;
--primary-800: #3730a3;
--primary-900: #312e81;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;

}

.night-mode-transitioning * {

transition-property: all;
transition-duration: 500ms;

}

@media (min-width: 640px) {

.sm\:right-3 {
  right: 0.75rem;
}

.sm\:left-3 {
  left: 0.75rem;
}

.sm\:w-1\/2 {
  width: 50%;
}

}

@media (min-width: 768px) {

.md\:block {
  display: block;
}

.md\:flex {
  display: flex;
}

.md\:hidden {
  display: none;
}

.md\:flex-row {
  flex-direction: row;
}

.md\:justify-end {
  justify-content: flex-end;
}

.md\:pt-40 {
  padding-top: 10rem;
}

.md\:right-4 {
  right: 1rem;
}

.md\:left-4 {
  left: 1rem;
}

.md\:w-1\/2 {
  width: 50%;
}

.md\:w-1\/3 {
  width: 33.333333%;
}

.md\:w-1\/4 {
  width: 25%;
}

.md\:w-3\/4 {
  width: 75%;
}

}

@media (min-width: 1024px) {

.lg\:right-9 {
  right: 2.25rem;
}

.lg\:left-9 {
  left: 2.25rem;
}

}

@media (min-width: 1280px) { }

@media (min-width: 1536px) { }