@font-face {
    font-family: soopafre;
    src: url(/assest/font/soopafre.ttf);
}

@font-face {
    font-family: zubik;
    src: url(/assest/font/Zubik.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'soopafre', sans-serif;
}

/*mobily    (min-width: 360px) and (max-width: 420px)
/*tablety    (min-width: 421px) and (max-width: 990px)
/*desktop    (min-width: 991px)


/* mobily*/
@media screen and (min-width: 360px) and (max-width: 576px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
        text-align: center;
    }

    .article {
        text-align: center;
        width: 100%;
        border: 3px solid #00FF08;
        background-color: #323d41;
        border-radius: 50px;
    }

    

    nav {
        width: 100%;
    }

    .TopLogo {
        width: 100%;
    }

    .overlay {
        width: 100%;
    }

    .content {
        width: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .errclass404{
        width: 100%;
        /*position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);*/
        
    }

/*error 404*/
    .error{
        width: auto;
        height: auto;
        grid-template-areas:
        'txterr'
        'imgerr';
        display: grid;
    }
    #txt404 {
        grid-area: txterr;
        width: auto;
        height: auto;
    }
    #img404 {
        grid-area: imgerr;
        width: 90%;
    }

    .YTContback {
        width: 100%;
        text-align: center;
    }

    .YTcontainer {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%;
    }

    .YTVideo {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .overlay h1 {
        font-size: 20px;
    }

    .overlay h3 {
        font-size: 20px;
    }

    .Models {
        width: 100%;
    }

    .back-video {
        height: 100%;
        width: auto;
    }

    
    .articleH1 {
        text-align: center;
        width: 100%;
    }
     .text{
        text-align: center;
        width: 100%;
    }
    
    .text h3{
        color: #ffffff;
        width: 100%;
    }

    .body {
        width: 100%;
    }

    .popisek {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .GamePicture {
        float: bottom;
        width: 100%;
    }

    .Models {
        float: bottom;
        width: 100%;
        height: 100%;
    }

    .articleModel {
        width: 90%;
    }

    .tabulka {
        width: 100%;
    }
    .articleSestavy{
        width: 100%;
        border: 3px solid #00FF08;
        background-color: #626b6d;
        border-radius: 50px;
        /*border: 1px solid #ccc;*/
        
     }

/*sestavy.php mobily*/
     .grid-container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
        /*border: 3px solid #ff00cc;
        background-color: blue;*/
        /*padding: top right bottom left;*/
    }
    .seznamKomponent{
        width: 100%;
    }
    .tabulkaSestavy{
        /*width: 40%;*/
        margin: 0 0 0 0px;
        /*width: 600px;*/
        width: 100%;
    }
    .FiltrSestavy{
        margin: 10px 30px 10px 0px;
        width: 100%;
        /*border: 3px solid #ff00cc;*/

        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }









    .galerie {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 40px;
        /*border: 3px solid #ff00cc;
        background-color: blue;*/
        padding: 10px 0px 10px 0px;
        /*padding: top right bottom left;*/
    }
    .galerie-item{
        width: 100%;
        /*background-color: #323d41;*/
        background: linear-gradient(#cd08a9 75%,#2525f2 99%);/*mění pozadí na vícebarevné*/
        color:#ffffff;
        text-align: center;
    }
    .galerie-item-obr{
        float: center;
        width: 100%;
        margin: 0 0 0 0px;
    }

    .galerie-item .galerie-h3{
        text-align: center;
        font-size: 25px;
        color:#00FF08;
        width: 100%;
        margin: 0 0 0 0px;
    }
    .galerie-item .galerie-text{
        text-align: center;
        font-size: 20px;
        color:#ffffff;
        width: 100%;
        margin: 0 0 0 0px;
    }




    .text h3{
        color: #ffffff;
    }

    .sestavaPic {
        width: 100%;
    }

    .seznamKomponent{
        width: 100%;
    }
    .seznamKomponentSestavy{
        width: 100%;
        background-color: #00dfef;
    }

/*jednotlive clanky*/
    .clanky{
        width: 100%;
        float: center;
        border: 3px solid #00FF08;
        background-color: #323d41;
        /*border-radius: 50px;*/
        color: #ffffff; 
        /*border: 1px solid #ccc;*/
        margin: 0px 0px 0px 0px;
        /*padding: 10px 30px 10px 30px;*/
        /*padding: top right bottom left;*/
 }

.clanek-ods{
    margin-left: 0px;
    width: 90%;
    margin-top: 15px;
    
}
.clanek-obr{
    width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    
}
    

/*clanky.php mobily*/
    .overlay-clanky{
        width: 100%;
        top: 60px;
    }
    .overlay-clanek{
        width: 100%;
        top: 60px;
    }
    .overlay-aktuality{
        width: 100%;
        /*top: 50px;*/
    }
    .overlay-neaktuality{
        width: 100%;
        /*top: 50px;*/
    }
    .clanky-aktuality-container{
        width: 100%;
        margin: 0px 0px 0px 0px;
        border: 3px solid #FF0000;
        background-color: #323d41;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        /*grid-gap: 40px;*/
        float: center;
    }
    .clanky-aktuality{
        width: 100%;
        
        border: 3px solid #ff6a00;
        background-color: #233137;
        /*border: 1px solid #ccc;*/
        margin: 20px 0px 20px 0px;
        /*padding: top right bottom left;*/
        text-align: center;
        float: center;
        color: #ffffff;
        grid-template-areas:
            'nazev'
            'pridano'
            'obr'
            'popis';
        /*grid-gap: 10px;*/
        display: grid;
    }
    
    .clanek-NahlObrAkt{
        float: center;
        width: 100%;
        height: auto;
    }
    .clanek-aktuality-h3{
        text-align: center;
        font-size: 25px;
        color:#00FF08;
        width: 100%;
    }
 

    
    .clanky-neaktuality-container{
        width: 100%;
        margin: 0px 0px 0px 0px;
        border: 3px solid #ff00ff;
        background-color: #5e6669;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        float: center;
        /*grid-gap: 40px;*/
    }

    .clanky-neaktuality{
        width: 100%;
        float: center;
        border: 3px solid #0000ff;
        background-color: #323d41;
        /*border: 1px solid #ccc;*/
        margin: 10px 0px 10px 0px;
        /*padding: top right bottom left;*/
        text-align: center;
        color: #ffffff;
        grid-template-areas:
            'nazev'
            'pridano'
            'obr'
            'popis';
        /*grid-gap: 5px;*/
        display: grid;
    } 
    .clanek-NahlObr{
        float: center;
        width: 100%;
    }
    .clanek-h3{
        text-align: center;
        font-size: 10px;
        color:#00FF08;
        width: 100%;
    }
    #obr {
        grid-area: obr;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        align-self: center;
    }
    #nazev {
        grid-area: nazev;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }
    #pridano {
        grid-area: pridano;
       /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }
    #popis {
        grid-area: popis;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }

/*footer*/
    .footer {
        display: grid;
        text-align: center;
        grid-template-areas:
            'left'
            'center' 
            'right';
        grid-gap: 10px;
        padding: 10px;
        font-size: 20px;
        background-color: #000000;
      }

      #left {
        grid-area: left;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}
    #center {
        grid-area: center;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}
    #right {
        grid-area: right;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}

    .formular{
        text-align: center;
        width: 100%;
        color: #00FF08;
        background-color: #000000;
    }

    .web-bg {
        position: fixed;
        bottom: 0;
        height: 100%;
        width: auto;
    
        
        background: #000000;
    
      }
    
    .back-ground {
        position: fixed;
        height: 100%;
        right: 0;
        bottom: 0;
        z-index: -1;
        border: 3px solid #00FFFF;
        display: flex;
        justify-content: center;
        background: url("./assets/pictures/bluebg.jpeg") no-repeat center center fixed;
        background-size: cover;
    }
}



/*mobily    (min-width: 360px) and (max-width: 420px)
/*tablety    (min-width: 421px) and (max-width: 990px)
/*desktop    (min-width: 991px)


/*tablety*/
@media screen and (min-width: 577px) and (max-width: 990px){
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
        text-align: center;
    }
    
     .article{
        width: 90%;
        border: 3px solid #00FF08;
        background-color: #323d41;
        border-radius: 50px;
        /*border: 1px solid #ccc;*/
        margin: 40px 0 40px 20px;
        padding: 10px 30px 10px 30px;
     }
    nav{
        width: 100%;
    }
    .YTContback{
        width: 80%;
        text-align: center;
        margin: 0 0 0 50px;
        
    }

    .YTcontainer{
        
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%;
        
    }
    .YTVideo{
        
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;

     }


    .TopLogo{
        width: 80%;
    }
    .overlay{
        width: 100%;
    }
    
    .content{
        width: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .errclass404{
        width: 100%;
        /*position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);*/
        
    }
/*error 404*/
    .error{
        width: auto;
        height: auto;
        grid-template-areas:
        'txterr'
        'imgerr';
        display: grid;
    }
    #txt404 {
        grid-area: txterr;
        width: auto;
        height: auto;
    }
    #img404 {
        grid-area: imgerr;
        width: 90%;
    }

    .content h1{
        width: 80%;
    }
    .overlay h1{
        font-size: 30px;
    }
    .overlay h3{
        font-size: 20px;
    }
    
    .Models{
        width: 100%;
    }
    
    /*.back-video{
        height: 100%;
        width: auto;
    } */
    
    .articleGame {
        width: 75%;
     }
     .articleModel{
        width: 90%;
     }

     .articleH1 {
        text-align: center;
        width: 100%;
        /*margin: 40px 0 40px 20px;
        /*float:center;*/
    }
     .text{
        text-align: center;
        width: 100%;
    }
    
    .text h3{
        color: #ffffff;
    }

    
    .body{
        width: 100%;
    }
    .popisek{
        width: 100%;
        margin: 0 0 20 0px;
     }
    .GamePicture{
        float: bottom;
        width: 100%;
    }
    .Models{
        float: bottom;
        width: 100%;
        height: 100%;
     }
     
    
     .tabulka{
    
        width: 90%;
        margin: 0 0 0 40px;
    }
    

/*sestavy.php tablety*/
     .grid-container {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
        /*border: 3px solid #ff00cc;
        background-color: blue;*/
        padding: 10px 30px 10px 30px;
        /*padding: top right bottom left;*/
    }
    .seznamKomponent{
        width: 100%;
    }
    .seznamKomponentSestavy{
        width: 100%;
        background-color: #00dfef;
    }
    .articleSestavy{
        width: 100%;
        border: 3px solid #00FF08;
        background-color: #626b6d;
        border-radius: 50px;
        /*border: 1px solid #ccc;*/ 
     }
    .tabulkaSestavy{
        /*width: 40%;*/
        margin: 0 0 0 0px;
        /*width: 600px;*/
        width: 100%;
    }
    .FiltrSestavy{
        margin: 10px 30px 10px 0px;
        width: 100%;
        /*border: 3px solid #ff00cc;*/

        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

     


    .galerie {
        width: 80%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40px;
        /*border: 3px solid #ff00cc;
        background-color: blue;*/
        padding: 10px 30px 10px 30px;
        /*padding: top right bottom left;*/
    }
    .galerie-item{
        width: 100%;
        /*background-color: #323d41;*/
        background: linear-gradient(#cd08a9 75%,#2525f2 99%);/*mění pozadí na vícebarevné*/
        color:#ffffff;
        text-align: center;
    }
    .galerie-item-obr{
        float: center;
        width: 100%;
         transition: 1s;
        margin: 0 0 0 0px;
    }
    .galerie-item-obr:hover{
        
         filter: grayscale(0); 
        transform: scale(1.1); 
    }

    .galerie-item .galerie-h3{
        text-align: center;
        font-size: 25px;
        color:#00FF08;
        width: 100%;
        margin: 0 0 0 0px;
    }
    .galerie-item .galerie-text{
        text-align: center;
        font-size: 20px;
        color:#ffffff;
        width: 100%;
        margin: 0 0 0 0px;
    }

   
     .sestavaPic{
        width: 40%;
        margin: 0 40px 0 0px;
    }
    
    .seznamKomponent{
        width: 100%;
    }

/*jednotlive clanky*/
    .clanky{
        width: 100%;
        float: center;
        border: 3px solid #00FF08;
        background-color: #323d41;
        /*border-radius: 50px;*/
        color: #ffffff; 
        /*border: 1px solid #ccc;*/
        margin: 0px 0px 0px 0px;
        /*padding: 10px 30px 10px 30px;*/
        /*padding: top right bottom left;*/
    }

    .clanek-ods{
        margin-left: 0px;
        width: 90%;
        margin-top: 15px;

    }
    .clanek-obr{
        width: 90%;
        margin-top: 15px;
        margin-bottom: 15px;
    }

/*clanky.php mobily*/
    .overlay-test{
        width: 100%;
        top: 50px;
    }
    .overlay-aktuality{
        width: 100%;
        /*top: 50px;*/
    }
    .overlay-clanky{
        width: 100%;
        /*top: 770px;*/
    }
    .clanky-aktuality-container{
        width: 100%;
        margin: 0px 0px 0px 0px;
        border: 3px solid #FF0000;
        background-color: #323d41;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        /*grid-gap: 40px;*/
        float: center;
    }
    .clanky-aktuality{
        width: 100%;
        border: 3px solid #ff6a00;
        background-color: #233137;
        /*border: 1px solid #ccc;*/
        margin: 20px 0px 20px 0px;
        /*padding: top right bottom left;*/
        text-align: center;
        float: center;
        color: #ffffff;
        grid-template-areas:
            'nazev'
            'pridano'
            'obr'
            'popis';
        /*grid-gap: 10px;*/
        display: grid;
    }

    .clanek-NahlObrAkt{
        float: center;
        width: 100%;
        height: auto;
    }
    .clanek-aktuality-h3{
        text-align: center;
        font-size: 25px;
        color:#00FF08;
        width: 100%;
    }



    .clanky-neaktuality-container{
        width: 100%;
        margin: 0px 0px 0px 0px;
        border: 3px solid #ff00ff;
        background-color: #5e6669;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        float: center;
        /*grid-gap: 40px;*/
    }

    .clanky-neaktuality{
        width: 100%;
        float: center;
        border: 3px solid #0000ff;
        background-color: #323d41;
        /*border: 1px solid #ccc;*/
        margin: 10px 0px 10px 0px;
        /*padding: top right bottom left;*/
        text-align: center;
        color: #ffffff;
        grid-template-areas:
            'nazev'
            'pridano'
            'obr'
            'popis';
        /*grid-gap: 5px;*/
        display: grid;
    } 
    .clanek-NahlObr{
        float: center;
        width: 100%;
    }   
    .clanek-h3{
        text-align: center;
        font-size: 10px;
        color:#00FF08;
        width: 100%;
    }
    #obr {
        grid-area: obr;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        align-self: center;
    }
    #nazev {
        grid-area: nazev;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }
    #pridano {
        grid-area: pridano;
       /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }
    #popis {
        grid-area: popis;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }


    .footer {
        display: grid;
        text-align: center;
        grid-template-areas:
            'left'
            'center' 
            'right';
        grid-gap: 10px;
        padding: 10px;
        font-size: 20px;
        background-color: #000000;
      }

      #left {
        grid-area: left;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}
    #center {
        grid-area: center;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}
    #right {
        grid-area: right;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}


    .formular{
        text-align: center;
        width: 100%;
        color: #00FF08;
        background-color: #000000;
    }

    .web-bg {
        position: fixed;
        bottom: 0;
        height: 100%;
        width: auto;
    
        
        background: #000000;
    
      }
    
    .back-ground {
        position: fixed;
        height: 100%;
        right: 0;
        bottom: 0;
        z-index: -1;
        border: 3px solid #00FFFF;
        display: flex;
        justify-content: center;
        background: url("./assets/pictures/bluebg.jpeg") no-repeat center center fixed;
        background-size: cover;
    }
    



}

/*mobily    (min-width: 360px) and (max-width: 420px)
/*tablety    (min-width: 421px) and (max-width: 990px)
/*desktop    (min-width: 991px)


/*desktop*/
@media screen and (min-width: 991px){
	
	.desktop {
        width: 100%;
        /*display: block;*/
        
        text-align: center;
    }
    .mobile {
        display: none;
    }
    .content h1{
        width: 100%;
    }
    .overlay{
        width: 100%;
    }


/*error 404*/
    .errclass404{
        width: 100%;
        /*position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);*/
        
    }
    .error{
        width: auto;
        height: auto;
        grid-template-areas:
        'txterr imgerr';
        display: grid;
    }
    #txt404 {
        grid-area: txterr;
        width: auto;
        height: auto;
        padding-top: 5%;
    }
    #img404 {
        grid-area: imgerr;
        width: 90%;
    }
 

    

    .overlay h1{
        font-size: 30px;
    }
    
    .TopLogo{
        width: 100%;
    }
    .content{
        width: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .content-signup{
        width: 100%;
        height: 80%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .back-video{
        height: 100%;
    } 

    .article{
        width: 50%;
        border: 3px solid #00FF08;
        background-color: #323d41;
        border-radius: 50px;
        /*border: 1px solid #ccc;*/
        margin: 40px 0 40px 20px;
        padding: 10px 30px 10px 30px;
     }

      .seznamKomponent{
        width: 100%;
    }



/*sestavy.php desktopy*/
     .grid-container {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        /*border: 3px solid #ff00cc;
        background-color: blue;*/
        padding: 10px 30px 10px 30px;
        /*padding: top right bottom left;*/
    }

    .seznamKomponentSestavy{
        width: 100%;
        background-color: #00dfef;
    }
     .articleSestavy{
        width: 100%;
        border: 3px solid #00FF08;
        /*background-color: rgb(98, 107, 109);*/
        background-color: #323341;
        border-radius: 50px;
        /*border: 1px solid #ccc;*/
        
     }
    .tabulkaSestavy{
        /*width: 40%;*/
        margin: 0 0 0 0px;
        /*width: 600px;*/
        width: 100%;
    }
    .FiltrSestavy{
        margin: 10px 30px 10px 30px;
        width: 50%;
        /*border: 3px solid #ff00cc;*/

        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }



    .galerie {
        width: 95%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 40px;
        /*border: 3px solid #ff00cc;
        background-color: blue;*/
        padding: 10px 30px 10px 30px;
        /*padding: top right bottom left;*/
    }
    .galerie-item{
        width: 100%;
        /*background-color: #323d41;*/
        background: linear-gradient(#cd08a9 75%,#2525f2 99%);/*mění pozadí na vícebarevné*/
        color:#ffffff;
        text-align: center;
    }
    .galerie-item-obr{
        float: center;
        width: 100%;
         transition: 1s;
        margin: 0 0 0 0px;
    }
    .galerie-item-obr:hover{
        
         filter: grayscale(0); 
        transform: scale(1.1); 
    }

    .galerie-item .galerie-h3{
        text-align: center;
        font-size: 25px;
        color:#00FF08;
        width: 100%;
        margin: 0 0 0 0px;
    }
    .galerie-item .galerie-text{
        text-align: center;
        font-size: 20px;
        color:#ffffff;
        width: 100%;
        margin: 0 0 0 0px;
    }

/*jednotlive clanky*/
   /* .overlay-clanek{
        width: 100%;
        top: 50px;
    }*/
    .clanky{
        width: 60%;
        float: center;
        border: 3px solid #00FF08;
        background-color: #323d41;
        /*border-radius: 50px;*/
        color: #ffffff; 
        /*border: 1px solid #ccc;*/
        margin: 0px 0px 0px 120px;
        /*padding: 10px 30px 10px 30px;*/
        /*padding: top right bottom left;*/
     }

    .clanek-ods{
        margin-left: 50px;
        margin-top: 15px;
        width: 90%;
    }
    .clanek-obr{
        width: 90%;
        margin-top: 15px;
        margin-bottom: 15px;
        
    }
    .liking{
        width: 90%;
       
        margin-top: 30px;
        margin-left: 50px;
        margin-bottom: 15px;
        /*border: 3px solid #ffa600;
        background-color: #c70c98;*/
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        /*grid-gap: 40px;*/
        float: center; 
    }
    .clanekLike{
        width: 50%;
        height: 100%;
        border: 3px solid #ff6a00;
        background-color: #000000;
        /*margin: 10px 10px 10px 10px;*/
        text-align: center;
        justify-self: center;
        align-self: center;
        float: center;
        color: #ffffff;
        grid-template-areas:
        'liker counter';
        /*grid-gap: 10px;*/
        display: grid;
    }
    .clanekDislike{
        width: 50%;
        height: 100%;
        border: 3px solid #ff6a00;
        background-color: #000000;
        /*margin: 10px 10px 10px 10px;*/
        text-align: center;
        justify-self: center;
        align-self: center;
        float: center;
        color: #ffffff;
        grid-template-areas:
        'liker counter';
        /*grid-gap: 10px;*/
        display: grid;
    }
    #liker {
        grid-area: liker;
        width: 100%;
        float: center;
        justify-self: center;
        align-self: center;

        /*border: 3px solid #fff200;*/
    }
    #counter {
        grid-area: counter;
        width: 100%;
        justify-self: center;
        align-self: center;

        /*border: 3px solid #fff200;*/
    }


/*clanky.php desktopy*/
    .overlay-clanky{
        width: 100%;
        top: 60px;
    }
    .overlay-clanek{
        width: 100%;
        top: 60px;
    }
    .overlay-aktuality{
        width: 100%;
        /*top: 50px;*/
    }
    .overlay-neaktuality{
        width: 100%;
        /*top: 50px;*/
    }
    .clanky-aktuality-container{
        width: 75%;
        margin: 0px 0px 0px 120px;
        border: 3px solid #FF0000;
        background-color: #323d41;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        /*grid-gap: 40px;*/
        float: center;
    }
    .clanky-aktuality{
        width: 90%;
        
        border: 3px solid #ff6a00;
        background-color: #233137;
        /*border: 1px solid #ccc;*/
        margin: 20px 20px 20px 20px;
        /*padding: top right bottom left;*/
        text-align: center;
        float: center;
        color: #ffffff;
        grid-template-areas:
            'obr obr obr nazev nazev'
            'obr obr obr pridano pridano'
            'obr obr obr popis popis';
        /*grid-gap: 10px;*/
        display: grid;
    }
    
    .clanek-NahlObrAkt{
        float: center;
        width: 100%;
        height: auto;
    }
    .clanek-aktuality-h3{
        text-align: center;
        font-size: 25px;
        color:#00FF08;
        width: 100%;
        margin: 0 0 0 0px;
    }
 

    
    .clanky-neaktuality-container{
        width: 75%;
        margin: 0px 0px 0px 120px;
        border: 3px solid #ff00ff;
        background-color: #5e6669;
        grid-template-columns: repeat(3, 1fr);
        display: grid;
        float: center;
        /*grid-gap: 40px;*/
    }

    .clanky-neaktuality{
        width: 80%;
        float: center;
        border: 3px solid #0000ff;
        background-color: #323d41;
        /*border: 1px solid #ccc;*/
        margin: 10px 10px 10px 10px;
        /*padding: top right bottom left;*/
        text-align: center;
        color: #ffffff;
        grid-template-areas:
            'obr obr nazev nazev'
            'obr obr pridano pridano'
            'popis popis popis popis';
        /*grid-gap: 5px;*/
        display: grid;
    } 
    .clanek-NahlObr{
        float: center;
        width: 100%;
    }
    .clanek-h3{
        text-align: center;
        font-size: 20px;
        color:#00FF08;
        width: 100%;
        margin: 0 0 0 0px;
    }

#obr {
        grid-area: obr;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        align-self: center;
    }
    #nazev {
        grid-area: nazev;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }
    #pridano {
        grid-area: pridano;
       /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }
    #popis {
        grid-area: popis;
        /*margin: 5px 0px 0px 0px;*/
        /*border: 3px solid #00ffff;*/
        justify-self: center; /* Zarovnání vodorovně na střed */
        align-self: center;
    }   




    .center {
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    

    
    .clanek{
        width: 80%;
        border: 3px solid #0000ff;
        background-color: #323d41;
        /*border: 1px solid #ccc;*/
        margin: 20px 40px 20px 40px;
        /*padding: top right bottom left;*/
        text-align: center;
        color: #ffffff;
    }  
 
   

  
   
    .articleGame {
        width: 75%;
     }
     .articleModel{
        width: 55%;
     }
     .articleH1 {
        text-align: center;
        width: 100%;
        /*margin: 40px 0 40px 20px;
        /*float:center;*/
    }
     .text{
        text-align: center;
        width: 100%;
    }

    .text h3{
        color: #ffffff;
        text-align: center;
    }

    .body{
        width: 100%;
    }
    .popisek{
        width: 48%;
        margin: 0 0 20 0px;
     }
     .popisekModel{
        width: 100%;
        margin: 0 0 20 0px;
        
     }
    .GamePicture{
        float: center;
        width: 48%;
        margin: 0 0 0 20px;
    }
    .Models{
        float: center;
        width: 48%;
        height: 48%;
    }
    .YTContback{
        width: 50%;
        margin: 0 0 0 50px;
        text-align: center;
    }
    .YTcontainer{
        margin: 0 0 0 40px;
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%;
        
    }
    .YTVideo{
        
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 90%;
        height: 90%;

     }

     .tabulka{
        /*width: 40%;*/
        margin: 0 0 0 40px;
        width: 600px;
    }

     .sestavaPic{
        width: 40%;
        margin: 0 40px 0 0px;
    }
   

    .table {
        border-collapse: collapse;
        width: 100%;
    }

    .table th, .table td {
        border: 1px solid #ccc;
        padding: 8px;
    }
    

    .footer {
        display: grid;
        /*position: fixed;*/
        bottom: 0;
        width: 100%;
        margin-top: 20px;
        text-align: center;
        grid-template-areas:
            'left center right';
        grid-gap: 10px;
        padding: 10px;
        font-size: 25px;
        background: #000000;
      }

    #left {
        grid-area: left;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}
    #center {
        grid-area: center;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}
    #right {
        grid-area: right;
        margin: 10px 0px 10px 0px;
        color:#00FF08;}

    .formular{
        text-align: center;
        width: 50%;
        margin-left: 100px;
        color: #00FF08;
        background-color: #000000;
    }


    .web-bg {
        position: fixed;
        bottom: 0;
        height: 100%;
        width: auto;
    
        
        background: #000000;
    
      }
    
    .back-ground {
        position: fixed;
        width: 100%;
        height: auto;
        right: 0;
        bottom: 0;
        z-index: -1;
        border: 3px solid #00FFFF;
        display: flex;
        justify-content: center;
        background: url("./assets/pictures/bluebg.jpeg") no-repeat center center fixed;
        background-size: cover;
    }
    
}













/* mobilní "hamburger" menu*/
#mobilehamburger
{
  display: block;
  position: relative;
  top: 10px;
  left: 10px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.Icon{
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 1;
    
    -webkit-user-select: none;
    user-select: none;
}

.IconDesktop{
    display: block;
    position: relative;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 1;
    
    -webkit-user-select: none;
    user-select: none;
}

#mobilehamburger a
{
  text-decoration: none;
  color: #00FF08;
  
  transition: color 0.3s ease;
}

#mobilehamburger a:hover
{
  color: #002efd;
}

#mobilehamburger input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; 
  z-index: 2; 
  
  -webkit-touch-callout: none;
}

#mobilehamburger span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #00FF08;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#mobilehamburger span:first-child
{
  transform-origin: 0% 0%;
}

#mobilehamburger span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#mobilehamburger input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #00FF08;
}

#mobilehamburger input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#mobilehamburger input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 500px;
  margin: -130px 0 0 -100px;
  padding: 50px;
  padding-top: 125px;
  
  background: rgb(36, 34, 34);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#mobilehamburger ul
{
	margin-left: -17em;
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#mobilehamburger input:checked ~ ul
{
  transform: none;
}


html {
background-color: black;
scroll-behavior: smooth; /*pomalej scroll*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'soopafre', sans-serif;
}
.body{
    max-width: 10000;
}
.TopLogo {
    position: relative;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

::-webkit-scrollbar {
    background: #2200ff;
}

::-webkit-scrollbar-thumb {
    background: #00FF08;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(0, 255, 8);
}

nav {
    height: 50px;
    z-index: +1;
    font-family: 'soopafre', sans-serif;
    position: fixed;
    color: #00FF08;
    top: 0;
    left: 0;
    padding:10px 5px 20px;
    background-color: black ;
    border-bottom: 0.5px solid #00FF08;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav .desktop-ul{
    display: flex;
    margin-left: 2em;
}

nav .desktop-li{
    display: flex;
    margin-left: 2em;


    
}

.desktop-li:last-child {
    border-left: 1px solid #00ff08;
}


nav .mobile-li{
    /*list-style: none;*/
    display: inline-block;
    margin-left: 10em;
}

nav .desktop-ul .desktop-li  a {
    text-decoration: none;
    color: #00FF08;
    font-size: 17px;
    align-items: center;
    margin-left: 1em; 
}




.content{
    text-align: center;
    position: absolute;
    overflow: auto;   
}



.content-signup{
    text-align: center;
    position: absolute;
    overflow: auto;   
    
}

.content h1 {
    
    font-family: 'soopafre', sans-serif;
    text-align: center;
    color: #00FF08;
    transition: 1s;
    -webkit-text-stroke:0.05em #000000;
}
.content-signup h1 {
    
    font-family: 'soopafre', sans-serif;
    text-align: center;
    color: #00FF08;
    transition: 1s;
    -webkit-text-stroke:0.05em #000000;
}

.content h1:hover {
    -webkit-text-stroke: 8px #00FF08;
    color: #000000;
}
.content-signup h1:hover {
    -webkit-text-stroke: 8px #00FF08;
    color: #000000;
}

.content a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border: 2px solid #fff;
    padding: 14px 70px;
    border-radius: 50px;
    margin-top: 20px;
}

.overlay {
    font-family: 'soopafre', sans-serif;
    position: absolute;
    top: 1000px;
}
.overlay h1 {
    font-family: 'soopafre', sans-serif;
    color: #00FF08;
    float: center;
    font-weight: 200;
    transition: 0.5s;
    width: 90%;
    margin: 0px 0px 0px 20px;
}

.overlay-clanky {
    font-family: 'soopafre', sans-serif;
    position: absolute; 
}
.overlay-clanky h1 {
    font-family: 'soopafre', sans-serif;
    color: #6f6f6f;
    float: center;
    font-weight: 200;
    transition: 0.5s;
    width: 90%;
    text-align: center;
    padding-top: 10px;
}
.overlay-aktuality {
    font-family: 'soopafre', sans-serif;
    /*position: absolute; */
}
.overlay-neaktuality{
    font-family: 'soopafre', sans-serif;
    /*position: absolute; */
}
.overlay-clanky{
    font-family: 'soopafre', sans-serif;
    /*position: absolute;*/
}
.overlay-clanek{
    font-family: 'soopafre', sans-serif;
    position: absolute;
}


.overlay-aktuality h1 {
    font-family: 'soopafre', sans-serif;
    color: #00FF08;
    float: center;
    font-weight: 200;
    transition: 0.5s;
    width: 90%;
    margin: 0px 0px 0px 20px;
}

.overlay-aktuality h3 {
    font-family: 'soopafre', sans-serif;
    font-size: 20px;
}


.link {
    font-weight: bold;
    color: #1741ff;
    text-decoration: double;
}

/*.overlay h1:hover {
    -webkit-text-stroke: 2px #00FF08;
    color: transparent;
}*/

.article {
	color:white;
    border: 3px solid transparent;
    border-radius: 50px;
    
    transition: 1s;
}

/*.articleH1 {
    margin: 40px 0 40px 20px;
	float:center;
}*/

.article:hover {
    background-color: rgb(50, 61, 65);
	color:white;
    border: 3px solid #00FF08;
    border-radius: 50px;
}
.articleGame {
    color:white;
    border: 3px solid transparent;
    border-radius: 50px;
    margin: 40px 0 40px 20px;
    transition: 1s;
}

.articleGame:hover {
    background-color: rgb(50, 61, 65);
	color:white;
    border: 3px solid #00FF08;
    border-radius: 50px;
}
.articleModel {
    color:white;
    border: 3px solid transparent;
    border-radius: 50px;
    margin: 40px 0 40px 20px;
    background-color: rgb(50, 61, 65);
	color:white;
    border: 3px solid #00FF08;
    border-radius: 50px;
}

/*.text {
    width: 100%;
    margin: 20px 20px 20px 20px;
    text-align:center;
}*/

 .popisek{
    float: left;
 }
.Models
{
    width: 100%;
    height: 100%;
}



.tabulka{
    
    float: left;
}
.sestavaPic{
    float: right;
}
.table, th, td{
    border:#00FF08 solid 3px;
    
    
}
th, td {
    background-color: #323341;
  }

.tableText{
    font-family: 'soopafre', sans-serif;
    font-size: 1.4em;
    text-align: center;
    color: #ffffff;
}
.seznamKomponent{
    float: left;
}

/*
.footer {
    clear: both;
}
*/

 /*#footerText { 
    
    color:#00FF08;
    Font-size: 1.2em;
    display: grid;
      gap: 3px;
    grid-template-areas:
      'left'
      'center'
      'right';
  }
  #left {
        grid-area: left;
        Font-size: 1.2em;
        color:#00FF08;}
#center {
        grid-area: center;
        Font-size: 1.2em;
        color:#00FF08;}
#right {
        grid-area: right;
        Font-size: 1.2em;
        color:#00FF08;}
*/


 .YTContback{
    background-color: #000000;
	color:white;
    border: 3px solid #00FF08;
    border-radius: 50px;
    

 }

 .YTContback h1 {
    margin: 15px 0 15px 0;
 }

 

@media (min-aspect-ratio: 16/9) {
    .back-video {
        width: auto;
        height: auto;
    }
}
.back-video {
    /*position: fixed;*/
    right: 0;
    bottom: 0;
    z-index: -1;
    border: 3px solid #00FFFF;
    display: flex;
    justify-content: center;
}
.button {
    background-color: #00ff0898; /* Green */
    border: none;
    color: #da08f5;
    padding: 15px 32px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    border: 2px solid #FF0000;
  }

  .button:hover {
    background-color: #da08f5;
    color: #00FF08;
    border: 2px solid #0000FF;
    cursor: pointer;
  }

  .FiltrButton {
    background-color: #0153c5; /* Green */
    border: none;
    color: #ffffff;
    padding: 10px 25px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    border: 2px solid #FF0000;
  }

  .FiltrButton:hover {
    background-color: #59575a;
    color: #ffffff;
    border: 2px solid #0000FF;
    cursor: pointer;
  }

  .LikeButton {
    background-color: #00ff0898; /* Green */
    border: none;
    color: #da08f5;
    width: 100%;
    height: 100%;
    
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    border: 2px solid #FF0000;
  }

  .LikeButton:hover {
    background-color: #da08f5;
    color: #00FF08;
    border: 2px solid #0000FF;
    cursor: pointer;
  }
  input[type=submit] {
    width: 80%;
    padding: 12px 12px;
    margin: 10px 30px 10px 0px;
    /*padding: top right bottom left;*/
    box-sizing: border-box;
  }

  input[type=number] {
    width: 90%;
    padding: 12px 20px;
    margin: 10px 20px 10px 20px;
    box-sizing: border-box;
  }
  input[type=text] {
    width: 90%;
    padding: 12px 20px;
    margin: 10px 20px 10px 20px;
    box-sizing: border-box;
  }
  input[type=text2] {
    width: 42.5%;
    padding: 12px 20px;
    margin: 10px 20px 10px 20px;
    box-sizing: border-box;
  }

  input[type=textarea] {
    width: 90%;
    padding: 12px 20px;
    margin: 10px 20px 10px 20px;
    box-sizing: border-box;
  }

  textarea {
    height: 100px;
    width: 90%;
    padding: 12px 20px;
    margin: 10px 20px 10px 20px;
    box-sizing: border-box;
  }

  input[type=date] {
    width: 90%;
    padding: 12px 20px;
    margin: 10px 20px 10px 20px;
    box-sizing: border-box;
  }
  input[type=email] {
    width: 90%;
    padding: 12px 20px;
    margin: 10px 20px 30px 20px;
    box-sizing: border-box;
  }
  input[type=password] {
    width: 90%;
    padding: 12px 20px;
    margin: 10px 20px 30px 20px;
    box-sizing: border-box;
  }


  .gallery{
    width: 100%;
    height: auto;
}

.warning{
    width: 100%;
    height: auto;
    position: relative;
    background-color: #ffff00;
    margin-top: 60px;
    border: 3px solid #00ff08;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.text-mobil { display: none; }
    .text-desktop { display: none; }

/*.back-video {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
    border: 3px solid #00FFFF;
    display: flex;
    justify-content: center;
}*/