/*------------------------RESET---------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}
article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }
/*------------------------------------------------------*/
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

@font-face {
    font-family: 'Ibrand';
    src: url('../fonts/Ibrand-Regular.woff2') format('woff2'),
        url('../fonts/Ibrand-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue-Thin.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

:root                                           {
                                                --font1:        "Ibrand", sans-serif; /*  */
                                                --font2:        "Helvetica Neue", sans-serif; /* 700 */
                                                
                                                --color1:       #5c3c8b; /* rgb() */
                                                --color1b:      #b594e4;
                                                --color2:       #e33c70; /* rgb() */

                                                --left-gap:       calc(var(--circle) + 5vw);
                                                }
  @media screen and (min-width: 961px)          {
  :root                                         {
                                                --circle:         14vw;
                                                }                                              
  }
  @media screen and (max-width: 960px)          {
  :root                                         {
                                                --circle:         20vw;
                                                }                                                
  }
  
html                                            {display: block; width: 100%; height: 100%; min-height: 600px; font-size: min(18px, calc(10px + 1vw)); color: white; font-weight: 400; line-height: 1.5; font-family: var(--font2); background: url("../images/background.jpg") no-repeat center center; background-size: cover;}
body                                            {display: block; width: 100%; height: 100%; margin-inline: auto; position: relative; overflow-x: hidden; overflow-y: auto;}
form                                            {display: flex; width: 100%; height: 100%; position: relative;}
  @media screen and (min-width: 769px) and (max-width: 960px){
  html                                          {min-height: 800px;}
  }
  @media screen and (max-width: 960px)          {
  html                                          {background-image: url("../images/background-mobile.jpg");}
  }

form > *                                        {display: block; position: absolute; z-index: 2; text-shadow: 0 0 0.5em black, 0 0 1em black;}

.logo                                           {width: 7vw; height: auto; left: 8%; top: 5%;}
.logo img                                       {display: block; width: 100%; height: auto;}
  @media screen and (max-width: 960px)          {
  .logo                                         {width: 16vw;}
  }

.dot                                            {display: flex; width: var(--circle); aspect-ratio: 0.5; justify-content: flex-end; left: 0; top: calc(50% - var(--circle)); overflow: hidden;}
.dot span                                       {display: block; height: 100%; aspect-ratio: 1; background: white; border-radius: 100%;}

h1                                              {display: flex; height: 3em; align-items: center; font-size: 9vw; line-height: 1; font-family: var(--font1); left: var(--left-gap); top: calc(50% - 1.5em);}
  @media screen and (max-width: 960px)          {
  h1                                            {font-size: 15vw;}
  }

p                                               {display: block; font-size: 1.3vw; font-family: var(--font2); left: var(--left-gap); top: calc(50% + 12vw);}
  @media screen and (min-width: 961px)          {
  p br                                          {display: none;}
  }
  @media screen and (max-width: 960px)          {
  p                                             {font-size: 4vw; top: calc(50% + 20vw);}
  }

ul                                              {display: flex; align-items: center; gap: 0 2vw; left: var(--left-gap); bottom: 5%;}
ul li                                           {display: block; height: 1.4vw; width: auto;}
ul li a                                         {display: block; height: 100%; width: auto; transition: 0.2s ease-in-out;}
ul li a img                                     {display: block; height: 100%; width: auto;}
ul li a:hover                                   {opacity: 0.8;}
  @media screen and (max-width: 960px)          {
  ul                                            {gap: 0 6vw;}
  ul li                                         {height: 3.8vw;}
  }

  .top-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 100;
}

.btn {
    padding: 10px 20px;
    text-decoration: none;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-shadow: none !important;
}

.btn:hover {
    background-color: #ffffff;
    color: #000000;
}

.btn-outline {
    background-color: transparent;
}

@media (max-width: 350px) {
    .top-buttons {
        flex-direction: column;
        top: 15px;
        right: 15px;
    }
}