/*!********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./static/css/style.scss ***!
  \********************************************************************************************************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
bdi,
details,
dialog,
figcaption,
figure,
footer,
header,
main,
mark,
nav,
section,
summary,
time,
wbr {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
}

table {
  border-collapse: collapse;
}

ul {
  list-style: none;
}

ol {
  padding-left: 16px;
}

article,
aside,
dialog,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

input,
select,
textarea {
  outline: none;
}

code {
  font-family: monospace;
}

hr {
  overflow: visible;
}

html {
  --page-width: 100em;
  --page-margin: 0.5in;
  --screen-scale: 1;
  --image-grid-gap: calc(clamp(0.8em, 1.5vw, 1.5em));
  --background-color: #efefe7;
  --background-color-2: #fff;
  --text-color-light: #555;
  --text-color-strong: #111;
  --text-color: #333;
  --accent-color-r: 76;
  --accent-color-g: 175;
  --accent-color-b: 80;
  --accent-color: rgb(var(--accent-color-r), var(--accent-color-g), var(--accent-color-b));
  --accent-color-rgb: var(--accent-color-r), var(--accent-color-g), var(--accent-color-b);
  --accent-color-light: #70ff77;
  --accent-color-lighter: #64c169;
  --divider-light: #ccc;
  --radius-medium: 0.5rem;
  --radius-small: calc(var(--radius-medium) * 0.6);
  --radius-large: calc(var(--radius-medium) * 1.5);
  --base-font-size: 16px;
  --dark-background-color: #292922;
  --light-background-color: var(--background-color);
  font-size: calc(var(--base-font-size) * var(--screen-scale));
}
@media screen {
  html {
    --screen-scale: 1.3;
    --page-margin: 0in;
  }
}
@media screen and (max-width: 1800px) {
  html {
    --screen-scale: 1.1;
  }
}
@media screen and (max-width: 1000px) {
  html {
    --screen-scale: 1;
  }
}

x-app {
  margin: auto;
  display: grid;
  grid-template-rows: min-content min-content 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "nav" "main";
}

.hidden {
  display: none !important;
}

html,
body {
  overscroll-behavior: none;
}

body {
  font-family: "K2D";
  color: #333;
  background: linear-gradient(180deg, var(--background-color), var(--background-color-2));
  background-size: 100% 60vh;
  background-repeat: no-repeat;
}

h1,
h2,
h3 {
  font-family: "Bebas Neue", sans-serif;
}

button {
  cursor: pointer;
}

select,
button,
input,
textarea {
  font-family: inherit;
  font-size: 1em;
}

select {
  padding: 0.5em 0.5em;
  border: 1px solid #aaa;
  background: transparent;
  border-radius: 0.4em;
}

a {
  color: inherit;
  text-decoration: underline;
}

.button {
  background: var(--accent-color);
  border-radius: 0.3em;
  display: inline-block;
  box-shadow: 0px -5px inset rgba(0, 0, 0, 0.3), 0px 10px rgba(0, 0, 0, 0.0588235294), 0px 0px 0px inset #77c37a;
  color: #fff;
  font-size: 1.3em;
  font-weight: bold;
  padding: 0.5em 1em;
  padding-bottom: calc(0.5em + 5px);
  text-decoration: none;
  transition: box-shadow 0.2s;
  background: linear-gradient(0deg, var(--accent-color), var(--accent-color)) padding-box, linear-gradient(90deg, var(--accent-color), var(--accent-color-light), var(--accent-color)) border-box;
  border-top: 1px solid transparent;
}
.button i {
  margin-right: 0.7em;
}
.button:hover {
  cursor: pointer;
  box-shadow: 0px -5px inset rgba(0, 0, 0, 0.3), 0px 10px rgba(0, 0, 0, 0.0588235294), 0px 7px 0px inset #77c37a;
}

@page {
  size: 8.25in 11.75in;
  margin: 10mm 10mm 10mm 10mm;
}
x-header {
  padding: 1em 0;
  padding-bottom: 0.5em;
  display: none;
  grid-area: header;
  text-align: center;
}
x-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
x-header .logo img {
  height: 1.6em;
  display: block;
}
x-header .logo:before, x-header .logo:after {
  height: 6px;
  background: var(--accent-color);
  width: 4em;
  content: " ";
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px #d3d3d3;
}
x-header .logo:before {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}
x-header .logo:after {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}
x-header .logo span {
  border-radius: 0.35em;
  font-size: 0.8em;
  color: #fff;
  padding: 0.4em 2em;
  font-weight: bold;
  background: var(--accent-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px #d3d3d3;
}
x-header h1,
x-header h2 {
  text-transform: uppercase;
  font-family: "Bebas Neue", sans-serif;
}
x-header h1 {
  font-size: 5em;
  color: var(--text-color-strong);
  position: relative;
  /*--angle: -7.4deg;
  --offset: 2em;
  --gap: 0.05em;
  --gutter:3px;
  --col1: #333;
  --col2: #666;
  background: repeating-linear-gradient(
      var(--angle),
      var(--col1) 0em,
      var(--col1) var(--offset),
      transparent calc(var(--offset) + var(--gutter)),
      transparent calc(var(--offset) + var(--gap) - var(--gutter)),
      var(--col2) calc(var(--offset) + var(--gap)),
      var(--col2) 100em
  );*/
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
x-header h1::before {
  position: absolute;
  left: 7px;
  top: 7px;
  bottom: 0;
  right: 0;
  content: "PETER H. NGUYEN";
  /*background: repeating-linear-gradient(30deg, $col1 0, $col1 3px, $col2 4px, $col2 6px, $col1 7px);*/
  background: linear-gradient(transparent, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
x-header h1::after {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0;
  right: 0;
  content: "PETER H. NGUYEN";
  --angle: 180deg;
  --offset: 0.4em;
  --gap: 0.05em;
  --col1: #666;
  --col2: #333;
  /*background: repeating-linear-gradient(
      var(--angle),
      var(--col1) 0em,
      var(--col1) var(--offset),
      #a5a5a5 calc(var(--offset) + var(--gap) * 0.5),
      var(--col2) calc(var(--offset) + var(--gap)),
      var(--col2) 100em
  );*/
  background: repeating-linear-gradient(180deg, #b5b5b5, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
x-header h2 {
  font-size: 1.2em;
  color: var(--text-color);
}

x-blob-button {
  position: relative;
  background: none !important;
  box-shadow: none !important;
  --size: 2.5em;
}
x-blob-button > div {
  background: var(--accent-color);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: url(#gooey);
  z-index: -1;
}
x-blob-button > div:after {
  pointer-events: none;
  content: " ";
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) * -0.5);
  margin-top: calc(var(--size) * -0.5);
  border-radius: 100%;
  left: var(--x);
  top: var(--y);
  background: var(--accent-color);
}

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 10deg;
}
x-index {
  --gutter: calc(max(1em, (100vw - var(--page-width)) / 2));
  --image-padding: 0.5em;
  grid-area: main;
  background-color: #fff;
  --side-width: calc(clamp(20em, 20vw, 27em));
  --angle-top: calc(clamp(1em, 8vw, 8em));
  --angle-bottom: calc(clamp(1em, 8vw, 8em));
  --background: url(images/02_Illus_02-full-e8a339637c764815.jpg);
  --content-width: minmax(0, 1fr);
  --gap: calc(clamp(2em, 2.5vw, 3em));
  --hover-color: #c9c9bb;
}
x-index .goo {
  display: none !important;
  --width: -1.3em;
  --lerp: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  background: #787964;
  filter: url(#gooey);
  width: 1vw;
  height: 10em;
  display: block;
  z-index: 100;
  left: var(--x);
  top: var(--y);
  transform: skew(-8deg, 0deg);
  --x: calc(50% + var(--slant) * (var(--lerp) - 0.5));
  --y: calc((1 - var(--lerp)) * 100% - 5em);
}
x-index .goo:after {
  position: absolute;
  left: var(--width);
  right: var(--width);
  border-radius: 100%;
  background-color: #787964;
  content: " ";
  top: 2em;
  bottom: 2em;
}
x-index .intro {
  --inner-color: var(--accent-color);
  --outer-color: #011602;
  --slant: 8vw;
  --gradient-x: 50vw;
  --gradient-y: 50vh;
  display: grid;
  position: relative;
  font-size: 1.2em;
  border-bottom: 2em solid #555550;
}
x-index .intro + .category {
  --angle-top: 0px;
}
x-index .intro:before {
  display: block;
  content: " ";
  grid-column: 1/3;
  grid-row: 1/2;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y), var(--inner-color), var(--outer-color)) center/auto, linear-gradient(0deg, #000, #000) center/auto, linear-gradient(0deg, var(--accent-color), var(--accent-color)) center/auto, radial-gradient(ellipse at var(--gradient-x) var(--gradient-y), #fff 30%, #000 80%) center/auto, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Crect width='304' height='304' fill='black'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.6' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E") center/20em, url("https://i.pinimg.com/originals/3c/8c/f0/3c8cf0299480a3f239761ce15f861b9f.gif") center/18em;
  background-blend-mode: screen, screen, multiply, multiply, multiply, normal;
}
x-index .intro p {
  line-height: 1.7em;
  color: #ddd;
  font-weight: bold;
  max-width: 30em;
}
x-index .intro svg {
  width: 17em;
  position: absolute;
  left: 0;
  top: 7vh;
  padding: 2em;
  background: var(--accent-color);
  clip-path: polygon(0 0, calc(100% - 2em) 0, 100% 50%, calc(100% - 2em) 100%, 0 100%);
  padding-right: 4em;
  z-index: 2;
}
x-index .intro .left {
  --background-color: #414132;
  z-index: 1;
  grid-area: left;
  color: #fff;
  background: radial-gradient(circle at 0 var(--gradient-y), #757562, var(--background-color) 50vh), var(--background-color);
  position: relative;
  display: flex;
  gap: 4vh;
  align-items: start;
  flex-direction: column;
  justify-content: center;
}
x-index .intro .left .header {
  text-shadow: 2px 2px rgba(0, 0, 0, 0.231372549);
  color: #fff;
  display: grid;
  grid-template-columns: min-content min-content;
  grid-template-rows: min-content min-content;
  grid-template-areas: "peter right" "nguyen right";
  gap: 0.7em;
  text-transform: uppercase;
  color: #fff;
}
x-index .intro .left .header:before {
  content: " ";
  margin: -10em -4em;
  -webkit-mask: no-repeat url(images/paint-full-1e95db80915079cc.png) center/contain;
  z-index: -1;
  grid-column: 1/3;
  grid-row: 1/3;
  background: url("https://i.pinimg.com/originals/a4/ae/57/a4ae57de9652544afb9b5407da9878ce.jpg") center/cover, var(--background-color);
  filter: brightness(0.5);
  background-blend-mode: luminosity;
}
@keyframes text-slide-in {
  from {
    opacity: 0;
    transform: translate(var(--start-x), var(--start-y));
  }
  to {
    opacity: 1;
    transform: translate(0em, 0);
  }
}
x-index .intro .left .header .peter {
  grid-area: peter;
  white-space: pre;
  font-size: 6em;
  animation: 0.3s 1 text-slide-in both;
  animation-delay: 0s;
}
x-index .intro .left .header .nguyen {
  font-size: 6.2em;
  grid-area: nguyen;
  white-space: pre;
  animation: 0.3s 1 text-slide-in both;
  animation-delay: 0.2s;
}
x-index .intro .left .header .peter,
x-index .intro .left .header .nguyen {
  --start-x: -4em;
  --start-y: 0;
  line-height: 0.8em;
  font-family: "Bebas Neue", sans-serif;
  margin-bottom: -0.1em;
  text-align: right;
  mix-blend-mode: exclusion;
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}
x-index .intro .left .header ul {
  grid-area: right;
  line-height: 1em;
  white-space: pre;
}
x-index .intro .left .header ul i {
  margin-right: 0.3em;
  font-size: 0.9em;
  color: var(--accent-color);
}
x-index .intro .left ul {
  font-size: 1.8rem;
  letter-spacing: 8px;
  font-family: "Bebas Neue", sans-serif;
  font-weight: bold;
  display: flex;
  gap: 0.3em;
  flex-direction: column;
  text-transform: uppercase;
  justify-content: space-between;
}
x-index .intro .left ul:before {
  --start-x: 0;
  --start-y: -4em;
  animation-delay: 0.3s;
}
x-index .intro .left ul:after {
  --start-x: 0;
  --start-y: 4em;
  animation-delay: 0.4s;
}
x-index .intro .left ul:before, x-index .intro .left ul:after {
  content: " ";
  height: 0.25em;
  border-radius: 0.1em;
  flex-grow: 1;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
  animation: 0.3s 1 text-slide-in both;
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
  background: linear-gradient(0deg, var(--accent-color), var(--accent-color)) padding-box, linear-gradient(90deg, var(--accent-color), var(--accent-color-light), var(--accent-color)) border-box;
  border: 1px solid transparent;
}
x-index .intro .background-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(images/02_Turkey_01-full-753728476d29a852.jpg) center/cover;
  mix-blend-mode: overlay;
  filter: grayscale(1);
  opacity: 0.5;
  z-index: -1;
  -webkit-mask-image: linear-gradient(270deg, black, transparent);
}
x-index .intro .right {
  grid-area: right;
  position: relative;
}
@keyframes iframe-rotation {
  from {
    --rotation: 0deg;
  }
  to {
    --rotation: 360deg;
  }
}
x-index .intro .right .video-container {
  position: absolute;
  aspect-ratio: 16/9;
  box-sizing: content-box;
  width: 100%;
  height: auto;
  display: block;
  top: 30vh;
  left: 10%;
  width: 80%;
  border: 2px solid transparent;
  background: linear-gradient(var(--rotation), #21211a calc(50% - 20em), #255b27 50%, #23231b calc(50% + 20em)) padding-box, linear-gradient(var(--rotation), #9b9b88 calc(50% - 13em), #71ff76 50%, #9b9b88 calc(50% + 13em)) border-box;
  padding: 0.7em;
  animation: iframe-rotation 10s infinite linear;
  border-radius: 1em;
  box-shadow: 0px 0px 0px 2px #000;
}
x-index .intro .right iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  display: block;
}
x-index .intro .examples {
  display: none;
  color: #aaa;
  font-weight: bold;
  position: absolute;
  bottom: 5vh;
  left: 10vw;
}
@keyframes arrow-animation {
  0% {
    transform: scale(1, 1) translate(0em, 0em);
  }
  50% {
    transform: scale(1, 1) translate(0em, 0em);
  }
  75% {
    transform: scale(0.75, 1.25) translate(0em, 1em);
  }
}
x-index .intro .examples i {
  margin-right: 1em;
  animation: 1s linear infinite arrow-animation;
}
@media all and (max-width: 1000px) {
  x-index .intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: min-content min-content;
    grid-template-areas: "left" "right";
  }
  x-index .intro p {
    line-height: 1.3em;
  }
  x-index .intro:before {
    grid-area: right;
  }
  x-index .intro .left {
    box-sizing: content-box;
    padding: 20vh 7vw;
    align-items: start;
  }
  x-index .intro .left .header {
    grid-template-columns: 100%;
    grid-template-rows: min-content min-content min-content;
    grid-template-areas: "peter" "nguyen" "right";
    margin-top: 0;
    align-self: stretch;
    gap: 0.7em 0;
  }
  x-index .intro .left .header .peter,
  x-index .intro .left .header .nguyen {
    font-size: 23vw;
  }
  x-index .intro .right {
    min-height: 50vh;
    padding: 5vh 7vw;
    border-top: 5vh solid var(--accent-color);
  }
  x-index .intro .right svg {
    display: none !important;
  }
  x-index .intro .right .video-container {
    position: static;
    width: auto;
    padding: 0.4em;
  }
}
@media all and (min-width: 1000px) {
  x-index .intro {
    grid-template-columns: minmax(0, 1fr) var(--slant) minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "right left left";
    height: calc(100vh + 2em);
  }
  x-index .intro .left {
    padding-left: calc(var(--slant) + 2em);
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  }
  x-index .intro .left:before {
    content: " ";
    position: absolute;
    width: calc(var(--slant) + 1vw);
    left: 0;
    top: 0;
    bottom: 0;
    clip-path: polygon(0 0, calc(var(--slant) + 1vw) 0, 1vw 100%, 0 100%);
    background: #787964;
  }
  x-index .intro .left .header ul {
    mix-blend-mode: exclusion;
  }
}
x-index .category {
  --divider-color-light: #c9c9bb;
  --divider-color-dark: #59594b;
  background: var(--background-color);
  /*
  Mobile Specific
  */
  /*
  Desktop Specific
  */
}
x-index .category:last-child {
  --angle-bottom: 0px;
}
x-index .category:nth-child(even) {
  --background-color: var(--dark-background-color);
}
x-index .category:nth-child(even) aside {
  --text-color: #ccc;
}
x-index .category:nth-child(even) h1 {
  --header-color: #fff;
}
x-index .category:nth-child(odd) {
  --background-color: var(--light-background-color);
}
x-index .category:nth-child(odd) aside {
  --text-color: #555;
}
x-index .category:nth-child(odd) h1 {
  --header-color: #292922;
}
@media all and (max-width: 1000px) {
  x-index .category {
    display: grid;
    gap: 1em;
    border-bottom: 1em solid var(--divider-color);
    padding: 1em;
    grid-template-rows: min-content min-content;
    grid-template-areas: "description" "img";
    grid-template-columns: minmax(0, 1fr);
  }
  x-index .category > div {
    display: none;
  }
}
@media all and (max-width: 2000px) {
  x-index .category {
    --image-padding: 0.3em;
  }
}
@media all and (max-width: 1400px) {
  x-index .category {
    --image-padding: 0;
  }
}
@media all and (min-width: 1000px) {
  x-index .category {
    display: grid;
    grid-template-rows: 1fr;
    gap: 0;
    align-items: start;
    position: relative;
    padding: calc(var(--angle-top) + 2em) 0 calc(var(--angle-bottom) + 2em);
    margin: calc(var(--angle-top) * -1 - 1px) 0 calc(var(--angle-bottom) * -1 - 1px);
    clip-path: polygon(0 var(--angle-top), 100% 0, 100% calc(100% - var(--angle-bottom)), 0 100%);
    /*
    Dark
    */
    /*
    Light
    */
  }
  x-index .category:nth-child(2) {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--angle-top)), 0 100%);
    margin-top: 0;
    padding-top: 3em;
  }
  x-index .category > div {
    display: block;
    grid-column: 3/5;
    grid-row: 1/2;
    margin: calc((var(--angle-top) + 3em) * -1) 0 calc((var(--angle-bottom) + 3em) * -1);
    opacity: 0.7;
    background: var(--background) center/cover;
    align-self: normal;
    filter: grayscale(1);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 15em);
    mix-blend-mode: overlay;
  }
  x-index .category:before {
    content: " ";
    display: block;
    width: 4em;
    height: 4em;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 0%;
    background-color: var(--divider-color-top);
    margin-top: calc(var(--angle-top) * 0.5 - 2.5em);
  }
  x-index .category:after {
    content: " ";
    display: block;
    grid-column: 1/5;
    grid-row: 1/1;
    align-self: end;
    clip-path: polygon(0 var(--angle-bottom), 100% 0, 100% calc(100% - var(--angle-bottom)), 0 100%);
    background: var(--accent-color);
    margin-bottom: calc((var(--angle-bottom) + 2em) * -1);
    height: calc(var(--angle-bottom) + 1vh);
    z-index: 2;
    background: var(--divider-color-bottom);
  }
  x-index .category:nth-child(even) {
    grid-template-columns: var(--gutter) var(--content-width) var(--side-width) var(--gutter);
    grid-template-areas: "l img description r";
    --divider-color-top: var(--divider-color-dark);
    --divider-color-bottom: var(--divider-color-light);
    --hover-color: #53534a;
  }
  x-index .category:nth-child(even) ul {
    padding-right: var(--gap);
  }
  x-index .category:nth-child(even) ul li:before {
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  x-index .category:nth-child(even) ul li:after {
    border: 1px solid #ccc;
  }
  x-index .category:nth-child(odd) {
    grid-template-columns: var(--gutter) var(--side-width) var(--content-width) var(--gutter);
    grid-template-areas: "l description img r";
    --divider-color-top: var(--divider-color-light);
    --divider-color-bottom: var(--divider-color-dark);
  }
  x-index .category:nth-child(odd) ul {
    padding-left: var(--gap);
  }
  x-index .category:nth-child(odd) ul li {
    background: linear-gradient(45deg, #d5d5cd, #e9e9df, #d5d5cd) !important;
    border: min(var(--image-padding), 1px) solid rgba(0, 0, 0, 0.1) !important;
  }
  x-index .category:nth-child(odd) ul li:before {
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  x-index .category:nth-child(odd) ul li:after {
    border: 1px solid #666;
    box-shadow: 0px 0px 0px var(--image-border-width) #bbb inset;
  }
  x-index .category:nth-child(odd) > div {
    grid-column: 1/3;
    -webkit-mask-image: linear-gradient(270deg, transparent, black 15em);
  }
}
x-index .category ul {
  grid-area: img;
}
x-index .category > aside {
  grid-area: description;
  padding: 0;
  color: var(--text-color);
}
@media all and (min-width: 1000px) {
  x-index .category > aside {
    position: sticky;
    top: 4em;
  }
}
x-index .category iframe {
  aspect-ratio: 16/9;
  width: 100%;
  padding-right: 3em;
  grid-area: img;
}
x-index .category h1 {
  --shadow-color: rgba(0, 0, 0, 0.2);
  color: var(--header-color);
  font-size: calc(clamp(2em, 3vw, 3em) * 1.3);
  display: flex;
  margin: 0 0;
  text-transform: uppercase;
  flex-direction: column;
  position: relative;
}
x-index .category h1:after {
  content: " ";
  background: linear-gradient(0deg, var(--accent-color), var(--accent-color)) padding-box, linear-gradient(90deg, var(--accent-color), var(--accent-color-light), var(--accent-color)) border-box;
  height: 0.25em;
  border-radius: 100em;
  border: 1px solid transparent;
}
x-index .category h1:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: 5px;
  margin-top: 5px;
  -webkit-background-clip: text;
  color: transparent;
  background-image: repeating-linear-gradient(45deg, white 0, white 4px, transparent 5px, transparent 9px, white 10px);
  z-index: -1;
}
x-index .category p {
  margin: 1em 0;
  line-height: 1.7em;
}
x-index .category ul {
  --width: 10em;
  --min-a: 0.7;
  --max-a: 1.8;
  --scale: 1;
  --image-border-width: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--image-grid-gap);
}
@media all and (max-width: 1000px) {
  x-index .category ul {
    --scale: 0.65;
    --image-grid-gap: 0.5em;
    --image-border-width: 2px;
  }
}
@media all and (max-width: 1400px) {
  x-index .category ul {
    --scale: 0.8;
    --image-grid-gap: 0.5em;
  }
}
x-index .category ul::after {
  content: "";
  flex: 10;
}
x-index .category ul li {
  --a: calc(clamp(var(--min-a), calc(var(--w) / var(--h)), var(--max-a)));
  --hover-angle: 0deg;
  --hover-strength: 0%;
  --radius: var(--radius-large);
  border-radius: var(--radius);
  position: relative;
  aspect-ratio: var(--a);
  flex: calc(var(--a) * var(--width) * var(--scale));
  flex-grow: calc(var(--a));
  padding: var(--image-padding);
  background: linear-gradient(45deg, #2f2f2f, #414141, #2f2f2f);
  border: min(var(--image-padding), 1px) solid rgba(255, 255, 255, 0.15);
}
x-index .category ul li a {
  display: contents;
}
x-index .category ul li a:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  transition: inset 0.2s, visibility 0.2s;
  inset: 0px;
  visibility: hidden;
  background: linear-gradient(var(--hover-angle), rgba(var(--accent-color-rgb), var(--hover-strength)) 15%, rgba(var(--accent-color-rgb), 1) 50%, rgba(var(--accent-color-rgb), var(--hover-strength)) 85%);
  z-index: -1;
  border-radius: calc(var(--radius) + 6px);
}
x-index .category ul li:hover a:before {
  inset: -6px;
  visibility: visible;
}
x-index .category ul li:after, x-index .category ul li:before {
  content: " ";
  position: absolute;
  left: var(--image-padding);
  right: var(--image-padding);
  top: var(--image-padding);
  bottom: var(--image-padding);
  border-radius: var(--radius);
  display: block;
  pointer-events: none;
}
x-index .category ul li:after {
  mix-blend-mode: overlay;
  pointer-events: none;
}
x-index .category ul li img {
  display: block;
  aspect-ratio: var(--aspect-ratio);
  border-radius: var(--radius);
  object-fit: cover;
  height: 100%;
  width: 100%;
  flex: 1;
  max-height: 22em;
  opacity: 0;
}
x-index .category ul li img.loaded {
  opacity: 1;
}
x-index .category ul li span {
  display: none;
}

footer {
  margin-top: -0.1em;
  background: #212121;
  height: 6em;
}

x-jump-to-top {
  cursor: pointer;
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 1em;
  font-size: 0.9em;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s;
  clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0% 2em);
  padding: 1em 1em;
  padding-left: 2em;
  background: #fff;
  border-bottom: 3px solid;
  border-right: 3px solid #000;
}
x-jump-to-top:hover {
  background: #ddd;
}
x-jump-to-top.visible {
  opacity: 1;
}

x-lightbox {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  cursor: pointer;
  --x: 0;
  --y: 0;
  --animation: 1;
  --size: 100vw;
  --frame-padding: 2em;
  --frame-size: 40%;
  --frame-inset-width: 5px;
  --frame-inset-color: var(--accent-color);
  --frame-border-1: #2d2d2d;
  --frame-border-2: var(--accent-color);
  --frame-background-1: #070706;
  --frame-background-2: rgba(0, 0, 0, 0.6);
  transform: translate(0, 0);
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.5s;
  /*article {
      background-color: #fff;
      border-radius: var(--radius-large);
      padding: 1em;
      width: 80vw;
      max-width: 70rem;

      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: min-content 1fr;
      grid-template-areas:
          "header header"
          "img description";
      gap: 1em;
      box-shadow: 2px 2px 5px #0000001f;

      img {
          grid-area: img;
          max-width: 100%;
      }

      h1 {
          grid-area: header;
          color: var(--text-color-strong);
          font-size: 2em;
          display: flex;
          align-items: center;
          gap: 0.6em;
          margin: 0 0;
          text-transform: uppercase;

          &:after {
              content: " ";
              height: 1px;
              background: var(--divider-light);
              flex: 1;
          }
      }

      p {
          margin: 1em 0;
      }

      section {
          grid-area: description;
          font-size: 0.9em;
          text-align: justify;
      }
  }*/
}
x-lightbox.visible {
  background-color: rgba(0, 0, 0, 0.5);
}
x-lightbox a {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  text-decoration: none;
  justify-content: start;
  align-items: center;
  padding: 5vw;
}
x-lightbox a.previous {
  left: 0;
  width: 40%;
}
x-lightbox a.previous:before {
  content: "\f060";
}
x-lightbox a.next {
  right: 0;
  width: 40%;
  justify-content: end;
}
x-lightbox a.next:before {
  content: "\f061";
}
x-lightbox a:before {
  font-family: fontawesome;
  font-size: 7vh;
  color: #fff;
  transition: transform 0.2s;
  text-shadow: 2px 2px 0px #000;
}
x-lightbox a:hover:before {
  transform: scale(1.2);
}
x-lightbox article {
  position: absolute;
  opacity: calc(1 - var(--animation));
  transform: translate(calc(var(--x) * var(--animation) * 35vw), calc(var(--y) * var(--animation) * 35vh)) scale(calc(1 - 0.5 * var(--animation)));
  padding: var(--frame-padding);
  background: linear-gradient(45deg, var(--frame-background-1), var(--frame-background-2), var(--frame-background-1)) padding-box, linear-gradient(45deg, var(--frame-border-1), var(--frame-border-2), var(--frame-border-1)) border-box;
  border-radius: 1em;
  border: 1px solid transparent;
  --frame-inset-distance: calc(var(--frame-padding) / 2 - var(--frame-inset-width) / 2);
}
x-lightbox article:before {
  content: " ";
  display: block;
  position: absolute;
  left: var(--frame-inset-distance);
  top: var(--frame-inset-distance);
  width: var(--frame-size);
  height: var(--frame-size);
  border-top-left-radius: var(--radius-large);
  border-bottom-left-radius: var(--frame-inset-width);
  border-top-right-radius: var(--frame-inset-width);
  border-left: var(--frame-inset-width) solid var(--frame-inset-color);
  border-top: var(--frame-inset-width) solid var(--frame-inset-color);
  pointer-events: none;
}
x-lightbox article:after {
  content: " ";
  display: block;
  position: absolute;
  right: var(--frame-inset-distance);
  bottom: var(--frame-inset-distance);
  width: var(--frame-size);
  height: var(--frame-size);
  border-bottom-right-radius: var(--radius-large);
  border-bottom-left-radius: var(--frame-inset-width);
  border-top-right-radius: var(--frame-inset-width);
  border-right: var(--frame-inset-width) solid var(--frame-inset-color);
  border-bottom: var(--frame-inset-width) solid var(--frame-inset-color);
  pointer-events: none;
}
x-lightbox article .img-container {
  position: relative;
}
x-lightbox article .img-container:after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #ccc;
  border-radius: var(--radius-large);
  mix-blend-mode: overlay;
}
x-lightbox article img {
  border-radius: var(--radius-large);
  display: block;
  max-width: 80vw;
  max-height: 80vh;
}

x-nav {
  grid-area: nav;
  position: fixed;
  top: 0;
  z-index: 10;
  transform: translate(0, 0);
  top: 1em;
  right: 0;
  background: linear-gradient(180deg, #57574b, #49493f);
  color: #ddddd4;
  font-weight: bold;
  clip-path: polygon(1em 0, 100% 0, 100% 100%, 1em 100%, 0 50%);
  box-shadow: 0px -3px #727263 inset, 0px 1px #6a6a5c inset;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: center;
}
x-nav:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2em;
  clip-path: polygon(0 0, 1em 0, calc(1em + 1px) 0, 1px 50%, calc(1em + 1px) 100%, 0 100%);
  background: #727263;
}
x-nav nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-transform: uppercase;
}
x-nav nav ul li {
  display: block;
  line-height: 1em;
}
x-nav nav ul li:first-child a {
  padding-left: 2em !important;
}
x-nav nav ul a {
  text-decoration: none;
  display: block;
  position: relative;
  padding: 1em;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
x-nav nav ul a:hover, x-nav nav ul a.selected {
  color: #fff;
  background: var(--accent-color);
  border-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0px 7px 0px inset var(--accent-color-lighter);
}
@media all and (max-width: 1000px) {
  x-nav {
    flex-wrap: wrap;
    clip-path: none;
    position: static;
  }
  x-nav:before {
    display: none;
  }
  x-nav nav {
    display: contents;
  }
  x-nav nav ul {
    display: contents;
  }
}
x-nav.hovering {
  background: #eee;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px -1px 0px #fff inset;
  background-clip: padding-box;
}

/*# sourceMappingURL=style.9dba6749d6277b414116.css.map*/