body {

    background-color: white;
    min-height: 100vh;
    width: 100%;
    max-width: 1300px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;

     background-image:url('images/dealornodeal4.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: left;
   background-size: 100% 100%;
}


ul {

    margin-left: 10px;

}




#big {

    height: 100px;
    width: fit-content;
    background-color: transparent;
    font-size: 70px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
    
}


#facts {

    height: 600px;
    width: 800px;
    background-color: rgb(30, 196, 30);
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-top: 0px;
    padding-top: 0px;
    margin-left: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    
}

#topfacts {

    font-size: 40px;
    color: rgb(166, 255, 0);
    margin-left: 15px;
}

#lotto1,#lotto2,#lotto3,#lotto4 {

    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    
    
}

#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: 0px;
    margin-top: 30px;
    margin-bottom: 200px;
    
    
}

#button {

    margin-left: 500px;
    margin-top: 10px;
    background-color: rgb(166, 255, 0);
    color: green;
    height: 40px;
    width: 80px;
    border-radius: 20%;
}

#square1,#square2,#square3,#square4,#square5,#square6,#square7,#square8,
#square9,#square10,#square11,#square12,#square13,#square14,#square15,#square16 {

    height: 100px;
    width: 100px;
    margin-top: 0px;
    perspective: 1000px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    
    
}

@keyframes zula {

    0% { transform: rotateY(0deg); transform-style: preserve-3d;}
    100% {transform: rotateY(180deg);  transform-style: preserve-3d;}
   
}

@keyframes zula2 {

    0% { transform: rotateY(180deg); transform-style: preserve-3d;}
    100% {transform: rotateY(0deg);  transform-style: preserve-3d;}
   
}

@keyframes zulu {

    0% { transform: rotateY(0deg); transform-style: preserve-3d;}
    100% {transform: rotateY(180deg);  transform-style: preserve-3d;}
   
}



#flip1, #flip2,#flip3, #flip4,#flip5, #flip6,#flip7, #flip8,
#flip9, #flip10,#flip11, #flip12,#flip13, #flip14,#flip15, #flip16 {
    
    position: relative;
    box-shadow: 0 4px 8px 0;
    transform: 0.6s;
    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
    background-color: rgb(141, 226, 43);
    transform: rotateY(180deg);
    transform-style: preserve-3d;

    
}



#front1, #front2,#front3, #front4,#front5, #front6,#front7, #front8,
#front9, #front10,#front11, #front12,#front13, #front14,#front15, #front16 {
     
    position: absolute;
    background-color: rgb(211, 133, 69);
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    
    
}

#back1, #back2,#back3, #back4,#back5, #back6,#back7, #back8,
#back9, #back10, #back11, #back12, #back13, #back14, #back15, #back16{

    position: absolute;
    background-color: rgb(30, 196, 30);
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    
}


#temu1, #temu2 {

    background-color: rgb(42, 27, 255);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}


#temu3, #temu4 {

    background-color: white;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}

#temu5, #temu6 {

    background-color: black;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}

#temu7, #temu8 {

    background-color: rgb(255, 137, 27);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}

#temu9, #temu10 {

    background-color: red;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}

#temu11, #temu12 {

    background-color: rgb(119, 0, 60);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}

#temu13, #temu14 {

    background-color: rgb(255, 0, 255);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}

#temu15, #temu16 {

    background-color: rgb(27, 255, 244);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;

    
}



#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: 0px;
    
}

#jeal {

    background-color: rgb(71, 71, 71);
    height: 40px;
    width: 110px;
    border: none;
    margin-top: 10px;
    margin-left: 0px;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

@keyframes nama {
    
    
     25% {border-right: 15px solid rgb(0, 47, 255);}
     50% {border-bottom: 15px solid rgb(0, 47, 255);}
     75% {border-left: 15px solid rgb(0, 47, 255);}
     100% {border-top: 15px solid rgb(0, 47, 255);}
}

@keyframes nama2 {
    
    
    25% {border-right: 15px solid yellow;}
    50% {border-bottom: 15px solid yellow;}
    75% {border-left: 15px solid yellow;}
    100% {border-top: 15px solid yellow;}
}

#alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    

}

#olka {

    color: white;
    font-size: 30px;
    margin-left: 5px;
    margin-top: 20px;
   
}

#reli {

    font-size: 25px;
    margin-bottom: 0px;
    margin-left: 60px;
    
}


#rrbtn {

    height: 50px;
    width: 330px;
    display: none;
    grid-template-columns: 150px 150px;
    column-gap: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}



#realbtn {

    background-color: rgb(171, 236, 66);
    font-weight: 535;
    font-size: 16px;
    color: black;
    border-radius: 10px;
    height: 100%;
    width: 150px;
}

#norealbtn {

    background-color: red;
    font-weight: 535;
    font-size: 16px;
    color: black;
    border-radius: 10px;
    height: 100%;
    width: 150px;
}

#realbtn:hover, #norealbtn:hover {

    opacity: 0.6;
}

#ddbtn {

    height: 50px;
    width: 300px;
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 30px;
    margin-left: 30px;
    margin-top: 20px;
}



#dealbtn {

    background-color: rgb(171, 236, 66);
    font-weight: 545;
    font-size: 16px;
    color: black;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

#nodealbtn {

    background-color: red;
    font-weight: 545;
    font-size: 16px;
    color: black;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

#dealbtn:hover, #nodealbtn:hover {

    opacity: 0.6;
}

#hour,#minute,#second {

    color: white;
    font-size: 25px;

}


@media only screen and (min-width:1px) and (max-width:364px) {

    body{

        width: 100%;
        min-width: 300px;
        max-width: 364px;
    }

 
     #big {

    height: 60px;
    width: fit-content;
    background-color: transparent;
    font-size: 40px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
   
    
}

#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -20px;
    transform: scale(0.60);
    transform-origin: left;

}

#alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: 240px;
    

}

#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top: -80px;
    margin-bottom: 200px;
    transform: scale(0.60);
    transform-origin: left;

    
}
 

  

    
}


@media only screen and (min-width:365px) and (max-width:385px) {

    body{

        width: 100%;
        min-width: 365px;
        max-width: 385px;

    }


    
     #big {

    height: 60px;
    width: fit-content;
    background-color: transparent;
    font-size: 40px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
   
    
}

#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -20px;
    transform: scale(0.60);
    transform-origin: left;

}


#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top: -80px;
    margin-bottom: 200px;
    transform: scale(0.60);
    transform-origin: left;

    
}

#alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: 240px;
    

}
    
    
  

    
}




@media only screen and (min-width:386px) and (max-width:415px) {

    body{

        width: 100%;
        min-width: 386px;
        max-width: 415px;
    }

     
     #big {

    height: 60px;
    width: fit-content;
    background-color: transparent;
    font-size: 40px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
   
    
}

#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -20px;
    transform: scale(0.60);
    transform-origin: left;

}


#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top: -80px;
    margin-bottom: 200px;
    transform: scale(0.60);
    transform-origin: left;

    
}

#alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: 240px;
    

}

}


@media only screen and (min-width:416px) and (max-width:499px) {

    body{

        width: 100%;
        min-width: 416px;
        max-width: 599px;

    }


    
    #big {

    height: 100px;
    width: 400px;
    background-color: transparent;
    font-size: 60px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
    transform: scale(0.90);
    
}

#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: 0px;
    transform: scale(0.90);

}


#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 200px;
    transform: scale(0.90);
    
    
}
 
     
#alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    

}
   

    
}


@media only screen and (min-width:500px) and (max-width:599px) {

   

  body{

        width: 100%;
        min-width: 500px;
        max-width: 599px;
    }


     #big {

    height: 100px;
    width: fit-content;
    background-color: transparent;
    font-size: 65px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
    
}

#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: 0px;
    
}


#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: 0px;
    margin-top: 30px;
    margin-bottom: 200px;
    
    
}
   

 #alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    

}   

    
}



@media only screen and (min-width:600px) and (max-width:800px) {

    body{

        width: 100%;
        min-width: 600px;
        max-width: 800px;
    }


    #big {

    height: 100px;
    width: fit-content;
    background-color: transparent;
    font-size: 70px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
    
}

#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: 0px;
    
    
}


#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: 0px;
    margin-top: 30px;
    margin-bottom: 200px;
    
    
}


#alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    

}
    
}


@media only screen and (min-width: 801px) and (max-width: 920px) {

    body{

        width: 100%;
        min-width: 801px;
        max-width: 920px;

    }


    #big {

    height: 100px;
    width: fit-content;
    background-color: transparent;
    font-size: 70px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    margin-bottom: 0px;
    
}

#offer {

    background-color: transparent;
    display:block;
    height: 40px;
    width: 400px;
    margin-left: 0px;

}


#table {

    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    background-color: rgb(211, 133, 69);
    border: 1px solid black;
    margin-left: 0px;
    margin-top: 30px;
    margin-bottom: 200px;
    
    
}
  
#alk, #alkk {

    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    

}
    
}