:root {
  --breakpoint: 768px;

  --col-prim: hsl(333, 100%, 50%);
  --col-prim-li: hsl(333, 100%, 77%);
  --col-prim-vli: hsl(333, 100%, 96%);

  --col-sec: hsl(33, 100%, 50%);
  --col-sec-li: hsl(33, 100%, 77%);
  --col-sec-vli: hsl(33, 100%, 96%);

  --col-ter: hsl(202, 100%, 50%);
  --col-ter-li: hsl(202, 100%, 77%);
  --col-ter-vli: hsl(202, 100%, 96%);

  --col-text: hsl(33, 44%, 8%);

  --gap-xs: 6pt;
  --gap-sm: 10pt;
  --gap: 14pt;
  --gap-lg: 22pt;
  --gap-xl: 36pt;

  --radius: 8px;
}

@font-face {
  font-family: YoungSerif;
  src: url(/fonts/YoungSerif-Regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: YoungSerif;
  src: url(/fonts/YoungSerif-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: YoungSerif;
  src: url(/fonts/YoungSerif-Light.ttf);
  font-weight: 100;
}

@font-face {
  font-family: YoungSerif;
  src: url(/fonts/YoungSerif-LightItalic.ttf);
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: YoungSerif;
  src: url(/fonts/YoungSerif-RegularItalic.ttf);
  font-weight: normal;
  font-style: italic;
}

.limit {
  max-width: var(--breakpoint);
  margin: auto;
  padding: 0 var(--gap);
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  font-family: YoungSerif;
  color: var(--col-text);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1,
h2 {
  font-size: 20pt;
  color: var(--col-prim);
  margin: var(--gap-lg) 0 var(--gap-xs) 0;
  text-align: center;
  margin-top: 34pt;
}

h4 {
  text-align: center;
  /* margin: var(--gap-sm) 0; */
  margin: var(--gap) 0 0 0;
  color: var(--col-sec);
  font-size: 15pt;
  font-weight: bold;
}

p,
span {
  font-size: 13pt;
  margin: var(--gap-sm) 0;
}

a {
  display: block;
  text-align: left;
  color: var(--col-ter);
  text-decoration: underline;
  font-style: italic;
  /* margin: var(--gap-sm) 0; */
  margin: 0;
  padding: 0;
  font-size: 13pt;

  i {
    font-size: 13pt;
  }
}

.bg,
.bg-adjust {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-size: 100% 90%;
}

.bg {
  /* background-color: var(--col-ter-vli); */
  background-image: url("/images/bg_crop.webp");
  background-repeat: no-repeat;
  background-position: top;
  /* background-size: cover; */
  /* background-color: white; */

  --blr: blur(11px) opacity(0.222) saturate(444%) brightness(144%);
  /* hue-rotate(33deg);*/
  -webkit-filter: var(--blr);
  -moz-filter: var(--blr);
  -o-filter: var(--blr);
  -ms-filter: var(--blr);
  filter: var(--blr);
  /* display: none; */

  /* -webkit-backdrop-filter: blur(); */
}

/* .bg-adjust { */
/* background: linear-gradient(188deg, rgba(0, 106, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); */
/* background: linear-gradient(188deg, var(--col-ter-vli) 0%, rgba(255, 255, 255, 0) 100%); */
/* hsl(202, 100%, 96%) */
/* background: linear-gradient(188deg, hsla(222, 100%, 96%, 0.5) 0%, rgba(255, 255, 255, 0) 100%); */
/* } */

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  height: 85vh;
  width: 100%;

  img {
    display: block;
    width: 288px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 42pt;

    --shadow: drop-shadow(4px -2px 11px white);

    filter: var(--shadow);
    -webkit-filter: var(--shadow);
  }

  p {
    text-align: center;
    width: 77%;
    margin-left: auto;
    margin-right: auto;
  }
}

.space-v {
  height: var(--gap-lg);
}

.space-vs {
  height: var(--gap);
}

.text-center {
  text-align: center;
}

.text-thin {
  font-weight: 100;
  font-style: italic;
  font-size: 13pt;
}

.text-lg {
  font-size: 15pt;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.footer {
  margin-top: 66px;
  margin-bottom: 33px;
  display: flexbox;
  align-items: center;
  justify-items: center;
  justify-content: center;
  font-weight: 100;
  font-style: italic;
  font-size: 12pt;
}

.work-itms {
  margin-bottom: var(--gap-xl);
}

.work-itm {
  border-radius: var(--radius);
  border: 2px solid var(--col-prim-vli);
  padding: var(--gap);
  /* background-color: var(--col-prim-vli); */
}

.work-itm-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  img {
    width: 128px;
  }
}

.divider {
  font-size: 13pt;
  text-align: center;
  margin-top: var(--gap-xs);
  margin-bottom: var(--gap);
}

.no-margin-bot {
  margin-bottom: 0;
}


.col-prim-li {
  color: var(--col-prim-li);
}

.col-sec-li {
  color: var(--col-sec-li);
}

.col-ter-li {
  color: var(--col-ter-li);
}

.contact {
  margin-top: var(--gap-lg);
}

.contact span {
  display: block;
  /* display: inline-block; */
  /* width: fit-content; */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  /* border: 1px solid var(--col-ter-vli); */
  /* border-radius: var(--radius); */
  padding: var(--gap-sm);
  color: var(--col-prim);
  /* margin: var(--gap-sm) 0; */
}