*{margin:0; padding:0;} 
 html{background-image: url(../picture/stena2.png);}
 body{
      padding: 0px;
      margin: 0px;
      height: 100%;width: 100%;
      /*min-height: 680px;
      min-width: 250px;*/
      min-height: 755px;
      min-width: 979px;
      /*display: flex;
      flex-direction: column;*/
      display: block;
      background-color: #002d01;
      background: linear-gradient(90deg, rgb(5 16 4)0%, rgba(8, 64, 0, 0.84)49.5%, rgba(8, 64, 0, 0.84)50.5%, rgba(5 16 4)100%);
    }
    header, footer{
    position: relative;
    background-color: #9898988f;
    background: linear-gradient(180deg, rgba(0,0,0,0.6)0%, rgba(0,0,0,0.1)100%);
    }
    footer{
    background: linear-gradient(0deg, rgba(0,0,0,0.6)0%, rgba(0,0,0,0.1)100%);
    }
    
    article{
    /*flex-grow: 1;
    height: 100vh;*/
    display: block;
    width: 100%;height:100%;height:100vh;
    margin: 60px auto 0;
    }
    
    span{
    display: inline-block;
    position: relative;
    padding: 24px;
    /*color: #88bdbd; color: #a4e2a4;*/
    color: #afd294;
    text-shadow: 5px 3px 4px #000;
    font-size:30px;
    font-family: serif;
    }
    
    p{
    padding: 24px;
    color: #afd294;
    text-shadow: 5px 3px 4px #000;
    font-size: 30px;
    font-family: serif;
    }
    
    .disp1{
    display:block; opacity:100; transition: 0.4s;
    }
    
    .disp4, .disp8, .disp8a{
    display:none; opacity:0; transition: 0.4s;  
    }
    
    p4{
    display: block;
    margin: 0;
    /*top: 28px;*/
    padding: 5px 4px 0 2px;
    height: 50px;
    width: 50px;
    background-color: #23511c;
    border-radius: 80px;
    cursor: grab;
    position:absolute;
    transition: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    box-shadow: inset 0px 0px 7px 4px #afd2947a, inset 0px 0px 10px 13px #000000;   
    font-size: 40px; font-size: 2.5em;
    font-family: serif, Times New Roman;
    text-align: center;
    text-shadow: 3px 3px 2px black;
    color: #afd294;
    }
    
    p4:hover{
    color: #6a1414;
    text-shadow: -1px 0px 0px #585858;
    box-shadow: inset -1px -1px 20px 13px #000;
    }
  
    .odin, .chetyre, .vosem, .vosema {
    height: 55px;
    width: 56px;
    position:absolute; top: 24px;
    /*font-size: 40px;
    font-family: serif;
    text-align: center;
    margin: 0;
    padding: 5px 4px 0 2px;
    background-color: #23511c;
    color: #afd294;
    border-radius: 80px;
    cursor: grab;
    transition: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    box-shadow: inset 0px 0px 7px 4px #afd2947a, inset 0px 0px 10px 13px #000000;
    text-shadow: 3px 3px 2px black;*/
    }
  
    .vosem, .vosema{right: 0px;}

    .odin:hover, .chetyre:hover, .vosem:hover, .vosema:hover {
    /*box-shadow: inset -1px -1px 20px 13px #000;
    color: #6a1414;
    text-shadow: -1px 0px 0px #585858;*/
    }
  
    .odin, .vosem{
    display:none;
    }
     
    .flipcard, .flipcard1, .flipcard2, .flipcard3, .flipcard4, .flipcard81, .flipcard82, .flipcard83, .flipcard84, .flipcard85, .flipcard86, .flipcard87, .flipcard88, .flipcard8a {   
    perspective: 800px;
    height: 100%;
    width: 251.6px;
    position: relative;
    margin: 0 auto;
    display: block;
    }
    
    .flipcard8a {width: 230px;}
    
    .flipcard1{
    margin: 0px 0 0 0;width: 229px;
    }
    .flipcard2{
    margin: -336px 0 0 250px;width: 229px;
    } 
    .flipcard3{
    margin: -336px 0 0 500px;width: 229px;
    }
    .flipcard4{
    margin: -336px 0 0 750px;width: 229px;
    }
    
    .flipcard81, .flipcard82, .flipcard83, .flipcard84, .flipcard85, .flipcard86, .flipcard87, .flipcard88 {
    width:137px; 
     } 
  
     .flipcard81 {
     margin: 0px 0 0 0px;
     }
     .flipcard82 {
     margin: -200px 0 0 153px;
     } 
     .flipcard83 {
     margin: -200px 0 0 306px;
     } 
     .flipcard84 {
     margin: -200px 0 0 459px;
     } 
     .flipcard85{
     margin: 15px 0 0 0px;
     }
     .flipcard86{
     margin: -200px 0 0 153px;
     }
     .flipcard87{
    margin: -200px 0 0 306px;
     }
     .flipcard88{
     margin: -200px 0 0 459px;
     }
  
    .card, .card1, .card2, .card3, .card4, .card81, .card82, .card83, .card84, .card85, .card86, .card87, .card88, .card8a {
    position:relative;
    width: 100%;
    height: 370px;
    margin: 0 auto;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 10px;
    z-index:1000;
    box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.6);
    }
    
    .card8a{height: 337px;}
    
    .card1, .card2, .card3, .card4{
    height: 336px;
    }
    
    .card81, .card82, .card83, .card84, .card85, .card86, .card87, .card88{
    height:200px;
    }
  
    .black{
    background-color: #000;
    }
  
    .white{
    transform: rotateY(180deg);   
    }

    .blok, .blok1, .blok2, .blok3, .blok4, .blok81, .blok82, .blok83, .blok84, .blok85, .blok86, .blok87, .blok88, .blok8a, .back, .back1, .back2, .back3, .back4, .back81, .back82, .back83, .back84, .back85, .back86, .back87, .back88, .back8a {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    transition: transform 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    backface-visibility: hidden;
    box-sizing: border-box;
    background-size: 100%;
    }
  
    .blok, .blok1, .blok2, .blok3, .blok4, .blok81, .blok82, .blok83, .blok84, .blok85, .blok86, .blok87, .blok88, .blok8a {
    background:#006211;
    background-image: url(../picture/rub61.jpg);
    background-size: 100% 100%;
    box-shadow: inset 0px 0px 17px 0px #471111c; 
    }
  
    .back, .back1, .back2, .back3, .back4, .back81, .back82, .back83, .back84, .back85, .back86, .back87, .back88, .back8a {
    transform: rotateY(180deg);
    background-color: #f2f2f2;
    transform-style: preserve-3d;
    }
  
    .button_white, .button_black{
        width: 125.8px;
        height: 150px;
        border: 1px solid #8d7f68;
        background-color: #dbdbdb;
        display: inline-block;
        position: relative;
        margin: 15px auto 0px;
      
    }
    
    .button_black{
        background-color: #3a3a3a;
        float: left;
        }
    
    .button_white:active, .button_black:active{
        box-shadow: inset 2px 4px 20px 8px #000000;
        }

    .divScore{
        width: 50px;
        height: 50px;
        color: #84fc86;color: #9bd69c;color: #ecccbf;color: #eeffd0;
        text-shadow: -1px -1px 2px black, -2px -2px 4px black, 1px 1px 2px black, 2px 2px 4px black;
        left: calc( 50% - 25px);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 11em;
        font-weight: bold;
        font-family: serif;
        transition: all 0.3s ease-in;
        position: relative;
        top: calc( 50% - 30px ); 
        top: 140px;
        z-index:2001;
        }
    
    .novo, .obraz, .karta, .tsvet, .tsyfra, .obraz2  {
        font-size: 19px;
        background: #3e8a001c;
        width: 125px;
        color: #afd294;
        padding: 3px 0px 2px;
        text-decoration: blink;
        border-radius: 5px;
        box-shadow: 2px 2px 3px 0px #000, inset 0 0 0 0 #000;
        display: inline-block;
        z-index: 2001;
        cursor: pointer;
        font-family: serif;
        transition: 0.2s ease;
        text-shadow: 3px 1.5px 1.5px #000;
        }
    
    .novo:hover, .obraz:hover, .karta:hover, .tsvet:hover, .tsyfra:hover, .obraz2:hover{
        color: #49b4b4;
        box-shadow: inset 0px 0px 6px 1px #000;
        }
    
    .obraz:active, .karta:active, .tsvet:active, .tsyfra:active, .obraz2:active{
        color: #c02626;
        text-shadow: -1px -1px 2px #000;
        box-shadow: inset 0px 0px 20px 0px #000;
        }
        
    ul{
        display:inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        }

    ul.spisok{
        display:block;
        list-style-type: none;
        position: absolute;
        z-index: 30;
        margin: 0;
        padding: 0;
        opacity:0;
        visibility: hidden;
        transition:0.5s ease;  
        transition-property:opacity, visibility;
        transition-duration: .5s, .5s;
        }

    li:hover ul.spisok{
        display:block;
        visibility: visible;
        opacity:100;
        box-shadow: inset 0px 0px 6px 1px #000;

        }
    
    .message{
        text-align: center;
        opacity:0;
        font-size: 120px;
        font-weight: bold;
        font-family: serif;
        position: absolute;
        color: #83902f;color:#f6fc84;color: #9bd69c;color: #eeffd0;
        text-shadow: 3px 3px 6px #000;
        top: 180px;
        z-index: 2000;
        width: 100%;
        transition: all 0.6s ease-in;
        } 
    
   .butt{
        display: inline-block;
        margin-top: -10px;
        z-index:2001;
        }
        
    .nevidim{
        display: none;
        }
    
    .leaderboard, .leaderboard8{
        font-size: 20px;
        text-align: -webkit-center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 10px;
        /*border: 2px solid #626f00;
        box-shadow: 9px 9px 9px 6px rgb(0 0 0 / 50%);*/
        position: relative;
        left: calc( 50% - 397px );
        z-index: 2001;
        /*transition: all 1.3s ease-in;*/
        opacity:100;
        /*top: 459px;*/  
        margin: -248px 397px 0 0;
        }
        
    .leaderboard8{left: calc( 50% - 310px ); margin: -168px 450px 0 0;}
        
    .leaderboard1,.leaderboard2,.leaderboard3,.leaderboard4, .leaderboard81, .leaderboard82, .leaderboard83, .leaderboard84, .leaderboard85, .leaderboard86, .leaderboard87, .leaderboard88{
        font-size: 20px;
        text-align: -webkit-center;
        display: block;
        border-radius: 10px;
        position: absolute;
        z-index: 2001;
        transition: all 1s ease-out;
        }
        
    .leaderboard81, .leaderboard82, .leaderboard83, .leaderboard84, .leaderboard85, .leaderboard86, .leaderboard87, .leaderboard88{
        height:180px;  width:141px;
        }
    
    span a{
        text-decoration: blink;
        margin: -30px 0 0 260px;
        }
    
    .nava {
        font-size: 18px;
        background: #284d0a;
        color: aqua;
        padding: 0px 10px 4px;
        text-decoration: blink;
        border-radius: 5px;
        box-shadow: 2px 2px 3px 0px #000, inset 0 0 0 0 #000;
        display: inline-block;
        z-index: 2001;
        cursor: pointer;
        font-family: serif;
        transition: 0.2s ease;
        margin-right: 5px;
        display:none;
        }
    
    .nava:active{
        box-shadow: 0 0 0 0 #000,
        inset 2px 2px 10px 2px #000;
        color: #49b4b4;
        text-shadow: none;
        }
    
    span p{
        margin-top: 0px;
        text-shadow:none;
        color:#000;
        }
    
    .panel_right{
        text-align: center;
        text-shadow: 1px 1px 2px #000;
        }
    
    table{
         font-size:1.5em;
         text-shadow:none;
         width:100%;
         text-align:center;
        }

    b > p{
        color: #000;
        text-shadow: none;
        box-shadow: 1px 1px 2px #000;
        }

@media /*(max-width: 1200px) and (min-height: 1080px)*/(orientation: portrait){
    body{
       /*height:100vh;*/
       min-height:1603px; min-height:1570px; min-width: 980px;
    }
    
    /*li:hover ul.spisok{
        pointer-events: none;
    }*/
    
    article{
       margin: 43px auto 0;
    }
    
    li ul.spisok:hover{
        visibility: hidden;
        opacity:0;
    }
    
    span{
        font-size:60px;
    }
    
    p{
        font-size:45px;
        font-family:serif;
    }

    .nava, .novo, .obraz, .karta, .tsvet, .tsyfra, .obraz2{
      width:338px;
      font-size:44px;
    }
    
    .flipcard, .flipcard8a {
        width: 680px;
        height: 100%;
    }
    
    .flipcard8a {margin-top: 0px;}
    
    .flipcard1{
        margin: 200px 0 0 0;width: 229px;
    }
    .flipcard2{
        margin: -136px 0 0 250px;width: 229px;
    } 
    .flipcard3{
        margin: -136px 0 0 500px;width: 229px;
    }
    .flipcard4{
        margin: -136px 0 0 750px;width: 229px;
    }
    .flipcard81{
        margin: 100px 0 0 0;width: 229px;
    }
    .flipcard82{
        margin: -170px 0 0 250px;width: 229px;
    } 
    .flipcard83{
        margin: 20px 0 0 500px;width: 229px;
    }
    .flipcard84{
        margin: -136px 0 0 750px;width: 229px;
    }
    .flipcard85{
        margin: -1057px 0 0 750px;width: 229px;
    }
    .flipcard86{
        margin: -171px 0 0 500px;width: 229px;
    } 
    .flipcard87{
        margin: 20px 0 0 250px;width: 229px;
    }
    .flipcard88{
        margin: -136px 0 0 0px;width: 229px;
    }
    
   .card, .card8a{
     width: 100%;
     height: 1000px;
     border-radius: 30px;
   }
   
   .card81, .card82, .card83, .card84, .card85, .card86, .card87, .card88 {
     height: 336px;
    }
  
   .blok, .back, .blok8a, .back8a{
     border-radius: 30px;
  }
    
   .button_white, .button_black {
     width: 247px;
     width: 338px;
     height: 300px; height: 15vh;
     margin-top: 30px;
     }
     
   .message {
     top:225px;
     }
     
   .divScore {
     top:460px;
    }
    /*.child {}margin-right: 164px;*/
    .leaderboard{
     top:1248px;
     top: 151px; top: -97px;  top: -200px; left: calc(50% - 400px);  margin:0; width: calc(100% - 95px);  
     
    }
    
    .leaderboard8{
      top:1150px; top: 132px;  left: calc( 50% - 325px );
    }
    
    .leaderboard81, .leaderboard82, .leaderboard83, .leaderboard84, .leaderboard85, .leaderboard86, .leaderboard87, .leaderboard88{
      height:200px;  width:170px;
    }
    
    .odin, .chetyre, .vosem, .vosema {
    height: 105px;
    width: 106px;
    position:absolute; 
    top: 190px;
    }
    
    p4{
      font-size: 80px; font-size: 5em;
      height: 100px;
      width: 100px;
    }
}


form{
    margin:10px auto 0;
}

input{
    border-radius: 3px 5px;
    box-shadow: inset 1px 1px 6px #000;
    border: none;
    padding: 5px;
    margin-top: 2px;
    display: block;
}

button{
    box-shadow: inset 1px 1px 6px 0px #000;
    box-shadow:  inset 1px 1px 4px 0px #000;
    margin-top: 2px;
    border-radius: 15px;
    font-weight: bold;
    font-style: italic;
    font-family: serif;
    color: #000;
}
button:active{
    box-shadow: inset 1px 1px 15px 10px #000;
    color: #49b4b4;
    text-shadow: none;
    transition: 0.2s ease;
    color: #000;
}