body {
  font-family: "Roboto", sans-serif;
  line-height: 28px;
}

h1 {
  font-size: 60px;
  font-weight: 100;
}

.container > ul {
  font-weight: 300;
}

.award-highlight {
  font-weight: 700;
}

p {
  letter-spacing: 0.5px;
}

#header_buttons a {
  width: 46px;
  padding: 10px;
  margin: 2px;
}

.infobtns a {
  margin: 4px 6px 8px 6px;
  font-size: larger;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.normal-bg {
  background-color: #f3eeea;
}

.dark-bg {
  background-color: #e6e1de;
}

.dark-bg a:not(.storebadge):not(.btn) {
  color: #0040c7;
}

.dark-bg a:not(.storebadge):not(.btn):hover {
  color: #00155f;
}

.storebadge {
  display: inline-block;
  vertical-align: middle;
  height: 60px;
  margin: 4px;
  text-decoration: none;
}

.storebadge img {
  height: 60px;
  width: auto;
  padding: 0;
}

.storebadge img[src*="/ios_badge_"] { width: 179.5px; }
.storebadge img[src*="/macos_badge_"] { width: 234.2px; }
.storebadge img[src*="/microsoft_badge_"] { width: 219.5px; }
.storebadge img[src*="/microsoft_badge_de"] { width: 249.5px; }
.storebadge img[src*="/playstore_badge_"] { width: 202.3px; }

/* ms-store-badge {
    width: 233px;
}

ms-store-badge::part(img) {
    height: 60px;
    width: 233px;
} */

div a.gumroad-button {
  padding: 8px 16px !important;
}

.section-padding {
  padding-top: 50px;
  padding-bottom: 50px;
}

.top {
  color: #fff;
}

.top h1 {
  font-size: 72px;
  margin-top: 70px;
}

.top h2 {
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 50px;
}

.top .me {
  width: 300px;
  height: 300px;
  float: right;
  border-radius: 50%;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
}

.navbar-dark {
  --bs-navbar-color: #fff;
  --bs-navbar-brand-color: #fff;
  background-color: #5875f7;
  background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
}

.about-me {
  text-align: center;
}

.app-header {
  flex-wrap: wrap;
  display: flex;
  margin-top: 25px;
}

.app-header h1 {
  margin-top: 0;
}

.app-header p {
  max-width: 600px;
}

.app-header img {
  margin-bottom: 15px;
  margin-right: 20px;
  align-self: center;
  width: 160px;
  height: 160px;
  border-radius: 10%;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
}

.center {
  text-align: center;
}

.app-header div {
  flex-grow: 1;
}

.carousel {
  max-width: 896px;
  padding: 0;
  margin: auto;
  margin-bottom: 70px;
}

.testimonial .carousel {
  margin-bottom: 0;
}

svg {
  max-height: 18px;
  fill: white;
  margin-top: -2px;
}

.btn-outline-light:hover svg {
  fill: black;
}

.carousel-imgs {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
  border-radius: 16px;
}

.carousel-imgs .carousel-item {
  aspect-ratio: 16 / 9;
}

.bg-testimonial {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/pattern.png);
}

.testimonial .testimonial-slide {
  width: 70%;
  margin: auto;
  text-align: center;
  margin-bottom: 15px;
  color: #fff;
}

.testimonial .testimonial-slide .carousel-item h4 {
  margin-bottom: 0;
  margin-top: 15px;
}

.testimonial .testimonial-slide .carousel-item p {
  position: relative;
  padding: 0 50px;
}

.testimonial .testimonial-slide .carousel-item p:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IndoaXRlIiBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNOTYgMjI0Qzg0LjcyIDIyNCA3NC4wNSAyMjYuMyA2NCAyMjkuOVYyMjRjMC0zNS4zIDI4LjctNjQgNjQtNjRjMTcuNjcgMCAzMi0xNC4zMyAzMi0zMlMxNDUuNyA5NiAxMjggOTZDNTcuNDIgOTYgMCAxNTMuNCAwIDIyNHY5NmMwIDUzLjAyIDQyLjk4IDk2IDk2IDk2czk2LTQyLjk4IDk2LTk2UzE0OSAyMjQgOTYgMjI0ek0zNTIgMjI0Yy0xMS4yOCAwLTIxLjk1IDIuMzA1LTMyIDUuODc5VjIyNGMwLTM1LjMgMjguNy02NCA2NC02NGMxNy42NyAwIDMyLTE0LjMzIDMyLTMycy0xNC4zMy0zMi0zMi0zMmMtNzAuNTggMC0xMjggNTcuNDItMTI4IDEyOHY5NmMwIDUzLjAyIDQyLjk4IDk2IDk2IDk2czk2LTQyLjk4IDk2LTk2UzQwNSAyMjQgMzUyIDIyNHoiLz48L3N2Zz4=");
}

.testimonial .testimonial-slide .carousel-item p:after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IndoaXRlIiBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNOTYgOTZDNDIuOTggOTYgMCAxMzguMSAwIDE5MnM0Mi45OCA5NiA5NiA5NmMxMS4yOCAwIDIxLjk1LTIuMzA1IDMyLTUuODc5VjI4OGMwIDM1LjMtMjguNyA2NC02NCA2NGMtMTcuNjcgMC0zMiAxNC4zMy0zMiAzMnMxNC4zMyAzMiAzMiAzMmM3MC41OCAwIDEyOC01Ny40MiAxMjgtMTI4VjE5MkMxOTIgMTM4LjEgMTQ5IDk2IDk2IDk2ek00NDggMTkyYzAtNTMuMDItNDIuOTgtOTYtOTYtOTZzLTk2IDQyLjk4LTk2IDk2czQyLjk4IDk2IDk2IDk2YzExLjI4IDAgMjEuOTUtMi4zMDUgMzItNS44NzlWMjg4YzAgMzUuMy0yOC43IDY0LTY0IDY0Yy0xNy42NyAwLTMyIDE0LjMzLTMyIDMyczE0LjMzIDMyIDMyIDMyYzcwLjU4IDAgMTI4LTU3LjQyIDEyOC0xMjhWMTkyeiIvPjwvc3ZnPg==");
}

.footer {
  text-align: center;
  padding: 30px 0;
}

#top {
  position: relative;
  overflow: hidden;
}

#top .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

#top .top {
  position: relative;
  z-index: 1;
}

#testimonial_diarium {
  background: url("../img/testimonial_diarium.webp") 50% 0 no-repeat fixed;
  background-size: cover;
}

#testimonial_workinghours {
  background: url("../img/testimonial_workinghours.webp") 50% 0 no-repeat fixed;
  background-size: cover;
}

#testimonial_geophoto {
  background: url("../img/testimonial_geophoto.webp") 50% 0 no-repeat fixed;
  background-size: cover;
}

.testimonial-author {
  display: block;
  margin-top: 0.5rem;
  font-weight: 600;
  font-style: normal;
}

.offsetheader::before {
  display: block;
  content: " ";
  margin-top: -90px;
  height: 90px;
  visibility: hidden;
  pointer-events: none;
}

.modal-dialog {
  max-width: 600px;
}

.modal-footer .btn-primary {
  background-color: #5875f7;
  border-color: #5875f7;
}

.modal-footer .btn-primary:hover {
  background-color: #3558f5;
  border-color: #274cf4;
}

@media screen and (max-width: 991px) {
  .app-header {
    text-align: center;
    display: inline-block;
    margin-top: 0px;
    width: 100%;
  }
  .app-header img {
    display: inline-block;
    margin-right: 0px;
    width: 100px;
    height: 100px;
  }
}

@media screen and (max-width: 767px) {
  .top h1 {
    margin-top: 0;
    font-size: 50px;
  }
  .top .me {
    float: none;
    width: 200px;
    height: 200px;
  }
  .testimonial .testimonial-slide {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .top {
    text-align: center;
  }
  .row > * {
    width: 100%;
  }
  .top .me {
    margin-top: 20px;
    display: inline-block;
  }
  .top h2 {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 575px) {
  .testimonial .testimonial-slide .carousel-item p {
    padding: 0 30px;
  }
  .testimonial .testimonial-slide .carousel-item p:before,
  .testimonial .testimonial-slide .carousel-item p:after {
    font-size: 22px;
  }
}

:root {
  --gumroad-logo: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU3IiBoZWlnaHQ9IjIyIiB2aWV3Qm94PSIwIDAgMTU3IDIyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOTMuMjkyOSAwLjc3ODMyQzkwLjA1MDIgMC43NzgzMiA4Ni44ODAxIDMuNTgzMjYgODYuNTE1OCA3LjYzNjEzVjEuMTEyNDNIODEuODU4OVYyMC43ODNIODYuNTcyN1YxMS4yNjE3Qzg2LjU3MjcgOC41OTQ1MyA4OC41NTE2IDQuODMyMTggOTMuMjkyOSA0LjgzMjE4VjAuNzc4MzJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTQyLjc3OCAxNy42MzQxVjQuMTU3MzlIMTQ1LjUwOUMxNDkuMTUgNC4xNTczOSAxNTIuMTA4IDYuMzMxMDUgMTUyLjEwOCAxMC43ODcxQzE1Mi4xMDggMTUuMjQzMSAxNDkuMTUgMTcuNjM0MSAxNDUuNTA5IDE3LjYzNDFIMTQyLjc3OFpNMTM4LjExMyAyMC43ODU5SDE0Ni4wNzhDMTUwLjk3IDIwLjc4NTkgMTU3IDE3Ljc0MjggMTU3IDEwLjc4NzFDMTU3IDMuOTQwMDIgMTUwLjk3IDEuMTE0MjYgMTQ2LjA3OCAxLjExNDI2SDEzOC4xMTNWMjAuNzg1OVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjAuMjI0IDExLjAwNThDMTIwLjIyNCA3LjQxOTIyIDEyMi4xNTggNC40ODQ3NyAxMjUuMzQ0IDQuNDg0NzdDMTI4LjQxNiA0LjQ4NDc3IDEzMC4xMjMgNy40MTkyMiAxMzAuMTIzIDExLjAwNThDMTMwLjEyMyAxNC41OTIzIDEyOC40MTYgMTcuNTI2NyAxMjUuMzQ0IDE3LjUyNjdDMTIyLjE1OCAxNy41MjY3IDEyMC4yMjQgMTQuNTkyMyAxMjAuMjI0IDExLjAwNThaTTExNS40NDUgMTEuMjIzMUMxMTUuNDQ1IDE3LjA5MiAxMTguNjMxIDIxLjIyMiAxMjMuNjM3IDIxLjIyMkMxMjcuMjc4IDIxLjIyMiAxMjkuNDQgMTguOTM5NiAxMzAuNTc4IDE1LjI0NDRWMjAuNzg3MkgxMzUuMjQyVjEuMTE1NkgxMzAuNTc4VjYuMzMyMzlDMTI5LjU1NCAyLjg1NDUzIDEyNy4zOTIgMC43ODk1NTEgMTIzLjk3OSAwLjc4OTU1MUMxMTguODU5IDAuNzg5NTUxIDExNS40NDUgNS4yNDU1NiAxMTUuNDQ1IDExLjIyMzFaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNOS4yMTU5OSAyMS4yMjJDMy40MTMzMyAyMS4yMjIgMCAxNi43NjYgMCAxMS4yMjMxQzAgNS40NjI5MiAzLjc1NDY2IDAuNzg5NTUxIDEwLjkyMjcgMC43ODk1NTFDMTguMzE4MiAwLjc4OTU1MSAyMC44MjEzIDUuNTcxNjEgMjAuOTM1MSA4LjI4ODY4SDE1LjU4NzVDMTUuNDczOCA2Ljc2NzEyIDE0LjEwODQgNC40ODQ3OCAxMC44MDg5IDQuNDg0NzhDNy4yODE3NyA0LjQ4NDc4IDUuMDA2MjIgNy40MTkyMiA1LjAwNjIyIDExLjAwNThDNS4wMDYyMiAxNC41OTIzIDcuMjgxNzcgMTcuNTI2NyAxMC44MDg5IDE3LjUyNjdDMTMuOTk0NiAxNy41MjY3IDE1LjM2IDE1LjEzNTcgMTUuOTI4OSAxMi43NDQ3SDEwLjgwODlWMTAuNzg4NEgyMS41NTI0VjIwLjc4NzJIMTYuODM5MVYxNC40ODM2QzE2LjQ5NzggMTYuNzY2IDE1LjAxODYgMjEuMjIyIDkuMjE1OTkgMjEuMjIyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTMxLjEwNzkgMjEuMjIwNkMyNi42NzA2IDIxLjIyMDYgMjMuOTM5OSAxOC4zOTQ5IDIzLjkzOTkgMTIuNzQzM1YxLjExNDI2SDI4LjcxODZWMTIuNzQzM0MyOC43MTg2IDE1LjY3NzggMzAuMTk3NyAxNy4wOTA3IDMyLjcwMDggMTcuMDkwN0MzNy41OTMzIDE3LjA5MDcgMzkuNDEzNyAxMS4zMzA1IDM5LjQxMzcgNy4zMDkxOVYxLjExNDI2SDQ0LjE5MjRWMjAuNzg1OUgzOS41Mjc1VjEzLjUwNDFDMzguNjE3MyAxNy41MjU0IDM2LjExNDEgMjEuMjIwNiAzMS4xMDc5IDIxLjIyMDZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNzIuNzQxMSAwLjc3ODMyQzY4LjY2NDMgMC43NzgzMiA2Ni4wOTI0IDQuNTQwMzcgNjUuMjUyOSA4LjAxODg0QzY1LjEwOTMgMy4zNTcyNyA2Mi43MDk1IDAuNzc4MzIgNTguODY5NyAwLjc3ODMyQzU1LjU1MjIgMC43NzgzMiA1Mi40NzQzIDMuNjA0MzUgNTEuNjc1IDguMDc1MTJWMS4xMTI5Nkg0Ny4wMTY2VjIwLjc4NTFINTEuNzM0N1YxMy43MzI3QzUxLjczNDcgMTEuOTg0MyA1Mi40OTc4IDQuODA5MzkgNTcuMjQ3MyA0LjgwOTM5QzYwLjMyNDEgNC44MDkzOSA2MC42NDQ5IDcuNDYwNDMgNjAuNjQ0OSAxMS4wODQyVjIwLjc4NTFINjUuMzYwN1YxMy43MzI3QzY1LjM2MDcgMTEuOTg0MyA2Ni4xNTU0IDQuODA5MzkgNzAuOTA0OSA0LjgwOTM5QzczLjk3OSA0LjgwOTM5IDc0LjI5NjcgNy40NjA0MyA3NC4yOTY3IDExLjA4NDJWMjAuNzg1MUg3OS4wMTkxVjkuMTQ5MTNDNzkuMDQwOCAzLjU2Njg3IDc2Ljk3NzQgMC43NzgzMiA3Mi43NDExIDAuNzc4MzJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTAzLjQxNSAwLjc3ODMyQzk3LjMwNjUgMC43NzgzMiA5My4xNjggNS4zNTMxMSA5My4xNjggMTAuOTk5N0M5My4xNjggMTcuMjIxNCA5Ny4xMDQxIDIxLjIyMDkgMTAzLjQxNSAyMS4yMjA5QzEwOS41MjMgMjEuMjIwOSAxMTMuNzM1IDE2LjY0NjMgMTEzLjczNSAxMC45OTk3QzExMy43MzUgNC43NzggMTA5LjcyMiAwLjc3ODMyIDEwMy40MTUgMC43NzgzMlpNMTAzLjQxNSAxNy43Mzg5Qzk5Ljg1ODYgMTcuNzM4OSA5Ny41NTU0IDE0Ljg2MzQgOTcuNTU1NCAxMC45OTk3Qzk3LjU1NTQgNy4xMzU5NyA5OS44NjY4IDQuMjYwMzMgMTAzLjQxNSA0LjI2MDMzQzEwNi45NjIgNC4yNjAzMyAxMDkuMTgxIDcuMTM1OTcgMTA5LjE4MSAxMC45OTk3QzEwOS4xODEgMTQuODYzNCAxMDYuOTYgMTcuNzM4OSAxMDMuNDE1IDE3LjczODlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
}

a.gumroad-button {
  background-color: #000000 !important;
  border-radius: 4px !important;
  color: white !important;
  display: inline-block !important;
  font-family:
    "Mabry Pro",
    -apple-system,
    ".SFNSDisplay-Regular",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  border: solid 1px #000000 !important;
  transition: all 0.14s ease-out !important;
}

.gumroad-button-logo {
  height: 13px !important;
  width: 93px !important;
  display: inline-block !important;
  margin-bottom: -1px !important;
  background-color: #ff90e8 !important;
  -webkit-mask-image: var(--gumroad-logo) !important;
  mask-image: var(--gumroad-logo) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

a.gumroad-button:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 4px 4px 0px #000000 !important;
  color: #000000 !important;
  background: #ff90e8 !important;
}

a.gumroad-button:hover .gumroad-button-logo {
  background-color: #000000 !important;
}
