@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");*,*::after,*::before{box-sizing:inherit}*{font:inherit}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,ol,ul,li,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,hr{margin:0;padding:0;border:0}html{box-sizing:border-box}body{background-color:#fff;background:url("../img/bg.jpg");}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,form legend{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}button,input,textarea,select{margin:0}.btn,.form-control,.link,.reset{background-color:transparent;padding:0;border:0;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control::-ms-expand{display:none}textarea{resize:vertical;overflow:auto;vertical-align:top}input::-ms-clear{display:none}table{border-collapse:collapse;border-spacing:0}img,video,svg{max-width:100%}[data-theme]{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #fff);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}:root{--space-unit:  1em;--space-xxxxs: calc(0.125*var(--space-unit));--space-xxxs:  calc(0.25*var(--space-unit));--space-xxs:   calc(0.375*var(--space-unit));--space-xs:    calc(0.5*var(--space-unit));--space-sm:    calc(0.75*var(--space-unit));--space-md:    calc(1.25*var(--space-unit));--space-lg:    calc(2*var(--space-unit));--space-xl:    calc(3.25*var(--space-unit));--space-xxl:   calc(5.25*var(--space-unit));--space-xxxl:  calc(8.5*var(--space-unit));--space-xxxxl: calc(13.75*var(--space-unit));--component-padding: var(--space-md)}:root{--max-width-xxs: 32rem;--max-width-xs:  38rem;--max-width-sm:  48rem;--max-width-md:  64rem;--max-width-lg:  80rem;--max-width-xl:  90rem;--max-width-xxl: 120rem}

.main{
max-width:100%;
max-height:100%;
}



.landscape_info{
	background: #ddd;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
	
	background-color: #fff;
    background-image: url("../img/landscape_smartphone.png");
	background-position: center;
    background-repeat: no-repeat;
}






@keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #382b2b00;
    overflow: hidden;
}
.background li {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #e5e5e5;
    color: transparent;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 7s ease-in forwards infinite;
}
undefined
.background li:nth-child(0) {
    animation-delay: 0s;
    left: 29vw;
    top: 72vh;
}

.background li:nth-child(1) {
    animation-delay: 2s;
    left: 7vw;
    top: 21vh;
    border-color: #ffffff;
}

.background li:nth-child(2) {
    animation-delay: 4s;
    left: 90vw;
    top: 62vh;
}

.background li:nth-child(3) {
    animation-delay: 6s;
    left: 58vw;
    top: 94vh;
}

.background li:nth-child(4) {
    animation-delay: 8s;
    left: 71vw;
    top: 15vh;
}

.background li:nth-child(5) {
    animation-delay: 10s;
    left: 42vw;
    top: 34vh;
}








.logo{
	    width: 60%;
    position: relative;
    top: 35px;
    margin: 0 auto;
    max-width: 240px;
    max-height: 200px;
}

.logo img {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 4s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* 
  ##Urządzenie = Komputery stacjonarne
  ##Ekran = 1281 px do komputerów stacjonarnych o wyższej rozdzielczości
*/


.pika{
	position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
	
}

.pika img{
	
	height: 150px;
    /* width: 100%; */
    float: left;
}

.game-buton-pod-lo{
position: relative;
    margin: 45px auto 0px auto;
    width: 100%;
    text-align: center;
    padding: 0 15%;
   
}




.button {
       margin: 10px auto;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
   border: 4px solid #000000;
       width: 100%;
	       text-shadow: 0 2px 4px #000, 0 2px 2px #000000, 1px 0px 4px #000000;
}



.button span {
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
   
    background-size: 3px 3px;
}

.button:hover {
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}

.button:active {
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}



.button-y {
    background: #ffb60b;
     background: url(../img/klawisz_zolty.png);
    background-size: contain;
}

.button-y:hover {
 border: 4px solid #4d4d4d;
}

.button-y:active {
border: 4px solid #707070
}






.stopka{
min-height: 60px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: #16d0ff;
    /* background: url(../img/klawisz_niebieski.png); */
    /* background-size: contain; */
    /* background-size: contain; */
    border-top: 2px solid #000;
}
.stopka1{


}

.stopka2{

padding: 5px 10px;
}


@media (min-width: 1281px) {
 
  /* CSS */
  .main{
max-width:100%;
max-height:100%;
}
}

/* 
 ##Urządzenia = Laptopy, komputery stacjonarne
  ##Ekran = czarno-biały 1025px do 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
.main{
max-width:100%;
max-height:100%;
}
}

/* 
  ##Urządzenie = Tablety, iPady (pionowe)
  ##Ekran = czarno-biały 768px do 1024px
  ##(portrait)
*/

@media (min-width: 768px) and (max-width: 1024px) {

.main{
max-width:100%;
max-height:100%;
}
  
}

/* 
  ##Urządzenie = Tablety, iPady (poziomo)
  ##Ekran = czarno-biały 768px do 1024px
  ##(landscape)

*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

.main{
max-width:100%;
max-height:100%;
}
  
}

/* 
  ##Device = Tablety o niskiej rozdzielczości, telefony komórkowe (poziome)
  ##Ekran = czarno-biały 481px do 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

.main{
max-width:100%;
max-height:100%;
}
  
}

/* 
 ##Device = Większość smartfonów i telefonów komórkowych (portret)
  ##Ekran = czarno-biały 320px do 479px
*/


///
@media (min-width: 320px) and (max-width: 480px) {
 
.main{
max-width:100%;
max-height:100%;
}
  
}