:root 
{
    --highlight: #f49815;
    --bg-color: #0f0f0f; 
} 

@font-face 
    {
      font-family: SpaceGrotesk;
      src: url(fonts/SpaceGroteskVariable.ttf);
    }

@font-face 
    {
      font-family: AktivBold;
      src: url(fonts/AktivGroteskEx_Medium.ttf);
    }


/* -------------------------------------------------------------- */
/* SOUBOR -------------------------------------------------------- */ 

html
{
    font-family:'SpaceGrotesk';
    scroll-behavior: smooth;
}

body
{
    background-image: url("pozadicko.png");
    background-color: #15131a;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    margin: 0;
}

#whole 
{
    width: 100%; 
    margin: 0%;
}

.scroll {
    scroll-margin-top: 8em;
}

a:visited, a:link, a:hover {
    color: var(--bg-color);
    text-decoration: none;
}

/* -------------------------------------------------------------- */
/* MENČUŠ PRO DESKTOPUS  ---------------------------------------- */ 

/*
header
{
    padding: 1em;
    display: flex;
    position: fixed;
    right: 30px;
    width: 30px;
    height: 30px;

    background-color:#ffbb00;
    border-radius: 10px;
}
  */

#menicko_desktop 
{
    display: none;
    width: 100vw;
    height: 50px;
    text-align: left;

    flex-wrap: wrap;
    overflow: hidden;
    background-color: var(--highlight);
    color: var(--bg-color);
    position: fixed;
    

}

#menuList
{
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    list-style-type: none;
    padding: 0;
    margin: 0;

    font-family: "AktivBold";
}

#menuList li
{
    text-align: right;
    width: auto;
    padding: 4px;
    margin: 0px 30px;
    font-size: 1.6em;
}


/* -------------------------------------------------------------- */
/* TĚLÍČKO CELÝ ------------------------------------------------- */ 

#container
{

    width: calc(100vw - 5.6em);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1
{
    font-size: 2.6em;
    margin: .3em .3em 0em .3em;
    text-align: center;
    font-family: "AktivBold";
}

h2
{
    font-size: 2em;
    margin: 2em 0% .3em 0%;
    font-family: "AktivBold";
}

.mainInfo
{
    font-size: 1em;
    columns: 1;
    margin-bottom: 30px;
}

img
{
  width: 100%;
  height: 100%;
  margin: 0 0 10px 0;
}


/* -------------------------------------------------------------- */
/* SEKCE -------------------------------------------------------- */ 


#mainVidko 
{
    width: calc(100% - 6px);
    margin: 0% 1em;
    padding: 0em 2em 0em 2em;
    color: var(--highlight);

    display: flex;
    justify-content: center;
    flex-direction: column;

    height: 100vh;
}

                  .titulekLogo
                  {
                    left: 0;
                    width: 100%;
                    margin-bottom: 2vh;
                  }

                  .underTitle
                  {
                    text-align: center;
                    color: var(--highlight);
                    font-size: 1em;
                  }

                  .p-video 
                  {
                      margin: 30px 0 60px 0;
                      display: flex;
                      justify-content: center;
                  }

                          #mojeVidejko
                          {
                            width: 300px;
                          }

                  #buttony
                  {
                      display: flex;
                      justify-content: center;
                      flex-direction: column;

                      width: 100%;
                      align-items: center;
                  }

                          .buttonRoz
                          {
                            background-color: var(--highlight);
                            border: none;
                            color: rgb(0, 0, 0);
                            padding: 15px 32px;
                            margin: 4px 2px;

                            text-align: center;
                            text-decoration: none;
                            font-size: 1.1em;

                            max-width: 400px;
                            width: 70vw;
                            min-width: 200px;

                            font-family:'AktivBold';

                          }


/* ---------------------------------- */

#projekt 
{

    width: calc(100% - 6px);
    margin: 0% 1em;
    scroll-margin-top: 0px;
    padding: 0em 2em 0em 2em;
    color: var(--highlight);

    min-height: 100vh;
    
}

                  #textik
                  {
                    margin-left: 0;
                  }

                  #projectObrazky_mobil
                  {
                    display: auto;
                    margin: auto;
                    padding-top: 10vh;
                    min-height: 300px;
                    width: 70vw;
                  }

                  #projectObrazky_pc
                  {
                    display: none;    
                  }


/* ---------------------------------- */

#autor 
{
    width: calc(100% - 6px);
    margin: 0% 1em;
    scroll-margin-top: -30px;
    padding: 0em 2em 0em 2em;
    color: var(--highlight);

    min-height: 100vh;

}

                  #autorObrazky
                  {
                    margin: 40px 0;
                    min-height: 300px;
                  }


/* ---------------------------------- */


#stazeni 
{
    width: calc(100% - 6px);
    margin: 0% 1em;
    padding: 0em 2em 0em 2em;
    color: var(--highlight);
    text-align: center;
    min-height: 100vh;
    scroll-margin-top: -30px;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}

                  .p-odkaz 
                  {
                      margin: 40px 0;
                      height: 150px;
                  }

                  #stahni_button
                  {
                      background-color: var(--highlight);
                      border: none;
                      color: var(--bg-color);
                      padding: 15px 32px;
                      text-align: center;
                      text-decoration: none;
                      display: inline-block;
                      font-size: 2.5em;
                      font-family: "AktivBold";
                  }

/* ---------------------------------- */

#autoris
{
  width: 100vw;
  margin: auto;
  padding-bottom: 4vh;
  text-align: center;
  color: white;
}


/* ------------------------------------------------------------------------ */ 
/* TLAČ PRO SCROLL -------------------------------------------------------- */ 
  
    /* Tlačítko zmizí když jsme úplně nahoře */

  #myBtn {
    background-color: var(--highlight);

    padding: .1em .1em;
    display: flex;
    position: fixed;
    bottom: 2vh;
    left: 35px;

    height: 50px;
    width: 50px;

    text-align: center;
    font-size: 2.4em;
    color: var(--bg-color);

    display: none; 
    cursor: pointer;
  }


/* -------------------------------------------------------------------------------- */ 
/* TABLET ------------------------------------------------------------------------- */ 
/* PRO OBRAZOVKY NAD 500PX -------------------------------------------------------- */ 


@media screen and (min-width: 400px){

    body
    {
        background-color: var(--bg-color);
    }

    h1
    {
        font-size: 3em;
    }

    .mainInfo
    {
        font-size: 1em;
    }

    #mojeVidejko
    {
        max-width: 60vw;
        width: 60vw;
        min-width: 350px;
    }

    .underTitle
    {
      font-size: 1.3em;
    }

    .titulekLogo
    {
      text-align: center;
      width: 70vw;
      margin: auto;
      margin-bottom: 3vh;

      max-width: 50vw;
      min-width: 300px;
    }


}


/* -------------------------------------------------------------------------------- */ 
/* -------------------------------------------------------------------------------- */ 
/* PRO OBRAZOVKY NAD 1280PX -------------------------------------------------------- */ 


@media screen and (min-width: 1000px){
    
body
{
    background-image: url("pozadicko.png");
    background-color: #15131a;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    /*background-size: contain;
    background-blend-mode: multiply;*/
}


/* ------------------------------------------------ */

h1
{
    font-size: 4em;
    margin: 0 2em 0 0;;
}

h2
{
    font-size: 2em;
    margin: 0em 0% .3em 0%;
}

.mainInfo
{
    font-size: 1.3em;
    width: 30vw;
    margin: 0 50px 0 0;
}

img
{
  width: 100%;
  height: 100%;
  margin: 0 0 10px 0;
}

/* ------------------------------------------------ */


#menicko_desktop 
{
    display: flex;
    justify-content: space-between;
}

/* ------------------------------------------------ */


#mainVidko 
{
    width: calc(100% - 6px);
    margin: 0% 1em;
    padding: 0em 2em 0em 2em;
    color: var(--highlight);
    top: 0;

    display: flex;
    align-items: center;
    justify-content: start;

    height: 90vh;


}

        #desktopCenter
        {
          display: flex;
          flex-direction: column;
          height: 50vh;
          padding-top: 15vh;

        }

        
                  .titulekLogo
                  {
                    max-width: 25vw;
                    min-width: 350px;
                    margin-bottom: 2vh;

                  }

                  #title
                  {
                      height: 30vh;
                  }

                  .underTitle
                  {
                    text-align: center;
                    color: var(--highlight);
                    font-size: 1.4vw;
                    padding-bottom: 10vh;

                  }

                  .p-video 
                  {
                    margin: 0px 0 60px 0;

                  }

                          #mojeVidejko
                          {
                            max-width: 40vw;
                            width: 40vw;
                            min-width: 400px;
                          }

                  #buttony
                  {
                      display: none;
                  }

#projekt 
{

    width: calc(100% - 6px);
    margin: 0% 1em;
    padding: 20em 2em 4em 2em;
    scroll-margin-top: -250px;
    color: var(--highlight);

    min-height: 130vh;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;


}


                  #textik
                  {
                    margin-left: 50px;
                  }

                  #projektDesktop
                  {
                    display: flex;
                    align-items: start;
                    flex-direction: row;
                    padding: 50px 0px;

                  }

                  #projectObrazky_mobil
                  {
                    display: none;
                  }

                  #projectObrazky_pc
                  {
                    min-height: 30vh;
                    width: 35vw;

                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    
                  }

#autor 
{
    width: calc(100% - 6px);
    margin: 0% 1em;
    padding: 0em 2em 0em 2em;
    color: var(--highlight);

    min-height: 100vh;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}

                  #autorDesktop
                  {
                    display: flex;
                    align-items: start;
                    flex-direction: row;
                    padding: 50px 0px;
                  }

                  #autorObrazky
                  {
                    min-height: 30vh;
                    width: 35vw;

                    display: flex;
                    align-items: center;
                    flex-direction: column;
                  }

#stazeni 
{
    width: calc(100% - 6px);
    margin: 0% 1em;
    padding: 0em 2em 0em 2em;
    color: var(--highlight);
    scroll-margin-top: -30px;

    min-height: 80vh;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}

                  #stahuj
                  {
                    width: 60vw;
                    text-align: center;
 
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                  }

                  .mainInfo_download
                  {
                    text-align: center;
                    margin: 50px 0 10px 0;
                  }

                  .p-odkaz 
                  {
                      height: 150px;
                      width: 15vw;
                  }

  #myBtn {
    background-color: var(--highlight);

    padding: .1em .1em;
    display: flex;
    position: fixed;
    bottom: 40px;
    left: 45px;

    height: 50px;
    width: 50px;

    text-align: center;
    font-size: 2.4em;
    color: var(--bg-color);

    display: none; 
  }

}