/* common */
@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF-Pro-Display-Regular.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF-Pro-Display-Medium.woff") format("woff");
    font-weight: 500;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF-Pro-Display-Semibold.woff") format("woff");
    font-weight: 600;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF-Pro-Display-Bold.woff") format("woff");
    font-weight: 700;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF-Pro-Display-Black.woff") format("woff");
    font-weight: 800;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF-Pro-Display-Black.woff") format("woff");
    font-weight: 900;
}

:root {
  --primary: #ffcc33;
  --primary-content: #160f01;
  --secondary: #1a295c;
  --secondary-content: #ffffff;
  --accent: #6e7aa4;
  --accent-content: #ffffff;
  --neutral: #f0f1f4;
  --neutral-content: #262a3a;
  --base-100: #ffffff;
  --base-200: #f4f4f6;
  --base-300: #f0f1f4;
  --base-content: #161616;
  --info: #262a3a;
  --info-content: #ffffff;
  --success: #2bc66b;
  --success-content: #ffffff;
  --warning: #f18a3f;
  --warning-content: #ffffff;
  --error: #eb5757;
  --error-content: #ffffff;
}

* {
  font-family: "SF Pro Display", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
li { list-style: none }

dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landing-container {
  max-width: 100%;
  padding-left: 1rem;   /* 4 = 1rem */
  padding-right: 1rem;  /* 4 = 1rem */
}

/* display */
.block { display: block }

/* positions */
.fixed { position: fixed }
.relative { position: relative }
.absolute { position: absolute }

.top-0 { top: 0 }
.-top-5 { top: -1.25rem }
.-top-0\.5 { top: -0.125rem } 

.left-0 { left: 0 }

.right-0 { right: 0 }
.right-1\/2 { right: 50% }
.right-full { right: 100% }

.bottom-0 { bottom: 0 }

.translate-x-0 { transform: translateX(0) }
.translate-x-1\/2 { transform: translateX(50%) }
.translate-x-1\/4 { transform: translateX(25%) }
.-translate-x-full { transform: translateX(-100%) }

.inset-0 { inset: 0 }
.inset-y-0 { top: 0; bottom: 0 }

/* pointer-events */
.pointer-events-none { pointer-events: none }
.pointer-events-auto { pointer-events: auto }

/* opacity */
.opacity-0 { opacity: 0 }
.opacity-60 { opacity: 0.6 }
.opacity-100 { opacity: 1 }

/* transitions */
.transition {
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) }

/* overflow */
.overflow-hidden { overflow: hidden }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* flex */
.flex {
  display: flex;
}
.items-center { align-items: center }
.items-stretch { align-items: stretch }
.gap-1 { gap: 0.25rem }
.gap-2 { gap: 0.5rem }
.gap-3 { gap: 0.75rem }
.gap-4 { gap: 1rem }
.gap-8 { gap: 2rem }
.gap-10 { gap: 2.5rem }
.flex-col { flex-direction: column }
.flex-row { flex-direction: row }
.justify-between { justify-content: space-between }
.justify-center { justify-content: center }
.justify-start { justify-content: flex-start }
.flex-1 { flex: 1 }
.shrink-0 { flex-shrink: 0 }

/* grid */
.grid { display: grid }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.col-span-full { grid-column: 1 / -1 }
.grid-cols-subgrid { grid-template-columns: subgrid }

/* bg */
.bg-primary { background-color: var(--primary) }
.bg-info { background-color: var(--info) }
.bg-transparent { background-color: transparent }
.bg-base-100 { background-color: var(--base-100) }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5) }
.bg-base-100\/20 { background-color: rgba(255, 255, 255, 0.2) }
.bg-base-100\/40 { background-color: rgba(255, 255, 255, 0.4) }
.bg-base-100\/30 {
  background-color: var(--base-100);
  opacity: 0.3;
}
.bg-base-content { background-color: var(--base-content) }
.bg-base-200 { background-color: var(--base-200) }
.bg-base-300 { background-color: var(--base-300) }

/* rounded */
.rounded-md { border-radius: 0.375rem /* 6px */ }
.rounded-lg { border-radius: 0.5rem /* 8px */;}
.rounded-xl { border-radius: 0.75rem /* 12px */; }
.rounded-3xl { border-radius: 1.5rem /* 24px */ }
.rounded-full { border-radius: 9999px }

/* text */
.text-center { text-align: center }
.text-start { text-align: start }

.text-primary { color: var(--primary) }
.text-accent { color: var(--accent) }
.text-base-content { color: var(--base-content) }
.text-base-content\/60 {
  color: var(--base-content);
  opacity: 0.6;
}
.text-info-content { color: var(--info-content) }
.text-info { color: var(--info) }

.text-\[8px\] { font-size: 8px }
.text-xs {
  font-size: 0.75rem /* 12px */;
  line-height: 1rem /* 16px */;
}
.text-sm {
  font-size: 0.875rem /* 14px */;
  line-height: 1.25rem /* 20px */;
}
.text-base {
  font-size: 1rem /* 16px */;
  line-height: 1.5rem /* 24px */;
}
.text-lg {
  font-size: 1.125rem /* 18px */;
  line-height: 1.75rem /* 28px */;
}
.text-3xl { font-size: 1.875rem }

.text-\[18px\] { font-size: 18px }
.text-\[22px\] { font-size: 22px }
.text-\[28px\] { font-size: 28px }
.text-\[29px\] { font-size: 29px }
.text-\[42px\] { font-size: 42px }
.text-\[64px\] { font-size: 64px }
.text-\[76px\] { font-size: 76px }

/* leading */
.leading-3 { line-height: 0.75rem /* 12px */ }
.leading-8 {
  line-height: 2rem /* 32px */
}

/* fonts */
.font-normal { font-weight: 400 }
.font-semibold { font-weight: 600 }
.font-bold { font-weight: 700 }
.font-extrabold { font-weight: 800 }

/* margins */
.mt-16 { margin-top: 4rem }

.mr-3 { margin-right: 0.75rem }
.mr-5 { margin-right: 1.25rem }

.ml-1 { margin-left: 0.25rem }
.ml-1\.5 {margin-left: 0.375rem /* 6px */ }

.mb-1 { margin-bottom: 0.25rem }
.mb-2 { margin-bottom: 0.5rem }
.mb-2\.5 { margin-bottom: 0.625rem /* 10px */ }
.mb-4\.5 { margin-bottom: 1.125rem /* 18px */ }
.mb-6 { margin-bottom: 1.5rem }
.mb-\[26px\] { margin-bottom: 26px }
.mb-6\.5 { margin-bottom: 1.875rem /* 30px */ }
.mb-8 { margin-bottom: 2rem }
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem /* 64px */ }
.mb-20 { margin-bottom: 5rem /* 80px */ }

.mb-\[44px\] {
  margin-bottom: 44px;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* paddings */
.p-0 { padding: 0 }
.p-1 { padding: 0.25rem }
.p-2 { padding: 0.5rem }
.p-3 { padding: 0.75rem }
.p-6 { padding: 1.5rem }

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.pt-2 { padding-top: 0.5rem }

.pb-4 { padding-bottom: 1rem }

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}


/* borders */
.border-none { border-style: none }
.border-base-100 { border-color: var(--base-100) }
.border-\[#a6a6a6\] { border-color: #a6a6a6 }
.border-base-100\/40 { border-color: rgba(255, 255, 255, 0.4) }
.border-solid { border-style: solid }
.border { border-width: 1px }

/* shadow */
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

/* width */
.w-6 { width: 1.5rem }
.w-auto { width: auto }
.w-\[165px\] { width: 165px }
.w-px { width: 1px }
.w-full { width: 100% }
.w-max { width: max-content }
.max-w-xs { max-width: 20rem }

.min-w-\[100\.6vw\] { min-width: 100.6vw }
.min-w-2 { min-width: 8px }
.min-w-4 { min-width: 1rem }

.max-w-4 { max-width: 1rem }
.max-w-max { max-width: max-content }

/* height */
.h-full { height: 100% }
.h-px { height: 1px }
.h-4 { height: 1rem }
.h-6 { height: 1.5rem }
.h-9 { height: 2.25rem }
.h-10 { height: 2.5rem }
.h-12 { height: 3rem }
.h-\[260px\] { height: 260px }
.min-h-\[730px\] { min-height: 730px }
.h-\[730px\] { height: 730px }

/* z-index */
.z-1 { z-index: 1 }
.z-10 { z-index: 10 }
.z-20 { z-index: 20 }
.z-50 { z-index: 50 }

/* list */
.list-none { list-style-type: none }

/* cursor */
.cursor-pointer { cursor: pointer }

/* shadows */
.shadow {
  -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}

/* object */
.object-cover {
  -o-object-fit: cover;
  object-fit: cover
}

/* custom elements */

.header-logo { width: 7rem }

.btn-outline-hover:hover {
  --tw-border-opacity: 1;
  background: var(--base-100);
  color: var(--base-content)
}

.footer-grid-container {
  display: grid;
  grid-template-columns: 1;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 32px;
  gap: 16px;
}

.store-btn {
  background-color: var(--base-100);
  opacity: 1;
}

.btn-hover\/80:hover { opacity: 0.8 }
.btn-hover\/90:hover { opacity: 0.9 }
.hover\:bg-base-100\/20:hover { background-color: rgba(255, 255, 255, 0.2) }
.hover\:opacity-100:hover { opacity: 1 }
.hover\:bg-base-300:hover {
  --tw-bg-opacity: 1;
  background-color: var(--base-300);
}
.hover\:bg-base-content:hover {
  --tw-bg-opacity: 1;
  background-color: var(--base-content);
}
.hover\:text-base-100:hover {
  --tw-text-opacity: 1;
  color: var(--base-100);
}


/* daisy */
.btn {
  display: inline-flex;
  height: 3rem /* 48px */;
  min-height: 3rem /* 48px */;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding-left: 1rem /* 16px */;
  padding-right: 1rem /* 16px */;
  text-align: center;
  font-size: 0.875rem /* 14px */;
  line-height: 1em;
  gap: 0.5rem /* 8px */;
  font-weight: 600;
  text-decoration-line: none;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
}

.btn-sm {
  height: 2rem /* 32px */;
  min-height: 2rem /* 32px */;
  padding-left: 0.75rem /* 12px */;
  padding-right: 0.75rem /* 12px */;
  font-size: 0.875rem /* 14px */;
}

.btn-md {
  height: 3rem /* 48px */;
  min-height: 3rem /* 48px */;
  padding-left: 1rem /* 16px */;
  padding-right: 1rem /* 16px */;
  font-size: 0.875rem /* 14px */;
}


/* media queries */
  /* sm */
@media (min-width: 640px) {
  .footer-email {
    font-size: 1.25rem /* 20px */;
    line-height: 1.75rem /* 28px */;
  }
  .header-logo { width: 10.3125rem }
  .landing-container {
    padding-left: 1.5rem;   /* 6 = 1.5rem */
    padding-right: 1.5rem;  /* 6 = 1.5rem */
  }
  .sm\:text-5xl {
    font-size: 3rem /* 48px */;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem /* 16px */;
    line-height: 1.5rem /* 24px */;
  }

  .sm\:btn-md {
    height: 3rem /* 48px */;
    min-height: 3rem /* 48px */;
    padding-left: 1rem /* 16px */;
    padding-right: 1rem /* 16px */;
    font-size: 0.875rem /* 14px */;
  }

  .sm\:btn-wide {
    width: 16rem /* 256px */;
  }

  .sm\:mb-2 { margin-bottom: 0.5rem }

  .sm\:text-base {
    font-size: 1rem /* 16px */;
    line-height: 1.5rem /* 24px */;
  }
  .sm\:text-\[22px\] { font-size: 22px }
  .sm\:text-\[40px\] { font-size: 40px }
  .sm\:text-5xl { font-size: 3rem /* 48px */ }

}

  /* md */
@media (min-width: 769px) {
  .md\:btn-md {
    height: 3rem /* 48px */;
    min-height: 3rem /* 48px */;
    padding-left: 1rem /* 16px */;
    padding-right: 1rem /* 16px */;
    font-size: 0.875rem /* 14px */;
  }
  .md\:btn-lg {
    height: 4rem /* 64px */;
    min-height: 4rem /* 64px */;
    padding-left: 1.5rem /* 24px */;
    padding-right: 1.5rem /* 24px */;
    font-size: 1.125rem /* 18px */;
  }

  .md\:left-56 {
    left: 14rem /* 224px */;
  }

  .footer-copyright {
    font-size: 1.25rem /* 20px */;
    line-height: 1.75rem /* 28px */;
  }

  .footer-email { text-align: end }
  .footer-grid-container {
    grid-template-columns: repeat(2, auto);
    gap: 32px;
  }


  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:text-\[18px\] { font-size: 18px }
  .md\:text-\[26px\] { font-size: 26px }

  .md\:leading-8 { line-height: 2rem /* 32px */ }
}


  /* lg */
@media (min-width: 1024px) {
  .lg\:hidden { display: none }
  .lg\:p-10 { padding: 2.5rem }

  .lg\:bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  }

  .lg\:from-\[\#FFE071\] {
    --tw-gradient-from: #FFE071;
    --tw-gradient-to: rgb(255 224 113 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .lg\:to-\[\#FFBF00\] {
    --tw-gradient-to: #FFBF00;
  }

  .lg\:w-full { width: 100% }
  .lg\:min-w-\[50\%\] { min-width: 50% }
  .lg\:w-\[64\%\] { width: 64% }
  .lg\:max-w-\[70\%\] { max-width: 70% }
  
  .lg\:h-\[735px\] { height: 735px }

  .lg\:gap-10 { gap: 2.5rem }

  .lg\:mb-3 { margin-bottom: 0.75rem  }
  .lg\:mb-16 { margin-bottom: 4rem }
  .lg\:mb-\[120px\] { margin-bottom: 120px }

  .lg\:py-20 { 
    padding-top: 5rem /* 80px */;
    padding-bottom: 5rem /* 80px */;
  }

  .lg\:text-lg {
    font-size: 1.125rem /* 18px */;
    line-height: 1.75rem /* 28px */;
  }
  .lg\:text-\[28px\] { font-size: 28px }
  .lg\:text-\[48px\] { font-size: 48px }

  .lg\:absolute { position: absolute }

  .lg\:-right-2 { right: -0.5rem /* -8px */ }
  .lg\:-right-\[205px\] { right: -205px }

  .lg\:invisible { visibility: hidden }

  .lg\:object-cover { object-fit: cover }

  .footer-email { font-size: 1.75rem /* 28px */ }
  .footer-grid-container { grid-template-columns: repeat(4, auto) }
  .lg\:flex-row { flex-direction: row }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

  /* xl */
@media (min-width: 1280px) {
  .landing-container { max-width: 75rem }
  .xl\:leading-\[4rem\] { line-height: 4rem }
  .xl\:text-6xl { font-size: 3.75rem }
  .xl\:text-2xl {
    font-size: 1.5rem /* 24px */;
    line-height: 2rem /* 32px */;
  }

  .xl\:mb-6 { margin-bottom: 1.5rem /* 24px */ }
  .xl\:mx-\[234px\] {
    margin-left: 234px;
    margin-right: 234px;
  }

  .xl\:-right-\[174px\] { right: -174px }
  .xl\:right-1\/2 { right: 50% }
  .xl\:translate-x-1\/2 { transform: translateX(50%) }
  .xl\:text-\[42px\] { font-size: 42px }
  .xl\:text-\[54px\] { font-size: 54px }
  .xl\:text-\[60px\] { font-size: 60px }
  .xl\:text-\[76px\] { font-size: 76px }

  .xl\:mb-16 { margin-bottom: 4rem /* 64px */ }


  .\xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

  /* 2xl */
@media (min-width: 1536px) {
  .landing-container { max-width: 86rem }
  .\32xl\:text-7xl {
    font-size: 4.5rem /* 72px */;
    line-height: 1;
  }
  .\32xl\:-right-0 {
    right: -0px;
  }

  .\32xl\:text-\[64px\] {
    font-size: 64px;
  }

  .\32xl\:text-\[76px\] { font-size: 76px }
}


  /* 4xl */
@media (min-width: 2000px) {
  .\4xl\:w-\[80\%\] {
    width: 80%;
  }
}

  /* max-lg */
@media (max-width: 1023px) {
  .max-lg\:bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  }
  .max-lg\:from-\[\#FFE071\] {
    --tw-gradient-from: #FFE071;
    --tw-gradient-to: rgb(255 224 113 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .max-lg\:to-\[\#FFBF00\] { --tw-gradient-to: #FFBF00 }

  .max-lg\:hidden { display: none }

  .max-lg\:relative { position: relative }

  .max-lg\:min-w-\[125vw\] { width: 125vw }
  .max-lg\:-inset-x-14 {
    left: -3.5rem /* -56px */;
    right: -3.5rem /* -56px */;
  }
  .max-lg\:hidden { display: none }
}

  /* max-md */
@media (max-width: 768px) {
  .max-md\:left-\[230px\] { left: 230px }
}

  /* max-sm */
@media (max-width: 639px) {
  .max-sm\:w-max { width: max-content }
  .max-sm\:px-9 {
    padding-left: 2.25rem /* 36px */;
    padding-right: 2.25rem /* 36px */;
  }
  .max-sm\:left-\[150px\] { left: 150px }
  .max-sm\:-top-1\.5 { top: -0.375rem /* -6px */ }
}

/* article body */ 

#article-body img {
  object-fit: scale-down;
  max-height: max-content;
  border-radius: 24px;
  max-width: 100%;
}

#article-body a {
  color: var(--error);
}

#article-body ul li {
  margin-left: 0.5rem;
}

#article-body ul li::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  min-width: 0.375rem;
  min-height: 0.375rem;
  max-width: 0.375rem;
  max-height: 0.35rem;
  background-color: var(--primary);
  border-radius: 50%;
  margin-right: 0.5rem;
  border: 1px solid black;
  transform: translateY(-0.05rem);
}

#article-body ol li {
  list-style-type: decimal;
  margin-left: 1.5rem;
}

#article-body em {
  font-style: italic;
}



#article-body table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--base-100);
  border: none;
  border-radius: 16px;
}

#article-body div:has(> table) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

#article-body table tr {
  border-bottom: 1px solid var(--base-200);
}

#article-body table th, #article-body table td {
  padding: 12px 16px;
  border: none;
  font-weight: 600;
}

#article-body table th {
  color: var(--base-content);
  opacity: 0.6;
  text-align: start;
}

#article-body blockquote {
  border-left: 4px solid var(--info);
  padding: 12px 20px;
  background-color: var(--base-100);
}

/* для того чтобы случайные шрифты поставленные в админке не ломали дизайн */
#article-body div {
  font-family: 'SF Pro Display', sans-serif !important;
}

#article-body p {
  font-family: 'SF Pro Display', sans-serif !important;
}

#article-body span {
  font-family: 'SF Pro Display', sans-serif !important;
}

#article-body font {
  font-family: 'SF Pro Display', sans-serif !important;
}