body {

    background-color: white;
    height: fit-content;
    width: 1300px;
}

#big {

    height: 100px;
    width: 600px;
    background-color: white;
    font-size: 80px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    text-align: center;
    padding-top: 10px;
    margin-bottom: 0px;
    
}

#facts {

    height: 600px;
    width: 600px;
    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: 100px;
    margin-left: 20px;
    
}

#topfacts {

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

#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: 100px;
    margin-top: 30px;
    margin-bottom: 0px;
    
    
}

#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: white;
    display:block;
    height: 40px;
    width: 500px;
}

#jeal {

    background-color: rgb(71, 71, 71);
    height: 40px;
    width: 110px;
    border: none;
    margin-top: 10px;
    margin-left: 100px;
    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;}
}



#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: 300px;
    display: none;
    grid-template-columns: 50% 50%;
    column-gap: 30px;
    margin-left: 30px;
    margin-top: 20px;
}



#realbtn {

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

#norealbtn {

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

#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;

}