:root {
  --clr-background: #ffbac0;
  --font-main: YAD1aDS1Jq8-0;
  --font-handwritten: YADpK2K4GhA-0;
  --clr-text-nav: #304254;
  --clr-bg-nav: rgba(255, 131, 168, 0.2);
  --clr-bg-nav-sticky: hsl(355, 100%, 91%);
  --font-size-text: clamp(1.3rem, 3vw, 1.5rem);
  --font-size-navbar: clamp(0.5rem, 0.5rem + 0.5vw, 1.05rem);
}

a,
a:hover,
a.btn-link {
  color: black;
  text-decoration: none;
}

a.nav-link,
a.nav-link:visited {
  color: black;
  border-bottom: 1px solid transparent;
}

a.nav-link:hover,
a.nav-link:active,
a.nav-link:focus {
  color: black;
  border-bottom: 1px solid var(--clr-background);
}

.text-handwritten {
  font-family: var(--font-handwritten);
}

section + section {
  margin-top: 1rem;
}

address {
  font-size: 1rem;
}

section > header {
  font-size: 2.5rem;
  font-weight: 300;
  text-transform: uppercase;
  border-bottom: 1px black solid;
  text-align: left;
  margin-bottom: 1rem;
}

section > article > header {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  font-weight: 700;
}

section#kontakt article {
  display: flex;
  flex-direction: column;
}

.about-me > div > picture > img {
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
}

.main-logo {
  width: 30rem;
}

p {
  text-align: justify;
  font-size: var(--font-size-text, 1.3rem);
}

body {
  font-family: var(--font-main), "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: white;
  padding-top: 0rem;
}

html {
  position: relative;
}

html:before {
  z-index: -1000;
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_200.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 0%;
  background-size: cover;
}

@media (min-width: 411px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_411.png");
  }
}
@media (min-width: 562px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_562.png");
  }
}
@media (min-width: 686px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_686.png");
  }
}
@media (min-width: 780px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_780.png");
  }
}
@media (min-width: 906px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_906.png");
  }
}
@media (min-width: 988px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_988.png");
  }
}
@media (min-width: 1070px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_1070.png");
  }
}
@media (min-width: 1282px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_1282.png");
  }
}
@media (min-width: 1287px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_1287.png");
  }
}
@media (min-width: 1367px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_1367.png");
  }
}
@media (min-width: 1400px) {
  html:before {
    background-image: url("./imgs/header-bg_s5scyu/header-bg_s5scyu_c_scale\,w_1400.png");
  }
}

.price-list-item > div.d-flex {
  display: grid;
}

.display-7 {
  font-size: 2rem;
}
.display-8 {
  font-size: 1.5rem;
}
.navbar-toggler {
  appearance: none;
  cursor: pointer;
  width: 3.5rem;
  height: 2.5rem;
  color: white;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked {
  background-color: rgba(255, 255, 255, 0.5);
}

main > section {
  scroll-margin-top: 75px; /* Adjust this value to match your fixed header's height */
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
}

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

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

h1:focus {
  outline: none;
}

#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #ff83a833;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.nav-item {
  font-size: var(--font-size-navbar, 1.05rem);
  color: var(--clr-text-nav);
  font-weight: 700;
  text-transform: uppercase;
}

.navbar-brand {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clr-text-nav);
}

.nav-scrollable {
  display: none;
}

.navbar-toggler {
  background-color: var(--clr-bg-nav);
}

.navbar-toggler:checked ~ .nav-scrollable {
  display: block;
}

nav {
  background-color: var(--clr-bg-nav-sticky, #ffbac0);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

section#portfolio article picture img {
  height: 490px; /* Set to the desired height, e.g., the height of your smallest image */
  width: 100%; /* This makes sure the image width is responsive and fills the container */
  object-fit: cover; /* This will crop the image to fill the box, maintaining its aspect ratio */
  object-position: center top; /* Adjusts the position of the image within its container */
}

section#portfolio article header > h3 {
  font-size: calc(var(--font-size-text) + 0.4rem);
  text-transform: uppercase;
  font-weight: 700;
}

section#portfolio .additional-text {
  font-style: italic;
}

section#portfolio article p {
  font-size: 1.2rem;
  padding: 1rem;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 700;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 100;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 200;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 800;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: YADpK2K4GhA-0;
  src: url(fonts/fcdb844429fdf1f9b3c6249ffe70b3ab.woff2);
  font-style: italic;
  font-weight: 900;
}

/**/
@font-face {
  font-family: YAD1aDS1Jq8-0;
  src: url(fonts/db0eaca3e350bcc666ab9f746c07ff24.woff2);
  font-style: normal;
  font-weight: 400;
}

/**/
@font-face {
  font-family: YAD1aDS1Jq8-0;
  src: url(fonts/9c7f52cf3b8ceceeea620b3ee0e5dfc1.woff2);
  font-style: normal;
  font-weight: 700;
}

/**/
@font-face {
  font-family: YAD1aDS1Jq8-0;
  src: url(fonts/f4fc52555bcfe034ef2430ae7722aa3f.woff2);
  font-style: italic;
  font-weight: 400;
}

/**/
@font-face {
  font-family: YAD1aDS1Jq8-0;
  src: url(fonts/3168818f10000971d35d4337dac2f5c1.woff2);
  font-style: italic;
  font-weight: 700;
}
/**/
@font-face {
  font-family: YAFdJt8dAY0-0;
  src: url(fonts/226618464330c99b64fcaf1d7142c1e7.woff2);
  font-style: normal;
  font-weight: 500;
}

.masthead {
  height: 100%;
}