/*! 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;
}
/**
-
Correct the line height in all browsers.
-
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
¶ ↑
*/
/**
-
Add the correct height in Firefox.
-
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;
}
/**
-
Improve consistency of default fonts in all browsers. (github.com/sindresorhus/modern-normalize/issues/3)
-
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
¶ ↑
*/
/**
-
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)
-
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
¶ ↑
*/
/**
-
Change the font styles in all browsers.
-
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.
-
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. */
/**
-
Correct the odd appearance in Chrome and Safari.
-
Correct the outline style in Safari.
*/
/** Remove the inner padding in Chrome and Safari on macOS. */
/**
-
Correct the inability to style clickable types in iOS and Safari.
-
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;
}
-
{ –tw-shadow: 0 0 #0000;
}
.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);
}
-
{ –tw-ring-inset: var(–tw-empty,/*!*/ /*!*/); –tw-ring-offset-width: 0px; –tw-ring-offset-color: fff; –tw-ring-color: rgba(59, 130, 246, 0.5); –tw-ring-offset-shadow: 0 0 #0000; –tw-ring-shadow: 0 0 #0000;
}
.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) { }