@import “colors”; @import “typography”; @import “code”;

{% assign base_color = site.data.manifest.theme_color | default: '#854fee' %}

:root {

/* Primary Colors (same in all themes) */
--mdc-theme-primary: {{ base_color }};
--mdc-theme-primary-variant: #4e20ba;
--mdc-theme-on-secondary: #ffffff;
--mdc-theme-overlay: {{ base_color }}1f;
--mdc-theme-shadow: #0000001f;

/* Background (different in light/dark) */
{% assign background_color = '#f5f5f5' %}
--mdc-theme-background: {{ background_color }};
--mdc-theme-border: {{ background_color }};

/* Surfaces (different in light/dark) */
--mdc-theme-surface: #ffffff;
--mdc-theme-on-surface: #000000;

}

@media (prefers-color-scheme: dark) {

:root {
  /* Background (different in light/dark) */
  {% assign background_color = '#060606' %}
  --mdc-theme-background: {{ background_color }};
  --mdc-theme-border: {{ background_color }};

  /* Surfaces (different in light/dark) */
  --mdc-theme-surface: #121212;
  --mdc-theme-on-surface: #ffffff;
}

}

:root {

/* corner radius of the content card */
--content-corners: 2px;
/* elevation of the content card */
--content-elevation: 4px;
/* padding inside the content card */
--content-padding: 40px;
/* spacing around the content card */
--content-spacing: 24px;
/* spacing between the content columns */
--column-spacing: 40px;
/* spacing around the footnote */
--footnote-spacing-x: 24px;
--footnote-spacing-y: 0px;
--card-radius: 4px;

}

@media (max-width: 840px) {

:root {
  --content-corners: 0px;
  --content-elevation: 0px;
  --content-padding: 24px;
  --content-spacing: 0px;
  --column-spacing: 0px;
  --footnote-spacing-x: 24px;
  --footnote-spacing-y: 24px;
}

}

@media (max-width: 768px) {

:root {
  --content-padding: 16px;
  --footnote-spacing-x: 16px;
  --footnote-spacing-y: 16px;
}

}

html, body {

width: 100%;
height: 100%;
margin: 0;
padding: 0;

}

body {

display: flex;
flex-direction: column;
height: 100vh;

}

*, ::before, ::after {

box-sizing: border-box;
margin: 0;

}

.mdc-list-item {

display: block;
height: auto !important;
max-height: none !important;

}

.mdc-list-item__text {

white-space: normal;
text-align: left;
height: auto;
max-height: none;

}

.mdc-list-item__primary-text {

white-space: normal;

}

.mdc-list-item__secondary-text {

font-weight: 200;
white-space: normal;

}

.mdc-top-app-bar {

-moz-box-shadow: 0px 1px 4px var(--mdc-theme-shadow);
-webkit-box-shadow: 0px 1px 4px var(--mdc-theme-shadow);
box-shadow: 0px 1px 4px var(--mdc-theme-shadow);
z-index: 999;

}

.main-content {

align-items: center;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
left: 0;
right: 0;
overflow-x: hidden;
width: 100%;

}

.main-content article {

border-radius: var(--content-corners);
-moz-box-shadow: 0px 0px var(--content-elevation) var(--mdc-theme-shadow);
-webkit-box-shadow: 0px 0px var(--content-elevation) var(--mdc-theme-shadow);
box-shadow: 0px 0px var(--content-elevation) var(--mdc-theme-shadow);
margin: var(--content-spacing);
padding: var(--content-padding);
width: calc(100% - var(--content-spacing));

}

.mdc-card {

box-shadow: 2px 2px 2px var(--mdc-theme-shadow);
border-color: var(--mdc-theme-border) !important;
border-style: solid !important;
border-width: 1px !important;
border-radius: 4px;

}

.mdc-card–outlined {

box-shadow: 0 0 0;

}

.mdc-card__content {

padding: 16px;

}

.mdc-button–outlined, .mdc-button–outlined .mdc-button__ripple, .mdc-button–unelevated, .mdc-button–unelevated .mdc-button__ripple {

border-radius: 24px !important;

}

.col-md-8 {

float: left;
width: 67%;
padding-right: var(--column-spacing);

}

.col-md-4 {

float: left;
width: 33%;

}

@media (max-width: 840px) {

.col-md-8 {
  float: none;
  width: 100%;
}

.col-md-4 {
  float: none;
  width: 100%;
}

}

.main-content article>header {}

.main-content article section {

margin-bottom: 32px;

}

.main-content article aside {}

.main-content .footnote {

font-size: 11pt;
padding: var(--footnote-spacing-y) var(--footnote-spacing-x);
width: 100%;

}

footer {

width: 100%;

}

.main-content .footer {

font-size: 12pt;
padding: 24px;
width: 100%;

}

.main-content .footer .mdc-list-divider {

margin-top: 16px;
margin-bottom: 16px;

}

.main-content .footer ul.sitemap {

margin-top: 16px;

}

.main-content .footer ul.sitemap>li {

display: inline-block;
margin-right: 24px;

}

@media (max-width: 768px) {

.main-content .footer ul.sitemap>li {
  display: block;
  margin-right: 0px;
  min-height: 48px;
}

}

/* Style the list */ .breadcrumbs {

list-style: none;

}

/* Display list items side by side */ .breadcrumbs .breadcrumb-item {

display: inline-block;
text-transform: capitalize;

}

/* Add a slash symbol (/) before/behind each list item */ .breadcrumbs .breadcrumb-item+.breadcrumb-item:before {

content: "⟩";
padding: 0 8px;

}

.ml-15 {

margin-left: 15px;

}

/******************************************************************************/ /* UI Elements */ /******************************************************************************/ hr {

opacity: 0.5;

}

hr.mdc-list-divider {

margin: 8px;

}

hr.small {

max-width: 100px

}

ul, .list {

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

}

input {

background-color: var(--mdc-theme-background);
border: 1px solid var(--mdc-theme-border);
border-radius: 4px;
color: var(--mdc-theme-on-surface);
padding: 8px;
width: 100%;

}

input:focus {

outline-style: none;
border: 1px solid var(--mdc-theme-primary);

}

img {

max-width: 100%;

}

/******************************************************************************/ /* Main Title Section */ /******************************************************************************/ .about-description {

width: 100%;
margin-top: var(--content-padding);
margin-bottom: var(--content-padding);

}

/******************************************************************************/ /* Home Banner Section */ /******************************************************************************/ .about-section {

position: relative;

}

.about-section .col-md-8 {

vertical-align: middle;
align-self: center;

}

.about-section .about-summary {

text-align: left;

}

.about-section .about-summary .greeting {

font-size: 32px;
line-height: 32px;
margin-top: var(--content-padding);
margin-bottom: 0;

}

.about-section .about-summary .introduction {

font-size: 56px;
line-height: 56px;
margin-bottom: var(--content-padding);

}

@media (max-width: 840px) {

.about-section {
  margin-top: 0;
}

.about-section .about-summary {
  margin-top: 150px;
}

}

/******************************************************************************/ /* Services Section */ /******************************************************************************/ .service-item {

padding: 16px;
text-align: center;
cursor: pointer;

}

.service-item>.material-icons {

font-size: 48px;
margin-bottom: 8px;
color: var(--mdc-theme-primary);

}

.service-item h2 {

font-size: 18px;
margin-bottom: 8px;
text-transform: uppercase;
font-weight: normal;

}

.service-item p {

font-size: 16px;
margin-bottom: 0;

}

.service-item .mdc-button__label {

text-transform: lowercase;

}

/******************************************************************************/ /* Expreience Section */ /******************************************************************************/ .experience-item {

display: inline-block;
position: relative;
width: 100%;
margin-bottom: 8px;

}

.experience-item .content {

float: left;
width: calc(100% - 32px);

}

.experience-item .content .details {

border: 0.5px solid var(--mdc-theme-border);
border-radius: 4px;
padding: 16px;
margin-top: 8px;

}

.experience-item .date {

color: var(--mdc-theme-primary);

}

.experience-item .name {

margin: 0px;

}

.experience-item .timeline {

float: left;
width: 24px;
margin-right: 8px;
text-align: center;

}

.experience-item .timeline .dot {

color: var(--mdc-theme-primary-variant);
font-size: 24px;
position: relative;
z-index: 2;

}

.experience-item .timeline .bar {

background-image: linear-gradient(to bottom, var(--mdc-theme-primary-variant) 0%, var(--mdc-theme-primary-variant) 100%), radial-gradient(circle at top left, var(--mdc-theme-primary-variant), var(--mdc-theme-primary-variant));
width: 2px;
position: absolute;
top: 20px;
bottom: -20px;
left: 11px;
z-index: 1;

}

.experience-item .timeline .bar-expanded {

background-color: var(--mdc-theme-primary-variant);
width: 28px;
height: 2px;
position: absolute;
top: 18px;
left: -18px;
z-index: 100;

}

/******************************************************************************/ /* Projects Section */ /******************************************************************************/ .portfolio {

width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-height: 100vh;

}

.portfolio .filters {

display: inline-block;

}

.portfolio .filters li {

font-size: 10px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;

}

.portfolio .grid {

margin: auto;

}

.portfolio .grid .portfolio-item {

display: inline-block;
width: 128px;
border-radius: var(--card-radius);
margin: 8px;

}

.portfolio .grid .portfolio-item .project-icon {

background-color: var(--mdc-theme-background);

}

.portfolio .grid .portfolio-item .project-icon .overlay {

position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;

}

.portfolio .grid .portfolio-item .project-icon:focus .overlay, .portfolio .grid .portfolio-item .project-icon:hover .overlay {

background-color: var(--mdc-theme-overlay);

}

.portfolio .grid .mdc-card {

border-radius: 16px;

}

.portfolio .grid .portfolio-item .project-details {

color: var(--mdc-theme-on-surface);
padding: 0px;
text-align: center;

}

.portfolio .grid .portfolio-item .project-details strong {

margin-top: 4px;
font-size: 11pt;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

}

.portfolio .grid .portfolio-item .project-details small {

font-size: 10pt;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
opacity: 0.5;
overflow: hidden;
text-overflow: ellipsis;

}

.bottom-navigation {

background: var(--mdc-theme-surface);
-moz-box-shadow: 0px -1px 2px var(--mdc-theme-shadow);
-webkit-box-shadow: 0px -1px 2px var(--mdc-theme-shadow);
box-shadow: 0px -1px 2px var(--mdc-theme-shadow);
display: none;
position: fixed;
width: 100%;
height: 48px;
bottom: 0;
left: 0;
right: 0;

}

.hide-when-small {

display: block;

}

@media (max-width: 1024px) {

.portfolio .grid .portfolio-item {
  width: 112px;
}

}

@media (max-width: 930px) {

.portfolio .grid .portfolio-item {
  width: 96px;
}

}

@media (max-width: 840px) {

.portfolio .subtitle,
.portfolio hr.small {
  display: none;
}

.portfolio .grid {
  margin: auto;
  margin-bottom: 0;
}

.portfolio .grid .portfolio-item {
  width: 88px;
}

.bottom-navigation {
  display: block;
}

.hide-when-small {
  display: none;
}

.portfolio > section {
  margin-bottom: 0 !important;
}

}

@media (max-width: 360px) {

.portfolio .grid .portfolio-item {
  width: 80px;
}

}

@media (max-width: 320px) {

.portfolio .grid .portfolio-item {
  width: 72px;
}

}

@media (max-width: 296px) {

.portfolio .grid .portfolio-item {
  width: 64px;
}

}

@media (max-width: 272px) {

.portfolio .grid .portfolio-item {
  width: 56px;
}

}

@media (max-width: 840px) {

.about-section {
  min-height: 300px;
}

.about-section .about-summary {
  margin-top: 0;
}

.about-section .about-summary h3 {
  font-size: 30px;
}

.about-section .about-summary p br {
  display: none;
}

.about-section .about-summary h3 span {
  line-height: 45px;
  padding-bottom: 0;
  padding-top: 0;
}

}

@media (max-width: 600px) {

.about-section .about-summary h2 {
  font-size: 28px;
  line-height: 38px;
}

.about-section {
  min-height: 450px;
}

.about-section .about-summary img {
  display: none;
}

.about-section .about-summary h5 {
  margin-top: 0;
}

}

@media (max-width: 320px) {

.about-section .about-summary {
  padding: 30px 15px;
  margin-top: 0;
}

.about-section .about-summary h3 {
  font-size: 24px;
}

}

/* embed responsively (YouTube vidoes) */ .embed-container {

position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
width: 100%;
border-radius: 8px;

}

.embed-container iframe, .embed-container object, .embed-container embed {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

.callout {

font-size: 24px;
font-weight: bolder;
text-transform: uppercase;

}

.highlighted {

background-color: var(--mdc-theme-overlay);
border-radius: 4px;

}

.mdc-drawer .mdc-list-item {

padding: 4px 8px;

}

.mdc-drawer .mdc-list-item–activated {

border-radius: 2px 16px 16px 2px;

}

.page-cover {

position: relative;
border-radius: 8px;
width: 100%;
height: 320px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: var(--content-padding);

}

.page-cover::after {

content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: linear-gradient(#0000, #0008);
z-index: 1;

}

.align-bottom {

width: 100%;
padding: 8px 8px 0 8px;
position: absolute;
bottom: -32px;
left: 0;
z-index: 2;

}

.align-bottom .project-title, .align-bottom .project-type, .align-bottom .mdc-icon-button {

color: #fff !important;

}

.align-bottom .mdc-icon-button:hover, .align-bottom .mdc-icon-button:focus {

color: var(--mdc-theme-background) !important;

}

.project-summary {

display: inline-block;

}

.project-summary>* {

float: left;

}

.project-logo {

border-radius: 8px;
margin-right: 16px;
height: 80px;
width: 80px;
font-size: 80px;
line-height: 80px;

}

.project-logo-featured {

border-radius: 8px;
margin-right: 12px;
height: 64px;
width: 64px;
font-size: 64px;
line-height: 64px;

}

.project-title {

padding: 0;
margin: 0;

}

.project-tags {

display: block;
margin-bottom: 4px;

}

.project-tag {

display: inline-block;
background-color: var(--mdc-theme-background);
border-radius: 16px;
color: var(--mdc-theme-on-surface);
font-size: 10px;
font-weight: bold;
padding: 2px 8px;
text-transform: uppercase;

}

.project-tag .material-icons {

font-size: 10px;
margin-right: 4px;
vertical-align: middle;

}

.project-type, .project-type * {

color: gray;
font-size: 14px;
font-weight: bold;
vertical-align: middle;

}

.project-portfolio-img {

border-radius: 8px;
width: 100%;

}

.mdc-data-table {

width: 100%;
max-width: 100%;

}

pwa-install {

--install-button-color: var(--mdc-theme-primary);

}

pwa-install::part(openButton) {

background-color: #0000;
width: 40px;
height: 40px;
border-radius: 24px;

}

pwa-install * {

color: var(--mdc-theme-on-surface) !important;
vertical-align: middle;

}

pwa-install:hover * {

color: var(--mdc-theme-primary) !important;

}

.mdc-snackbar {

z-index: 99999;

}

.mdc-snackbar__surface::before {

content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

}

/* Print Styles */ @media print {

.mdc-top-app-bar,
.breadcrumbs,
footer {
  display: none;
}

.main-content {
  margin: 0;
  padding: 0;
}

article section {
  page-break-inside: avoid;
}

}

ul.downloads {

list-style:none;
height:40px;
padding:0;
background: #f4f4f4;
border-radius:5px;
border:1px solid #e0e0e0;
width:270px;

}

.downloads li {

width:89px;
float:left;
border-right:1px solid #e0e0e0;
height:40px;

}

.downloads li:first-child a {

border-radius:5px 0 0 5px;

}

.downloads li:last-child a {

border-radius:0 5px 5px 0;

}

.downloads a {

line-height:1;
font-size:11px;
color:#676767;
display:block;
text-align:center;
padding-top:6px;
height:34px;

}

.downloads a:hover, .downloads a:focus {

color:#675C5C;
font-weight:bold;

}

.downloads ul a:active {

background-color:#f0f0f0;

}

.downloads li + li + li {

border-right:none;
width:89px;

}

.downloads a strong {

font-size:14px;
display:block;
color:#222;

}

@media print, screen and (max-width: 480px) {

.downloads {
  width:99%;
}

.downloads li, .downloads li + li + li {
  width:33%;
}

}

/* Blog styles */ .post-container {

border: 1px solid var(--mdc-theme-overlay);
border-radius: 8px;
padding: 8px;
width: 100%;
min-height: 240px;

}

.post {

display: flex;
width: 100%;

}

.post-container:nth-of-type(odd) .post {

flex-direction: row-reverse;

}

.post-img {

margin-right: 8px;
border-radius: 8px;
width: 50%;
min-height: 240px;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;

}

.post-container:nth-of-type(odd) .post .post-img {

margin-left: 8px;
margin-right: 0;
flex-direction: row-reverse;

}

.post-details {

width: 50%;
text-align: center;

}

.post-date {

font-size: 10pt !important;
text-transform: uppercase;

}

.post-title {

font-size: 16pt;
font-weight: bold;
margin: 8px 0;

}

.post-excerpt {

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

}

@media (max-width: 840px) {

.post {
  display: block;
}

.post-img {
  margin-left: 0 !important;
  margin-right: 0;
  width: 100%;
}

.post-details {
  width: 100%;
}

}