@charset "UTF-8"; /*! * Start Bootstrap - Grayscale v7.0.3 (https://startbootstrap.com/theme/grayscale) * Copyright 2013-2021 Start Bootstrap * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-grayscale/blob/master/LICENSE) */ /*! * Bootstrap v5.1.0 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #7464a1; --bs-pink: #d63384; --bs-red: #a16468; --bs-orange: #fd7e14; --bs-yellow: #e4c662; --bs-green: #67c29c; --bs-teal: #64a19d; --bs-cyan: #1cabc4; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; --bs-primary: #64a19d; --bs-secondary: #7464a1; --bs-success: #67c29c; --bs-info: #1cabc4; --bs-warning: #e4c662; --bs-danger: #a16468; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-black: #000; --bs-white: #fff; --bs-primary-rgb: 100, 161, 157; --bs-secondary-rgb: 116, 100, 161; --bs-success-rgb: 103, 194, 156; --bs-info-rgb: 28, 171, 196; --bs-warning-rgb: 228, 198, 98; --bs-danger-rgb: 161, 100, 104; --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 33, 37, 41; --bs-black-rgb: 0, 0, 0; --bs-white-rgb: 255, 255, 255; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; --bs-body-rgb: 33, 37, 41; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: Nunito, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #212529; --bs-body-bg: #fff; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); color: var(--bs-body-color); text-align: var(--bs-body-text-align); background-color: var(--bs-body-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } h3, h2, h1 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; } h1 { font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1 { font-size: 2.5rem; } } h2 { font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2 { font-size: 2rem; } } h3 { font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3 { font-size: 1.75rem; } } p { margin-top: 0; margin-bottom: 1rem; } .small { font-size: 0.875em; } a { color: #64a19d; text-decoration: underline; } a:hover { color: #50817e; } img { vertical-align: middle; } button { border-radius: 0; } button:focus:not(:focus-visible) { outline: 0; } button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button { text-transform: none; } button, [type=button] { -webkit-appearance: button; } button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) { cursor: pointer; } ::-moz-focus-inner { padding: 0; border-style: none; } ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field { padding: 0; } ::-webkit-inner-spin-button { height: auto; } /* rtl:raw: [type="tel"], [type="url"], [type="email"], [type="number"] { direction: ltr; } */ ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-color-swatch-wrapper { padding: 0; } ::-webkit-file-upload-button { font: inherit; } ::file-selector-button { font: inherit; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } .display-3 { font-size: calc(1.525rem + 3.3vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-3 { font-size: 4rem; } } .display-5 { font-size: calc(1.425rem + 2.1vw); font-weight: 300; line-height: 1.2; } @media (min-width: 1200px) { .display-5 { font-size: 3rem; } } .img-fluid { max-width: 100%; height: auto; } .container { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1320px; } } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .g-0, .gx-0 { --bs-gutter-x: 0; } .g-0, gy-0 { --bs-gutter-y: 0; } .gx-4 { --bs-gutter-x: 1.5rem; } @media (min-width: 768px) { .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } } @media (min-width: 992px) { .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .gx-lg-5 { --bs-gutter-x: 3rem; } } .form-control[type=file]:not(:disabled):not([readonly]) { cursor: pointer; } .form-control::file-selector-button { padding: 0.375rem 0.75rem; margin: -0.375rem -0.75rem; -webkit-margin-end: 0.75rem; margin-inline-end: 0.75rem; color: #212529; background-color: #e9ecef; pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; border-inline-end-width: 1px; border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control::file-selector-button { transition: none; } } .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: #dde0e3; } .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: #dde0e3; } .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: #dde0e3; } .form-control-sm::file-selector-button { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; -webkit-margin-end: 0.5rem; margin-inline-end: 0.5rem; } .form-control-lg::file-selector-button { padding: 0.5rem 1rem; margin: -0.5rem -1rem; -webkit-margin-end: 1rem; margin-inline-end: 1rem; } .form-control-color:not(:disabled):not([readonly]) { cursor: pointer; } .form-floating > .form-control:not(:-moz-placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-control:not(:-ms-input-placeholder) { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-floating > .form-control:not(:-ms-input-placeholder) ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .btn { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn:hover { color: #212529; } .btn:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgba(100, 161, 157, 0.25); } .btn:disabled { pointer-events: none; opacity: 0.65; } .btn-primary { color: #fff; background-color: #64a19d; border-color: #64a19d; } .btn-primary:hover { color: #fff; background-color: #558985; border-color: #50817e; } .btn-primary:focus { color: #fff; background-color: #558985; border-color: #50817e; box-shadow: 0 0 0 0.25rem rgba(123, 175, 172, 0.5); } .btn-primary:active { color: #fff; background-color: #50817e; border-color: #4b7976; } .btn-primary:active:focus { box-shadow: 0 0 0 0.25rem rgba(123, 175, 172, 0.5); } .btn-primary:disabled { color: #fff; background-color: #64a19d; border-color: #64a19d; } .btn-lg { padding: 1.75rem 2.5rem !important; font-size: 1.25rem !important; border-radius: 0.3rem; } .btn-sm { padding: 0.75rem 1.25rem !important; border-radius: 0.2rem; } .dropdown { position: relative; } .dropdown-toggle { white-space: nowrap; } .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .dropdown-menu { position: absolute; z-index: 1000; display: none; min-width: 10rem; padding: 0.5rem 0; margin: 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } .dropdown-item { display: block; width: 100%; padding: 0.25rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; } .dropdown-item:hover, .dropdown-item:focus { color: #1e2125; background-color: #e9ecef; } .dropdown-item:active { color: #fff; text-decoration: none; background-color: #64a19d; } .dropdown-item:disabled { color: #adb5bd; pointer-events: none; background-color: transparent; } .btn-group { position: relative; display: inline-flex; vertical-align: middle; } .btn-group > .btn { position: relative; flex: 1 1 auto; } .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active { z-index: 1; } .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar > .container { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; } .navbar-brand { padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; text-decoration: none; white-space: nowrap; } @media (min-width: 992px) { .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; } } .navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); } .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: rgba(0, 0, 0, 0.9); } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; } .card-body { flex: 1 1 auto; padding: 1rem 1rem; } .card-title { margin-bottom: 0.5rem; } .badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; } /* rtl:begin:ignore */ /* rtl:end:ignore */ /* rtl:options: { "autoRename": true, "stringMap":[ { "name" : "prev-next", "search" : "prev", "replace" : "next" } ] } */ .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .d-grid { display: grid !important; } .d-flex { display: flex !important; } .position-relative { position: relative !important; } @media (min-width: 768px) { .position-absolute-md { position: absolute !important; } } .bottom-0 { bottom: 0 !important; } .end-0 { right: 0 !important; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .gap-2 { gap: 0.5rem !important; } .justify-content-center { justify-content: center !important; } .align-items-center { align-items: center !important; } .mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .pt-0 { padding-top: 0 !important; } .pt-5 { padding-top: 3rem !important; } .p-5 { padding: 3rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .text-center { text-align: center !important; } .text-uppercase { text-transform: uppercase !important; } /* rtl:begin:remove */ /* rtl:end:remove */ .text-black { --bs-text-opacity: 1; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } .text-white { --bs-text-opacity: 1; color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; } .text-white-50 { --bs-text-opacity: 1; color: rgba(255, 255, 255, 0.5) !important; } .text-white-80 { --bs-text-opacity: 1; color: rgba(255, 255, 255, 0.8) !important; } .bg-success { --bs-bg-opacity: 1; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; } .bg-light { --bs-bg-opacity: 1; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } .bg-black { --bs-bg-opacity: 1; background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; } .rounded-start { border-bottom-left-radius: 0.25rem !important; border-top-left-radius: 0.25rem !important; } @media (min-width: 576px) { .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } } @media (min-width: 768px) { .mb-md-0 { margin-bottom: 0 !important; } .d-md-inline-block { display: inline-block !important; } .me-md-2 { margin-right: 0.5rem !important; } .mb-md-2 { margin-bottom: 0.5rem !important; } } @media (min-width: 992px) { .order-lg-first { order: -1 !important; } .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; } .px-lg-5 { padding-right: 3rem !important; padding-left: 3rem !important; } } html { scroll-padding-top: calc(4.5rem - 1px); } body { letter-spacing: 0.0625em; } #mainNav { min-height: 3.5rem; background-color: #fff; } #mainNav .navbar-brand { color: #000; font-weight: 700; padding: 0.9rem 0; } @media (min-width: 992px) { #mainNav { padding-top: 0; padding-bottom: 0; border-bottom: none; } #mainNav .navbar-brand { padding: 0.5rem 0; color: #000; } } .btn { box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important; padding: 1.25rem 2rem; font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 100%; text-transform: uppercase; letter-spacing: 0.15rem; border: 0; } .masthead { position: relative; width: 100%; height: auto; min-height: 35rem; padding: 15rem 0; background: linear-gradient(rgba(0,77,255,0.8), rgba(0,77,255,0.5)); background-position: center; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; } .masthead h1 { font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 2rem; line-height: 2.5rem; letter-spacing: 0.2rem; background: linear-gradient( #fd004c 16.7%, #fe9000 16.7%, #fe9000 33.4%, #fff020 33.4%, #fff020 50.1%, #3edf4b 50.1%, #3edf4b 66.8%, #3363ff 66.8%, #3363ff 83.5%, #b102b7 83.5% ); -webkit-text-stroke: 0.02em #fff; /*background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));*/ -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; animation: rainbow 100s linear infinite; } @keyframes rainbow{ 100%{ background-position: 0 30em; } } .masthead h2 { max-width: 30rem; font-size: 1rem; } @media (min-width: 768px) { .masthead h1 { font-size: 4rem; line-height: 4rem; } } @media (min-width: 992px) { .masthead { height: 100vh; padding: 0; } .masthead h1 { font-size: 6.5rem; line-height: 6.5rem; letter-spacing: 0.8rem; } .masthead h2 { max-width: 40rem; font-size: 1.25rem; } } .about-section { padding-top: 2rem; padding-bottom: 2.5rem; background: linear-gradient(rgba(0,77,255,0.5), rgba(var(--bs-light-rgb))); z-index: 1; } .about-section-text { /* Hack to not darken text */ z-index: 2; } .projects-section { padding: 10rem 0; } .contact-section { padding-top: 5rem; } .contact-section .social a { text-align: center; height: 3rem; width: 3rem; background: rgba(255, 255, 255, 0.1); border-radius: 100%; line-height: 3rem; color: rgba(255, 255, 255, 0.3); } .contact-section .social a:hover { color: rgba(255, 255, 255, 0.5); } .contact-section .social a:active { color: #fff; } .footer { padding: 5rem 0; } .dropdown { position: relative; } .dropdown-toggle { padding: 0.375rem 0.75rem; background-color: white; color: black; box-shadow: none !important; text-transform: none; } .dropdown-toggle::after { display: inline-block; width: 0; height: 0; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .dropdown-toggle:hover { border-color: black; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1030; display: none; float: left; min-width: 10rem; padding: 0.5rem 0; margin: 0 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #FFFFFF; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } .dropdown-item { display: block; width: 100%; padding: 0.25rem 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background: none; border: 0; } .dropdown-item:focus, .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #F8F9FA; } .dropdown-item:active { color: #FFFFFF; text-decoration: none; background-color: #7D4698; } .dropdown-item:disabled { color: #848E97; background-color: transparent; } .dropdown:hover .dropdown-menu { display: block; overflow-y: scroll; max-height: 350px; }