/* 
███████╗████████╗██╗   ██╗██╗      ██████╗ ██╗    ██╗██╗   ██╗    ████████╗███████╗███╗   ██╗    ███████╗████████╗██╗   ██╗██╗     
██╔════╝╚══██╔══╝╚██╗ ██╔╝██║     ██╔═══██╗██║    ██║╚██╗ ██╔╝    ╚══██╔══╝██╔════╝████╗  ██║    ██╔════╝╚══██╔══╝╚██╗ ██╔╝██║     
███████╗   ██║    ╚████╔╝ ██║     ██║   ██║██║ █╗ ██║ ╚████╔╝        ██║   █████╗  ██╔██╗ ██║    ███████╗   ██║    ╚████╔╝ ██║     
╚════██║   ██║     ╚██╔╝  ██║     ██║   ██║██║███╗██║  ╚██╔╝         ██║   ██╔══╝  ██║╚██╗██║    ╚════██║   ██║     ╚██╔╝  ██║     
███████║   ██║      ██║   ███████╗╚██████╔╝╚███╔███╔╝   ██║          ██║   ███████╗██║ ╚████║    ███████║   ██║      ██║   ███████╗
╚══════╝   ╚═╝      ╚═╝   ╚══════╝ ╚═════╝  ╚══╝╚══╝    ╚═╝          ╚═╝   ╚══════╝╚═╝  ╚═══╝    ╚══════╝   ╚═╝      ╚═╝   ╚══════╝
                                                                                                                                   
*/
/* ==================================================================================================================================== */
        *{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* ==================================================================================================================================== */
        }
        body{
            display: flex;
            flex-direction: column;
            height: 96vh;
            width: 98vw;
        }
/* ==================================================================================================================================== */
        #top{
            flex: 1;
            
        }
        #title{
            height: 70%;
            margin: 0;
            display: block;
            margin-left: auto;  
            margin-right: auto;
            
        }
/* ==================================================================================================================================== */
        #middle{
            flex: 2;
            width: 100%;
            display: flex;
            flex-direction: row;
        }
/* --------------------------------------- */
            #middle-right{
                flex: 2;
            }
                #tabela{
                    border: solid 5px black ;
                    text-align: center;
                    height: 100%;
                    width: 100%;
                    border-collapse: collapse;
                    font-weight: bolder;
                    
                }
                #tabela td{
                    border: solid 1px black ;
                }
                #tabela td:last-child{
                    width: 20%;
                }
                #tabela td>img{
                    width: 60%;
                    height: 60%;
                    object-fit: contain;
/* --------------------------------------- */
                }
            #middle-center{
                flex: 4;
                display: flex;
                flex-direction: column;
            }
                #slot-machine{
                    flex: 10;
                }
                    #sloty{
                        height: 100%;
                        width: 90%;
                        margin: auto;
                        border: solid 5px black;
                        border-collapse: collapse;
                        text-align: center;
                    }
                    #sloty td{
                        border: solid 1px black;
                        width: 33%;
                    }
                    #sloty td>img{
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                #bet-amount{
                    flex: 1;
                    text-align: center;
                    font-size: 300%;
                    font-weight: bolder;
                }
                #bet-amount>input{
                    font-size: 80%;
                    width: 10%;
                    font-weight: bolder;
                }
/* --------------------------------------- */
            #middle-left{
                flex: 1;
                align-items: center;
                display: flex;
            }
                #lever{
                    rotate: 90deg;
                    accent-color: red;
                    scale: 5;
                }
/* ==================================================================================================================================== */
        #bottom{
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;
        }
            #bottom>div:first-child{
                font-weight: bolder;
                font-size: 700%;
            }
            #credit-count{
                width: 30%;
                height: 50%;
                border: solid 2px black;
                font-size: 700%;
                font-weight: bolder;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

            }    
/* ==================================================================================================================================== */
/* 

*/