:root {
  --selection-color: white;
  --selection-bg-color: #000000fe;

  /* --main-max-width-big: 2560px; */
  --main-max-width-big: 1366px;
  --main-max-width-small: 1366px;
  /* --main-max-width-big: 1024px; */
  --main-bg-color: #ffffff;
  --main-bg-color-trans: #ffffffca;
  --main-text-color: #000000;
  --main-text-color-inactive: #757575;
  --main-text-size-default: 18px;
  --main-sub-text-color: #757575;
  --main-min-height-pre: 100vh;
  --main-min-height: calc(var(--main-min-height-pre) - var(--navbar-height) - var(--card-container-margin-bottom));

  --header-max-height: 75vh;
  --header-height-pre: 320px;
  --header-height: min(var(--header-height-pre), var(--header-max-height));
  --header-bg-color: var(--card-bg-color-hover);
  --header-text-shadow-color: rgba(0, 0, 0, 0.4);

  --gradient-color-1: #c3e4ff; 
  --gradient-color-2: #6ec3f4; 
  --gradient-color-3: #eae2ff;  
  --gradient-color-4: #b9beff;
  --gradient-bg-color: #c9d8ff;

  --body-padding: 48px; /* 16px */

  --navbar-item-line-height: 16px;
  --navbar-item-special-bg: linear-gradient(to right, #ca8a04, #ea580c, #dc2626);
  --navbar-height: var(--navbar-item-line-height);

  --footer-vertical-padding: 48px;
  --footer-horizontal-padding: 96px;
  --footer-border-color: rgb(0 0 0 / 10%);
  --footer-text-gap: 6px;

  /* --h1-text-size: 54pt;
  --h2-text-size: 46pt;
  --h3-text-size: 38pt;
  --h4-text-size: 30pt;
  --h5-text-size: 22pt;
  --h6-text-size: 14pt; */
  --h1-text-size: 4em;
  --h2-text-size: 3.5em;
  --h3-text-size: 3em;
  --h4-text-size: 2.5em;
  --h5-text-size: 2em;
  --h6-text-size: 1.5em;

  --section-title-margin-bottom: 28px;

  --card-container-margin-top: 8px;
  --card-container-margin-bottom: 64px;

  --card-bg-color: rgb(228, 232, 238);
  --card-bg-color-hover: rgb(217, 220, 225);
  --card-bg-color-down: rgb(217, 220, 225);
  --card-text-color: var(--main-text-color);
  --card-sub-text-color: var(--main-sub-text-color);
  --card-width: 236px;
  --card-min-width: 160px;
  --card-max-width: 320px;
  --card-padding: 6px;
  --card-gap: 28px;
  --card-font-size: 12pt;
  --card-icon-size: 24px;
  --card-icon-margin-right: 8px;

  --project-card-bg-color: var(--card-bg-color);
  --project-card-bg-color-hover: var(--card-bg-color-hover);
  --project-card-bg-color-down: var(--card-bg-color-down);
  --project-card-min-width: 160px;
  --project-card-max-width: 384px;
  --project-card-padding: 28px;
}

@supports (height: 1dvh) {
  #globalnav.globalnav-with-flyout-open .globalnav-content {
      --header-max-height: 100svh;
      --main-min-height-pre: 100lvh;
  }
}

@media(prefers-color-scheme: dark) {
  :root {
    --selection-color: black;
    --selection-bg-color: #fffffffe;

    --header-bg-color: rgb(0, 0, 0);
    --header-text-shadow-color: rgba(255, 255, 255, 0.4);

    --gradient-color-1: #043D5D;
    --gradient-color-2: #032E46;
    --gradient-color-3: #23B684;
    --gradient-color-4: #0F595E;
    --gradient-bg-color: #13746c;

    --main-bg-color: #000000;
    --main-bg-color-trans: #00000099;
    /* --main-bg-color-trans: #1d1d1fb3; */
    --main-text-color: #ffffff;
    /* --main-text-color-inactive: #aaaaaa; */
    --main-text-color-inactive: #bfbfbf;
    --main-sub-text-color: #a0a0a0;

    --footer-border-color: rgb(255 255 255 / 16%);

    --card-bg-color: #303134;
    --card-bg-color-hover: rgba(232, 234, 237, .12);
    --card-bg-color-down: rgba(255, 255, 255, .16);
  }
}

::-moz-selection { /* Firefox */
  color: var(--selection-color);
  background: var(--selection-bg-color);
}

::selection {
  color: var(--selection-color);
  background: var(--selection-bg-color);
}

html {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  
  /* font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; */
  /* font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; */
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  /* font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; */
  /* font-feature-settings: normal; */
  -webkit-font-smoothing: antialiased;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
}

body {
  height: auto;
  margin: 0;

  /* padding-top: calc(var(--nav-bar-height) + var(--body-padding));
  padding-left: var(--body-padding);
  padding-right: var(--body-padding); */

  background-color: var(--main-bg-color);
}

a {
  color: var(--main-text-color);
  text-decoration: underline;
}

a:hover {
  color: var(--main-text-color);
}

a:visited {
  color: var(--main-text-color);
}

header {
  height: var(--header-height);

  display: flex;
  -webkit-align-items: center;
  align-items: center;     /* Vertical center alignment */
  -webkit-justify-content: center;
  justify-content: center; /* Horizontal center alignment */

  /* overflow: hidden; */

  background-color: var(--header-bg-color);

  text-align: center;
  text-shadow: 0px 0px 15px var(--header-text-shadow-color);
}

.header-title {
  position: absolute;
  margin: auto;
  max-width: calc(100% - (16px + 16px));

  padding: 16px;

  /* margin-left: env(safe-area-inset-left);
  margin-right: env(safe-area-inset-right); */

  font-weight: 900;
}

.gradient-bg {
  width: 100%;
  height: 100%;
  
  background: var(--gradient-bg-color);
}

@keyframes chevron-slide-in-hover {
  0% {
      opacity: 0;
      transform: translate(-4px)
  }

  to {
      opacity: 1;
      transform: translate(0)
  }
}

@keyframes chevron-hover-off {
  0% {
      opacity: 1;
      transform: scale(1)
  }

  to {
      opacity: 0;
      transform: scale(.8)
  }
}

.navbar {
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 8;

  /* background-color: var(--main-bg-color); */

  justify-content: center;
  padding: 12px;

  transition: border .32s cubic-bezier(.4, 0, .6, 1);
  border-bottom: 1px solid var(--main-bg-color);
  
  margin-bottom: var(--card-container-margin-bottom);
}

.navbar.pinned {
  border-bottom: 1px solid var(--footer-border-color);
}

.navbar-btn-group {
  /*background-color: var(--main-bg-color);*/ /* Overdraw but whatever */
  position: relative;
  z-index: 2;
}

.navbar-btn-menu {
  width: var(--navbar-height);
  height: var(--navbar-height);

  background: 0 0;
  /* background-color: var(--main-bg-color); */
  color: var(--main-text-color);
  cursor: pointer;
  display: none;
  border: 0;
  margin-left: auto;
  padding: 0;
  position: relative;
}

.navbar-btn-menu-icon {
  fill: var(--main-text-color);
  vertical-align: middle;
}

.navbar-btn-menu-icon[aria-hidden='true'] {
  display: none;
}

.navbar-list {
  max-width: var(--main-max-width-small);
  align-items: center;
  box-shadow: none;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-list-div {
  background: var(--main-sub-text-color);
  height: var(--navbar-item-line-height);
  width: 2px;
  border-radius: 9px;
}

.navbar-item {
  font-size: 12pt;
  line-height: var(--navbar-item-line-height);
  margin-bottom: 0;
  margin-right: 20px;
}

.navbar-item:last-child {
  margin-right: 0;
}

.navbar-item a {
  color: var(--main-text-color-inactive);
  display: inline;
  text-decoration: none;
  transition: color .16s cubic-bezier(.4, 0, .6, 1);
  line-height: 24px; /* Must match right arrow SVG size */
}

.navbar-item a svg {
  display: none;
}

.navbar-item a:hover, .navbar-item a[aria-current=page] {
  color: var(--main-text-color);
}

/* .navbar-item-special:hover {
    transform: scale(1.05);
} */

/* .navbar-item-special {
  transition: transform 0.3s ease;
} */

/* .navbar-item-special a {
  color: var(--main-text-color);
} */

/* .navbar-item-special {
  transition: background 0.3s ease;
} */

.navbar-item-special div {
  position: relative;
  transition: background 0.3s ease;
}

.navbar-item-special div div {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: var(--navbar-item-special-bg);
  --navbar-item-special-pos: 0px;
  background-position: var(--navbar-item-special-pos);
  border-radius: 13px;
  opacity: 0.8;
  filter: blur(8px);
  margin: -8px;
  z-index: -1;
  transition: background 0.3s ease;
}

/* .navbar-item-special div div:hover {
  transition: background 0.3s ease;
} */

.navbar-item-special:hover {
  transition: 0.3s ease;
  /* background: linear-gradient(to right, #ea580c, #dc2626, #ca8a04); */
  color: red;
  /* --navbar-item-special-bg: linear-gradient(to right, #ea580c, #dc2626, #ca8a04); */
  /* --navbar-item-special-bg: linear-gradient(to right, #000, #000, #000); */
  --navbar-item-special-pos: 100px;
    /* transform: translateY(-5px); */
    /* box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1),
                0 12px 24px rgba(0, 122, 255, 0.3),
                0 8px 16px rgba(88, 86, 214, 0.4); */
}

.navbar-item-special div a {
  border-radius: 10px;
  background-color: var(--main-bg-color);
  padding: 8px;
  margin: -5px;
  /* color: #cbd5e1; */

  overflow: hidden;
  white-space: nowrap;
}

main {
  box-sizing: border-box;
  min-height: var(--main-min-height);
  max-width: var(--main-max-width-big);
  /* width: auto; */
  width: 100%;
  height: 100%;
  
  margin-left: auto;
  margin-right: auto;

  /* padding-top: env(safe-area-inset-top); */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: calc(env(safe-area-inset-left) + var(--body-padding));
  padding-right: calc(env(safe-area-inset-right) + var(--body-padding));

  font-size: var(--main-text-size-default);
}

a {
  color: var(--main-text-color);
}

h1 {
  /* color: var(--main-text-color); */
  font-size: var(--h1-text-size);
  letter-spacing: 0.5px;
}

h2 {
  /* color: var(--main-text-color); */
  font-size: var(--h2-text-size);
  letter-spacing: 0.25px;
  margin-block-end: 0;
}

h3 {
  /* color: var(--main-text-color); */
  font-size: var(--h3-text-size);
  margin-block-end: 0;
}

h4 {
  /* color: var(--main-text-color); */
  font-size: var(--h4-text-size);
  margin-block-end: 0;
}

h5 {
  /* color: var(--main-text-color); */
  font-size: var(--h5-text-size);
  margin-block-end: 0;
}

h6 {
  /* color: var(--main-text-color); */
  font-size: var(--h6-text-size);
  margin-block-end: 0;
}

/* This is probably very bad */
* {
  color: var(--main-text-color);
}

.section-title {
  margin: 0px 0px var(--section-title-margin-bottom) 0px;
}

.section-title-centered {
  text-align: center;
}

.display-only {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: auto;
  -khtml-user-drag: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
}

.welcome-container {
  margin-bottom: var(--card-container-margin-bottom);
}

.project-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap);

  margin-top: var(--card-container-margin-top);
  margin-bottom: var(--card-container-margin-bottom);
  margin-left: auto;
  margin-right: auto;

  justify-content: center; /* start? */
}

.project-card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  /* flex-basis: 0%; auto */
  flex-basis: 38%;

  min-width: var(--card-min-width);
  max-width: var(--card-max-width);

  padding: var(--project-card-padding);

  box-sizing: content-box;

  contain: content;

  background-color: var(--project-card-bg-color);
  color: var(--card-text-color);

  /* Rounded corners */
  border-radius: 24px;

  transition: background-color 100ms linear, transform ease 0.3s, box-shadow ease 0.3s;
}

.project-card-dummy {
  visibility: hidden;
}

/* On mouse hover */
.project-card:hover {
  background-color: var(--project-card-bg-color-hover);
  text-decoration: none;
}

/* On mouse down */
.project-card:active {
  background-color: var(--project-card-bg-color-hover);
  transform: scale(0.975);
}

.project-card-icon {
  height: var(--card-icon-size);
  width: var(--card-icon-size);
  margin-right: var(--card-icon-margin-right);
  
  fill: var(--card-text-color);
}

.project-name {
  margin: 0 0px 16px 0px;

  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.project-details {
  margin: 0px 0px 28px 0px;
}

.project-sub-details {
  margin: auto 0px 0px 0px;

  color: var(--card-sub-text-color);
}

.project-more {
  width: 100%;
  text-align: end;
}

footer {
  max-width: var(--main-max-width-small);
  margin-left: auto;
  margin-right: auto;

  font-size: 12pt;
  text-align: center;

  color: var(--main-text-color);
}

footer svg {
  vertical-align: middle;
}

.footer-group {
  margin-left: calc(env(safe-area-inset-left) + var(--footer-horizontal-padding));
  margin-right: calc(env(safe-area-inset-right) + var(--footer-horizontal-padding));
    
  padding-top: var(--footer-vertical-padding);
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--footer-vertical-padding));
    
  /* Footer border */
  border-top: 1px solid var(--footer-border-color);
}

.footer-group div {
  padding-top: var(--footer-text-gap);
  padding-bottom: var(--footer-text-gap);
}

@media (max-width: 1024px) {
  :root {
    --body-padding: 28px;
    /* --header-height-pre: 384px; */
    --footer-horizontal-padding: 64px;

    /* --card-container-margin-bottom: 132px; */
  }
}

@media (max-width: 600px) {
  :root {
    --h1-text-size: 3.8em;
    --h2-text-size: 3.3em;
    --h3-text-size: 2.8em;
    --h4-text-size: 2.3em;
    --h5-text-size: 1.8em;
    --h6-text-size: 1.3em;

    --body-padding: 16px;

    --header-height-pre: 288px;

    --footer-vertical-padding: 36px;
    --footer-horizontal-padding: 48px;

    --section-title-margin-bottom: 24px;
    
    --card-padding: 4px;
    --card-gap: 16px;

    --project-card-padding: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --body-padding: 12px;

    /* --header-height-pre: 256px; */
    --header-height-pre: 224px;
    --navbar-height: 48px;

    /* --h1-text-size: 3.5em;
    --h2-text-size: 3.0em;
    --h3-text-size: 2.5em;
    --h4-text-size: 2.0em;
    --h5-text-size: 1.5em;
    --h6-text-size: 1.0em; */

    --h1-text-size: 2.6em;
    --h2-text-size: 2.2em;
    --h3-text-size: 1.8em;
    --h4-text-size: 1.3em;
    --h5-text-size: 1.1em;
    --h6-text-size: 1.0em;

    --card-container-margin-bottom: 54px;
  }

  /* .header-title {
    text-align: start;
  } */

  .navbar {
    display: block;
    padding: 0;
    position: static;
  }

  .navbar[js] {
    position: -webkit-sticky;
    position: sticky;
  }

  .navbar[expanded='true'][js] {
    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
  }

  .navbar-btn-menu[js] {
    display: block;
  }

  .navbar-list {
    display: none;
    padding: 16px 24px;
  }

  .navbar-list[mobile-hidden='false'] {
    display: block;
  }

  .navbar-list-div {
    background: 0;
  }

  .navbar-item {
    font-size: 14pt;
    margin: 0 0 16px 0;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: auto;
    -khtml-user-drag: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
  }

  .navbar-item:last-child {
    margin-bottom: 0;
  }

  .navbar-item a {
    display: flex;
    justify-content: space-between;
    max-width: none;
    width: auto;
  }
  
  .navbar-item a svg {
    display: inline;
    opacity: 1;
    fill: var(--main-text-color);
    transform-origin: center;
    animation: chevron-hover-off .24s cubic-bezier(.4, 0, .6, 1) both;
  
    visibility: hidden;
    transition: visibility .24s step-end
  }
  
  .navbar-item a:hover svg {
    visibility:visible;
    transition: visibility .24s step-start;
    opacity: 1;
    animation: chevron-slide-in-hover .24s cubic-bezier(.4, 0, .6, 1) both;
  }
}

@media (max-width: 320px) {
  :root {
    --body-padding: 10px;

    --footer-vertical-padding: 32px;
    --footer-horizontal-padding: 28px;

    /* --h1-text-size: 3.5em;
    --h2-text-size: 3.0em;
    --h3-text-size: 2.5em;
    --h4-text-size: 2.0em;
    --h5-text-size: 1.5em;
    --h6-text-size: 1.0em; */

    --section-title-margin-bottom: 20px;

    --card-container-margin-bottom: 48px;
    --card-gap: 8px;

    --project-card-padding: 22px;
  }
}

@media (max-width: 280px) {
  :root {
    --body-padding: 4px;

    --footer-vertical-padding: 28px;
    --footer-horizontal-padding: 16px;

    /* --h1-text-size: 2.6em;
    --h2-text-size: 2.2em;
    --h3-text-size: 1.8em;
    --h4-text-size: 1.3em;
    --h5-text-size: 1.1em;
    --h6-text-size: 1.0em; */

    --section-title-margin-bottom: 16px;

    --card-container-margin-bottom: 24px;
    
    --project-card-padding: 20px;
  }
}

.blur {
  background-color: var(--main-bg-color-trans);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}