@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300;1,400&display=swap");
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

header, main {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul ul {
  margin-bottom: 0;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

img {
  vertical-align: middle;
  border-style: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

:root {
  --__fhbox_viewport_h: 100%;
  --__fhbox_global_transition_s: 0.35s;
  --__fhbox_centered_top: calc( ( var( --__fhbox_viewport_h ) - var( --__fhbox_thumbs_height ) ) / 2 );
  --__fhbox_inactive_z_index: -1;
  --__fhbox_override_z_index: 2147480000;
  --__fhbox_override_bg: rgba( 0, 0, 0, 0.8 );
  --__fhbox_override_filter: blur( 5px );
  --__fhbox_loading_size: 60px;
  --__fhbox_loading_z_index: 2147480200;
  --__fhbox_loading_top: var( --__fhbox_centered_top );
  --__fhbox_loading_svg: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0ibTMyLjYyIDEuMTg3LTIuMjg3IDcuMTQ3QzM3LjM4OSAxMC41OSA0Mi41IDE3LjE5NiA0Mi41IDI1YzAgOS42NjUtNy44MzUgMTcuNS0xNy41IDE3LjVTNy41IDM0LjY2NSA3LjUgMjVjMC03LjgwNCA1LjExMS0xNC40MSAxMi4xNjctMTYuNjY2TDE3LjM4IDEuMTg3QzcuMyA0LjQxIDAgMTMuODUxIDAgMjVjMCAxMy44MDcgMTEuMTkzIDI1IDI1IDI1czI1LTExLjE5MyAyNS0yNWMwLTExLjE0OS03LjMwMS0yMC41OS0xNy4zOC0yMy44MTN6Ii8+PC9zdmc+" );
  --__fhbox_tools_height: 40px;
  --__fhbox_tools_padding: 0 5px;
  --__fhbox_tools_icon_size: 20px;
  --__fhbox_tools_icon_invert: invert( 1 );
  --__fhbox_tools_icon_margin: 5px;
  --__fhbox_prev_next_z_index: 2147480100;
  --__fhbox_prev_next_bg: rgba( 0, 0, 0, 0.4 );
  --__fhbox_prev_next_padding: 10px 5px;
  --__fhbox_prev_next_icon_size: 25px;
  --__fhbox_prev_next_top: var( --__fhbox_centered_top );
  --__fhbox_fixed_wrap_padding: var( --__fhbox_tools_height ) 0;
  --__fhbox_desc_padding: 12px 16px;
  --__fhbox_desc_color: #fff;
  --__fhbox_desc_bg: #2b2b2b;
  --__fhbox_thumbs_height: 120px;
  --__fhbox_thumbs_border: thin solid #3d3d3d;
  --__fhbox_thumbs_bg: black;
  --__fhbox_thumbs_gap: 10px;
  --__fhbox_thumbs_scroll_height: 5px;
  --__fhbox_thumbs_scroll_bg: rgba( 255, 255, 255, 0.5 );
  --__fhbox_thumbs_img_size_within: 95px;
  --__fhbox_thumbs_active_outline: 4px solid #fff;
  --__fhbox_play_padding: 0 0 0 3px;
  --__fhbox_play_size: 50px;
  --__fhbox_play_bg: rgba( 0, 0, 0, 0.4 );
  --__fhbox_play_border_radius: 50%;
  --__fhbox_play_border: 2px rgba( 255, 255, 255, 0.6 ) solid;
  --__fhbox_play_svg: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNMyAyMnYtMjBsMTggMTAtMTggMTB6Ii8+PC9zdmc+" );
  --__fhbox_scrollbar_w: 16px;
  --__fhbox_media_w: 100vw;
  --__fhbox_media_h: 0px;
}

.__fhbox_override {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--__fhbox_override_bg);
  backdrop-filter: var(--__fhbox_override_filter);
  z-index: var(--__fhbox_inactive_z_index);
  opacity: 0;
  transition: opacity var(--__fhbox_global_transition_s);
}

html.__fhbox_active:not(.__fhbox_unloading) {
  overflow: hidden;
  padding-right: var(--__fhbox_scrollbar_w);
}

html.__fhbox_scroll_lock,
html.__fhbox_scroll_lock body {
  overflow: hidden;
}

.__fhbox_override.__fhbox_active,
.__fhbox_override.__fhbox_unloading {
  z-index: var(--__fhbox_override_z_index);
}

.__fhbox_override.__fhbox_active {
  opacity: 1;
}

.__fhbox_override.__fhbox_unloading {
  opacity: 0;
}

.__fhbox_loading {
  content: " ";
  position: absolute;
  top: calc(var(--__fhbox_loading_top) - var(--__fhbox_loading_size) / 2);
  left: calc(50% - var(--__fhbox_loading_size) / 2);
  opacity: 1;
  z-index: var(--__fhbox_loading_z_index);
  background: var(--__fhbox_loading_svg);
  height: var(--__fhbox_loading_size);
  width: var(--__fhbox_loading_size);
  background-size: var(--__fhbox_loading_size) var(--__fhbox_loading_size);
  animation: spin 3s linear infinite;
  transition: opacity var(--__fhbox_global_transition_s);
}

.__fhbox_loading.__fhbox_unloading {
  opacity: 0;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.__fhbox_tools {
  top: 0;
  left: 0;
  right: 100vw;
  height: var(--__fhbox_tools_height);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--__fhbox_tools_padding);
}

.__fhbox_tools a,
.__fhbox_tools button {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}

.__fhbox_tools svg {
  filter: var(--__fhbox_tools_icon_invert);
  margin: 0;
}

.__fhbox_tools a.__fhbox_download svg,
.__fhbox_tools button.__fhbox_close svg {
  width: var(--__fhbox_tools_icon_size);
  height: var(--__fhbox_tools_icon_size);
}

.__fhbox_tools a.__fhbox_download,
.__fhbox_tools button.__fhbox_close {
  padding: var(--__fhbox_tools_icon_margin);
  margin: 0 0 0 var(--__fhbox_tools_icon_margin);
}

.__fhbox_position {
  margin-right: auto;
  padding: 0 0 0 var(--__fhbox_tools_icon_margin);
}

.__fhbox_tools .__fhbox_prev,
.__fhbox_tools .__fhbox_next {
  background: var(--__fhbox_prev_next_bg);
  padding: var(--__fhbox_prev_next_padding);
  position: fixed;
  z-index: var(--__fhbox_prev_next_z_index);
  top: var(--__fhbox_prev_next_top);
  transform: translate3d(0, -50%, 0);
  line-height: 0;
}

.__fhbox_tools .__fhbox_prev svg,
.__fhbox_tools .__fhbox_next svg {
  width: var(--__fhbox_prev_next_icon_size);
  height: var(--__fhbox_prev_next_icon_size);
}

.__fhbox_prev {
  left: 0;
}

.__fhbox_next {
  right: 0;
}

.__fhbox_fixed_wrap {
  position: fixed;
  top: 0;
  height: calc(var(--__fhbox_viewport_h) - var(--__fhbox_thumbs_height));
  width: 100vw;
  overflow: hidden;
  z-index: var(--__fhbox_inactive_z_index);
  opacity: 0;
  transition: opacity var(--__fhbox_global_transition_s);
  padding: var(--__fhbox_fixed_wrap_padding);
}

.__fhbox_fixed_wrap.__fhbox_active {
  opacity: 1;
}

.__fhbox_fixed_wrap.__fhbox_unloading {
  opacity: 0;
}

.__fhbox_presentation {
  height: 100%;
  width: 100%;
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity var(--__fhbox_global_transition_s);
  opacity: 0;
  position: relative;
}

.__fhbox_presentation.__fhbox_loaded {
  opacity: 1;
}

.__fhbox_presentation img,
.__fhbox_presentation video {
  overflow: hidden;
  user-select: none;
  max-width: 100%;
  max-height: 100%;
  background: var(--__fhbox_desc_bg);
}

.__fhbox_presentation img {
  pointer-events: none;
}

.__fhbox_desc {
  flex-grow: 0;
  flex-shrink: 0;
  color: var(--__fhbox_desc_color);
  background: var(--__fhbox_desc_bg);
  padding: var(--__fhbox_desc_padding);
  text-align: center;
  width: var(--__fhbox_media_w);
  user-select: text !important;
}

.__fhbox_thumbs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--__fhbox_thumbs_height);
  width: 100vw;
  background: var(--__fhbox_thumbs_bg);
  border-top: var(--__fhbox_thumbs_border);
  display: flex;
  gap: var(--__fhbox_thumbs_gap);
  padding: 0 var(--__fhbox_thumbs_gap);
  align-items: center;
  overflow-x: auto;
  user-select: none;
}

.__fhbox_thumbs::-webkit-scrollbar {
  width: var(--__fhbox_thumbs_scroll_height);
  height: var(--__fhbox_thumbs_scroll_height);
  background: transparent;
}

.__fhbox_thumbs::-webkit-scrollbar-thumb {
  background: var(--__fhbox_thumbs_scroll_bg);
  border-top-left-radius: var(--__fhbox_thumbs_scroll_height);
  border-top-right-radius: var(--__fhbox_thumbs_scroll_height);
}

.__fhbox_thumbs .__fhbox_thumb_wrap:first-child {
  margin-left: auto;
}

.__fhbox_thumbs .__fhbox_thumb_wrap:last-child {
  margin-right: auto;
}

.__fhbox_thumbs img {
  height: var(--__fhbox_thumbs_img_size_within);
  max-width: var(--__fhbox_thumbs_img_size_within);
  object-fit: cover;
  cursor: pointer;
  user-select: none;
}

.__fhbox_thumb_wrap.__fhbox_active {
  outline: var(--__fhbox_thumbs_active_outline);
}

.__fhbox_thumb_wrap {
  position: relative;
}

.__fhbox_video:after {
  content: var(--__fhbox_play_svg);
  padding: var(--__fhbox_play_padding);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--__fhbox_play_size);
  width: var(--__fhbox_play_size);
  background: var(--__fhbox_play_bg);
  border-radius: var(--__fhbox_play_border_radius);
  border: var(--__fhbox_play_border);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
  transition: color var(--__fhbox_global_transition_s);
  cursor: pointer;
}

:root {
  --baseline: 16px;
  --lh_multiplier: 0.8;
  --font_family: 'Roboto', sans-serif;
  --ru: var( --baseline );
  --ru_0_25: calc( var( --baseline ) * 0.25 );
  --ru_0_5: calc( var( --baseline ) * 0.5 );
  --ru_0_75: calc( var( --baseline ) * 0.75 );
  --ru_1_25: calc( var( --baseline ) * 1.25 );
  --ru_1_5: calc( var( --baseline ) * 1.5 );
  --ru_1_75: calc( var( --baseline ) * 1.75 );
  --ru_2: calc( var( --baseline ) * 2 );
  --ru_2_5: calc( var( --baseline ) * 2.5 );
  --ru_3: calc( var( --baseline ) * 3 );
  --font_weight_normal: 300;
  --font_weight_bold: 400;
  --color_content_bg: #fff;
  --color_body_bg: #dbdbdb;
  --color_text: #000;
  --color_link: #3e6d94;
  --color_link_hover: #3e6d94;
  --color_borders: #ccc;
  --theme_borders: solid thin var( --color_borders );
  --h1_size: calc( var( --baseline ) * 2 );
  --h2_size: calc( var( --baseline ) * 1.4 );
  --h3_size: calc( var( --baseline ) * 1.25 );
  --h4_size: calc( var( --baseline ) * 1.1 );
  --h5_size: calc( var( --baseline ) * 1 );
  --h6_size: calc( var( --baseline ) * 1 );
  /* Menus */
  --nav_responsive_bg: #c5c5c5;
  --menu_color: var( --color_text );
  --menu_bg: transparent;
  --menu_active_bg: var( --color_content_bg );
  --menu_hover_bg: var( --menu_active_bg );
  --menu_h_padding: var( --ru_0_5 ) var( --ru_1_25 );
  --portfolio_gal_bg: rgba( 0, 0, 0, 0.10 );
  --portfolio_tech_bg: rgba( 0, 0, 0, 0.10 );
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  --play_svg: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNMyAyMnYtMjBsMTggMTAtMTggMTB6Ii8+PC9zdmc+" );
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color_content_bg: #242424;
    --color_body_bg: #000;
    --color_text: #fff;
    --color_link: #6eade0;
    --color_link_hover: #6eade0;
    --color_borders: #595959;
    --nav_responsive_bg: #000;
    --portfolio_gal_bg: rgba( 0, 0, 0, 0.20 );
    --portfolio_tech_bg: rgba( 255, 255, 255, 0.15 );
  }
}
body {
  color: var(--color_text);
  font-family: var(--font_family);
  font-size: var(--baseline);
  line-height: calc(var(--baseline) + var(--baseline) * var(--lh_multiplier));
  font-weight: var(--font_weight_normal);
  background: var(--color_body_bg);
}

a {
  color: var(--color_link);
}

a:hover {
  color: var(--color_link_hover);
}

p,
ul,
ol,
pre,
blockquote,
address,
legend,
dd,
table,
figure,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 var(--ru_0_5);
  padding: 0;
}

h1, .h1 {
  font-size: var(--h1_size);
  line-height: calc(var(--h1_size) + var(--h1_size) * var(--lh_multiplier));
}

h2, .h2 {
  font-size: var(--h2_size);
  line-height: calc(var(--h2_size) + var(--h2_size) * var(--lh_multiplier));
}

h3, .h3 {
  font-size: var(--h3_size);
  line-height: calc(var(--h3_size) + var(--h3_size) * var(--lh_multiplier));
}

h4, .h4 {
  font-size: var(--h4_size);
  line-height: calc(var(--h4_size) + var(--h4_size) * var(--lh_multiplier));
}

h5, .h5 {
  font-size: var(--h5_size);
  line-height: calc(var(--h5_size) + var(--h5_size) * var(--lh_multiplier));
}

h6, .h6 {
  font-size: var(--h6_size);
  line-height: calc(var(--h6_size) + var(--h6_size) * var(--lh_multiplier));
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-weight: var(--font_weight_bold);
}

h5, .h5,
h6, .h6 {
  font-weight: var(--font_weight_normal);
}

ul,
ol {
  margin: 0 0 var(--ru_0_5);
  padding: 0 0 0 var(--ru);
}
ul > ul, ul > ol,
ol > ul,
ol > ol {
  margin: 0;
}

pre,
blockquote,
address,
legend,
dd,
table,
figure {
  margin: 0 0 var(--ru);
}

strong, b {
  font-weight: var(--font_weight_bold);
}

hr {
  margin: var(--ru) 0;
  border: none;
  border-top: var(--theme_borders);
}

.ico {
  display: inline-flex;
}

.ico svg {
  fill: var(--color_text);
  height: 1rem;
  width: 1rem;
}

.hidden {
  display: none !important;
}

.print_only {
  display: none !important;
  visibility: hidden !important;
}

@media print {
  .print_only {
    display: block !important;
    visibility: visible !important;
  }
  .print_hidden,
  .screen_only {
    display: none !important;
    visibility: hidden !important;
  }
}
@media screen {
  .screen_only {
    display: block !important;
    visibility: visible !important;
  }
  .screen_hidden,
  .print_only {
    display: none !important;
    visibility: hidden !important;
  }
}
.thin {
  font-weight: var(--font_weight_normal);
}

#app {
  max-width: 100%;
  width: 1000px;
  margin: var(--ru_2) auto var(--ru_2);
}

#content {
  background: var(--color_content_bg);
  padding: var(--ru_2_5) var(--ru_3) var(--ru_2);
}

nav {
  display: flex;
  height: 100%;
  align-items: center;
  font-weight: var(--font_weight_bold);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 1px;
  position: sticky;
  top: -1px;
  background: var(--color_body_bg);
  z-index: 1000;
}

#split_nav_item {
  margin-right: auto;
}

nav a:hover {
  text-decoration: none;
}

nav .ico {
  margin: 0 var(--ru_0_5) 0 0;
}

menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
}

menu > li {
  display: flex;
  padding: 0;
  margin: 0;
  position: relative;
  flex-direction: row;
}

menu > li > * {
  color: var(--menu_color);
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 100%;
  padding: var(--menu_h_padding);
}

menu > li > *.active {
  background: var(--menu_active_bg);
}

menu > li > *:focus:not(.active),
menu > li > *:focus-visible:not(.active),
menu > li > *:hover:not(.active) {
  background: var(--menu_hover_bg);
}

menu > li > *:focus,
menu > li > *:focus-visible,
menu > li > *:hover {
  color: var(--menu_color);
}

header {
  border-bottom: var(--theme_borders);
  padding: 0 0 var(--ru);
  margin: 0 0 var(--ru_1_5);
  display: flex;
  align-items: flex-end;
}

#selfie {
  display: inline-block;
  border-radius: 50%;
  margin: 0 var(--ru) 0.3rem 0;
  height: 60px;
  width: 60px;
}

header div.text {
  margin-right: auto;
}

header ul.contact_list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: var(--font_weight_bold);
  text-align: right;
  line-height: 1.5;
  justify-self: flex-end;
}

#responsive_socials {
  display: none;
  margin-top: var(--ru_0_5);
}

header ul.contact_list a {
  display: inline-flex;
  align-items: center;
}

header ul.contact_list .ico {
  margin: 0 var(--ru_0_25) 0 0;
}

header ul.contact_list .ico svg {
  fill: var(--color_link);
}

header h1 {
  line-height: 1.25;
  margin: 0;
}

header h2.subheading {
  font-weight: var(--font_weight_normal);
  line-height: 1.5;
  margin: 0;
}

h2.main_part {
  padding: 0 0 0 var(--ru_0_75);
  margin: 0 0 var(--ru);
  border-left: var(--ru_0_5) solid var(--color_borders);
}

.position {
  margin: 0 0 var(--ru_1_5) 0;
}

.position h3 {
  line-height: 1.3;
  margin: 0 0 var(--ru_0_25);
}

.position .titles {
  font-weight: var(--font_weight_normal);
}

.position h6 {
  line-height: 1.25;
  margin: 0 0 var(--ru_0_5);
  font-size: 90%;
  font-style: italic;
}

.position a {
  font-weight: var(--font_weight_bold);
}

#portfolio h1 {
  text-align: center;
  margin: 0 0 var(--ru_2);
}

#portfolio h2 {
  margin: var(--ru) calc(var(--ru_3) * -1);
  padding: var(--ru_0_5) var(--ru);
  background: black;
  text-align: center;
}

#portfolio .case_study {
  padding: 0 0 var(--ru);
  margin: 0 0 var(--ru);
}

ul.tech_used {
  list-style: none;
  margin: 0 0 var(--ru);
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.85rem;
  justify-content: center;
}

ul.tech_used li {
  line-height: 1;
  border-radius: 5px;
  padding: 5px 6px;
  background: var(--portfolio_tech_bg);
  white-space: nowrap !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.gallery {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.gallery a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  border: thin solid rgba(0, 0, 0, 0.15);
  position: relative;
  background: var(--portfolio_gal_bg);
  padding: 2px;
  overflow: hidden;
  cursor: pointer;
}

.gallery img {
  max-width: calc((100vw - var(--ru_3) * 2 - 16px) / 3);
  height: auto !important;
}

.__fhbox_desc {
  font-weight: var(--font_weight_bold);
}

@media only screen and (max-width: 1000px) {
  #app {
    margin: 0 auto;
  }
}
@media only screen and (max-width: 780px) {
  :root {
    --baseline: 14px;
  }
  .hide_responsive {
    display: none;
  }
  body {
    padding: 0 0 38px 0;
  }
  nav {
    position: fixed;
    top: auto;
    bottom: 0;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: var(--ru_0_5);
    font-size: 0.9rem;
    letter-spacing: 0;
    background: var(--nav_responsive_bg);
  }
  #split_nav_item {
    margin-right: 0;
  }
  menu {
    display: flex;
    justify-content: center;
    gap: 0 5px;
  }
  menu > li > * {
    border-radius: 8px;
    padding: var(--ru_0_5) var(--ru_0_75);
  }
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 0 var(--ru_1_25);
  }
  header div.text {
    margin-right: 0;
  }
  header ul.contact_list {
    text-align: center;
  }
  #responsive_socials {
    display: block;
  }
  #content {
    padding: var(--ru_1_25);
  }
  header h1, .h1 {
    font-size: 1.6rem;
    line-height: 1;
    margin: 0 0 var(--ru_0_5);
  }
  header h2.subheading {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 var(--ru_0_75);
  }
  #selfie {
    border-radius: 50%;
    margin: 0 0 var(--ru_0_75);
    transform: scaleX(-1);
    height: 80px;
    width: 80px;
  }
  #portfolio h1 {
    text-align: center;
    margin: 0 0 var(--ru);
  }
  #portfolio h2 {
    margin: var(--ru) calc(var(--ru_1_25) * -1);
  }
}
@media only screen and (max-width: 630px) {
  .gallery img {
    max-width: calc((100vw - var(--ru_2_5) - 20px) / 2);
  }
}
@media only screen and (max-width: 435px) {
  .gallery img {
    max-width: 100%;
  }
}
@media only screen and (max-width: 375px) {
  nav .ico {
    display: none;
  }
}
@media print {
  :root {
    --baseline: 10pt;
  }
  @page {
    margin: 0.5in;
  }
  a {
    color: #000 !important;
  }
  body,
  html,
  #app,
  #content {
    margin: 0;
    padding: 0;
    color: #000;
    background: transparent;
  }
  nav {
    display: none;
  }
  header {
    margin: 0 0 var(--ru);
  }
  #selfie {
    display: none;
  }
  header ul.contact_list {
    font-weight: var(--font_weight_normal);
  }
  ul,
  ol {
    padding: 0 0 0 var(--ru_1_25);
  }
  h2.main_part {
    line-height: 1.5;
    padding: 0 0 0 var(--ru_0_5);
    margin: var(--ru_1_25) 0 var(--ru);
  }
  .position {
    margin: 0 0 var(--ru) 0;
  }
  .position li a {
    font-weight: var(--font_weight_normal);
  }
}