@font-face {
  font-display: swap;
  font-family: 'Conso';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/Conso-Medium.woff2') format('woff2');
}
/* poppins-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/poppins-v24-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root{
  /* fonts */
  --ff-title: 'Conso';
  --ff-text: 'Poppins';

  /* colors */
  --clr-main: #F8F9EE;
  --clr-text: #4B553A;
  --clr-white: #ffffff;
  --clr-black: #000000;
}

/*reset*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  font-family: var(--ff-text);
  color-scheme: light dark;
  interpolate-size: allow-keywords;
}

[lang="cs"]{
  quotes: "„" "“";
}
[lang="en"]{
  quotes: '"' '"';
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

h1,h2{
  text-wrap: balance;
}

p, li{
  text-wrap: pretty;
}

img,
iframe,
video {
  max-width: 100%;
}

td,
math,
time[datetime*=":"] {
  font-variant-numeric: tabular-nums lining-nums;
}

table {
  border-collapse: collapse;
}

:target {
  scroll-margin-block: 5rlh;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* reset */

body{
  margin: 0;
  background-color: var(--clr-main);
}
main{
  position: relative;
  overflow: clip;
}
.container{
  width: 100%;
  max-width: min(1200px, 100vw - 50px);
  margin-inline: auto;
}

h1{
  font: 500 5.3125rem/0.96471 var(--ff-title);
  color: var(--clr-text);
  text-align: center;
  margin-block: 0;
  @media screen and (max-width: 1920px){
    font-size: clamp(4.0125rem, 2.8889vw + 1.8458rem, 5.3125rem);
  }
  @media screen and (max-width: 1200px){
    font-size: clamp(2.5rem, 4.3214vw + .7714rem, 4.0125rem);
  }
  @media screen and (max-width: 640px){
    font-size: clamp(2rem, 5vw + .5rem, 2.5rem);
  }  
}
p{
  font: 300 1.875rem/2.6666667 var(--ff-text);
  color: var(--clr-text);
  text-align: center;
  margin-block: 0;
  @media screen and (max-width: 1920px){
    font-size: clamp(1.475rem, .8889vw + .8083rem, 1.875rem);
  }
  @media screen and (max-width: 1200px){
    font-size: clamp(1.1rem, 1.0714vw + .6714rem, 1.475rem);
  }
  @media screen and (max-width: 640px){
    font-size: clamp(.875rem, 2.25vw + .2rem, 1.1rem);
  }
}

@property --buttonBG-left {
  syntax: "<color>";
  inherits: false;
  initial-value: #77865D;
}
@property --buttonBG-right {
  syntax: "<color>";
  inherits: false;
  initial-value: #4B553A;
}
@property --buttonBorder-left {
  syntax: "<color>";
  inherits: false;
  initial-value: #76855C;
}
@property --buttonBorder-right {
  syntax: "<color>";
  inherits: false;
  initial-value: #4B553A;
}

.button{
  --transition-duration: 2000ms;
  --transition-timing: ease-out;
  font: 300 1.5rem/0.96 var(--ff-text);
  color: var(--clr-main);
  border-radius: 0.4166667em;
  border: 1.4px solid transparent;
  padding: 0.5625em 2.5em;
  background: linear-gradient(91.42deg, var(--buttonBG-left, #77865D) 0%, var(--buttonBG-right, #4B553A) 100%) padding-box, linear-gradient(135.41deg, var(--buttonBorder-left, #76855C) 0%, var(--buttonBorder-right, #4B553A) 106.82%) border-box;
  text-decoration: none;
  box-shadow: 0px 0px 4px 0px hsl(from var(--clr-text) h s l / 20%);
  transition: --buttonBG-left var(--transition-duration) var(--transition-timing), --buttonBG-right var(--transition-duration) var(--transition-timing),--buttonBorder-left var(--transition-duration) var(--transition-timing), --buttonBorder-right var(--transition-duration) var(--transition-timing);
  transition-delay: 1ms;
  will-change: --buttonBG-left, --buttonBG-right, --buttonBorder-left, --buttonBorder-right;
  @media screen and (max-width: 1200px){
    font-size: clamp(1rem, 1.1111vw + .6667rem, 1.5rem);
  }

  img{
    width: 0.95833333em;
    aspect-ratio: 1;
    display: inline-block;
    object-fit: contain;
    margin-inline-end: 0.354166667em;
    vertical-align: middle;
    margin-top: calc(1ex - 1cap);
  }

  &:hover,
  &:focus-visible{
    --buttonBG-left:#596544;
    --buttonBG-right:#2F3525;
    --buttonBorder-left:#596544;
    --buttonBorder-right:#2F3525;
    
    transition: --buttonBG-left var(--transition-duration) var(--transition-timing), --buttonBG-right var(--transition-duration) var(--transition-timing),--buttonBorder-left var(--transition-duration) var(--transition-timing), --buttonBorder-right var(--transition-duration) var(--transition-timing);
    transition-delay: 1ms;
  }
}

.logo{
  width: max(53.895833333vw, 100%);
  height: auto;
  max-height: 36.574074074vh;
  aspect-ratio: 10348 / 3950;
  display: block;
  margin-block: 0 min(9.259259259vh, 6.3125rem);
  object-fit: contain;
}
section.hero{
  position: relative;
  .container{
    position: relative;
    min-height: 100svh;
    padding-block: 5%;
    display: grid;
    place-content: center;
    justify-items: center;
  }

  &::before{
    position: absolute;
    content: '';
    background-image: url('./images//decoration.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: max(208.073vw, 1200px);
    aspect-ratio: 3955 / 2889;
    left: 0;
    top: 0;
    translate: -26.2% -40%;
    pointer-events: none;
  }
}