html {
    position: relative;
    min-height: 100%;
  }
body {
/*    margin-top: 60px;
    margin-bottom: 60px; */
    overflow-x:hidden;
   background-color: rgb(0, 0, 0);
   background-image: linear-gradient(to bottom right, #02147e, #68e9fa);
  /* background-image: linear-gradient(to bottom right, #5c012b, #ff8ff0);
   background-image: linear-gradient(to bottom right, #30282c, #d1d1d1);
*/

}

main
{
    margin-bottom: 40px;
}

#modal-collection
{
    z-index: 500000;
}

#modal-backgrounds
{
    z-index: 500000;
}

.bgclicker {
    cursor:pointer;

}

.sticky-footer {
    height:40px;
    z-index: 100000;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: #000000EA;
}


.iconclickable
{
    cursor:pointer;
}

.semitransparent
{
    background-color: rgba(0, 0, 0, 0.5);
}
.fulltransparent
{
    background-color: rgba(0, 0, 0, 0);
}

.webtitle
{
    margin-left:-18px;
}


.clipboardCopy
{

        cursor:pointer;

}
/* Game board */

#audioONOFF {
    position:absolute;
    top:5px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor:pointer;
    z-index: 42;
    color:#FFF;


}
/*
#rarity
{
position: absolute;
bottom:10px;
right:25px;
width:150px;
height:100px;
z-index:42;
background-color: #00000099;

}
*/
.gamewrapper {
    position:relative;
    top:20px;
    height:798px;
    
}

.gameboard {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    background-image: url("../spins/slots.png");
    background-size: contain;
    width: 1300px;
    height: 798px;
}

.accountInfo {
    position:absolute;
    width: 250px;
    height: 130px;
    background-color:rgba(0, 0, 0, 0.6);
    z-index: 42;
    top: 10px;
    right: 10px;
    color: blanchedalmond;
    cursor: pointer;
    padding: 15px;
    text-align: left;
}

.accounthelper
{
padding:5px;
position: absolute;
width: 250px;
height: 130px;
top: 10px;
right:  270px;
display: none;    
text-align: end;
background-color:rgba(50, 0, 50, 0.9);
color: white;
z-index: 42;
font-size: 1.5em;
}

.close
{
    position: absolute;
    width: 15px;
    height: 15px;
    top: 5px;
    left: 5px;
    color:rgb(255, 255, 255);
    font-size: 15px;
    cursor: pointer;
}

.slotwrapper {
    position: absolute;
    top:284px;
    left:30px;
    padding-top: 62px; /* added for slot look */
    overflow-x: hidden,;
    overflow-y: hidden;
    width: 994px;
    height: 314px; 
    z-index: 1;
}

.slot
{
    list-style: none;
    width: 150px;
    height: 150px;
    padding: 0;
    margin: 0;
    position: relative;
    float: left;
}

#slot1
{
  position: absolute;
  top:60px;
  left:40px;  
}

#slot2
{
  position: absolute;
  top:60px;
  left:205px;  
}

#slot3
{
  position: absolute;
  top:60px;
  left:370px;  
}

#slot4
{
  position: absolute;
  top:60px;
  left:540px;  
}

#slot5
{
  position: absolute;
  top:60px;
  left:703px;  
}

#slot6
{
  position: absolute;
  top:60px;
  left:864px;  
}

/*
.slotwrapper ul {
 
}
*/
.slotwrapper ul li img {
    vertical-align: top;
    padding: 9px;
 /*   border: 4px solid rgb(92, 1, 54);*/
 /*   background-color: rgb(177, 177, 177);*/
    max-width:100%;
    max-height:100%;
    object-fit: contain;
}

.lock-button
{
border-color: rgba(0,0,0,0);
background-size: cover;
z-index:7;
width: 100px;
height: 48px;
overflow: hidden;
outline: none;
border:0;
background-color: rgba(0,0,0,0);
color:rgb(255, 255, 255);

}
.game-unlocked
{
    background-image: url("../spins/button_lock.png");
}


.game-locked{
    background-image: url("../spins/button_lock-locked.png");
}
.bet-button
{
    background-image: url("../spins/button_bet.png");
    border-color: rgba(0,0,0,0);
    background-size: cover;
    z-index:7;
    width: 130px;
    height: 48px;
    overflow: hidden;
    outline: none;
    border:0;
    background-color: rgba(0,0,0,0);
    color:rgb(255, 255, 255);
    }


.lock-button:hover {color: #F33}


.bet-button:hover {color: #500}



#btn-lock1
{
    position:absolute;
    top:630px;
    left: 100px;

}
#btn-lock2
{
    position:absolute;
    top:630px;
    left: 260px;

}

#btn-lock3
{
    position:absolute;
    top:630px;
    left: 420px;

}

#btn-lock4
{
    position:absolute;
    top:630px;
    left: 594px;

}

#btn-lock5
{
    position:absolute;
    top:630px;
    left: 760px;

}

#btn-lock6
{
    position:absolute;
    top:630px;
    left: 913px;
}

#btn-spin1
{
    position:absolute;
    top:708px;
    left: 250px;    
}

#btn-spin5
{
    position:absolute;
    top:708px;
    left: 500px;    
}

#btn-spin10
{
    position:absolute;
    top:708px;
    left: 750px;    
}

.results {

    top: 334px;
    left: 1075px;
    position: absolute;
    width: 170px;
    height: 207px;
    overflow: hidden;
    background-image: linear-gradient(to bottom right, #83c2fd, #022b5a);
    
}

#btn-mint{
    position: absolute;
    left: 1100px;
    top: 630px;
}


/* Login window */
.item-overlay {
    width: 100px;
    height: 100px;
    position: absolute;
    top: -50px;
    background-size: contain;
}
.item-overlay.login {
    background-image: url("../img/loginlogo.png");
    left: 200px;
}

.item-overlay.account {
    background-image: url("../img/accountlogo.png");
    left: 350px;
}

/* SFX canvas */
#canvas
{
    position:relative;
    z-index: 8;
    pointer-events: none;
    top: 0;
    left: 0;
    bottom: 0;
}

/* Navbar */
.navbar-toggler
{
    border:0px;
}

.navbar-toggler strong
{
    color: #FFF;
}


.showAccount
{
/*    margin-top: 5px;
    margin-right: 50px;
    float:left;*/
    color: blanchedalmond;
    cursor: pointer;
}

#myAccount
{
    color: blanchedalmond;
    cursor: pointer;
}

.networkChain
{
    margin-top: 5px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;; 
    float:right;
    background-color: #ff4400;
    color: rgb(255, 255, 255);
    border-radius: 5px;
}

.enableEthereumButton
{
    margin-top: 5px;
    float: right;   
}


/* Mint window */
.mint {
    width: 680px;
    height: 680px;
    position: relative;
    border: 4px solid rgb(0, 0, 0);
    background-image: linear-gradient(to bottom right, #9656ff, #1f0052);
    margin-left: 40px;
    overflow: hidden;
}

.stack {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.stack img{
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    /* object-fit: contain; */
    object-fit: cover;
}


@media screen and (max-width: 1400px) {
 
    .gamewrapper {
         height:685px; /* was 798 */
    }
    
    .gameboard {
        width: 1116px; /* was 1300 */
        height: 685px;
    }
    
    .slotwrapper {
        top:244px;
        left:26px;
        padding-top: 53px; 
        width: 853px;
        height: 270px; 
    }
    
    .slot
    {
        width: 129px;
        height: 129px;
    }
    
    #slot1
    {
      top:52px;
      left:34px;  
    }
    
    #slot2
    {
      top:52px;
      left:178px;  
    }
    
    #slot3
    {
      top:52px;
      left:318px;  
    }
    
    #slot4
    {
      top:52px;
      left:464px;  
    }
    
    #slot5
    {
      top:52px;
      left:603px;  
    }
    
    #slot6
    {
      top:52px;
      left:742px;  
    }
    
      .slotwrapper ul li img {
        padding: 8px;
         }
    
    .lock-button
    {
    width: 86px;
    height: 41px;
    
    }
    
    .bet-button
    {
        width: 112px;
        height: 41px;
    }
    
    #btn-lock1
    {
        top:541px;
        left: 86px;
        }
    #btn-lock2
    {
        top:541px;
        left: 223px;
        }
    
    #btn-lock3
    {
        top:541px;
        left: 361px;
        }
    
    #btn-lock4
    {
        top:541px;
        left: 510px;
        }
    
    #btn-lock5
    {
        top:541px;
        left: 652px;
        }
    
    #btn-lock6
    {
        top:541px;
        left: 784px;
    }
    
    #btn-spin1
    {
        top:608px;
        left: 215px;    
    }
    
    #btn-spin5
    {
        top:608px;
        left:429px;    
    }
    
    #btn-spin10
    {
        top:608px;
        left:644px;    
    }
    
    .results {
    
        top: 287px;
        left: 923px;
        width: 146px;
        height: 178px;
      }
    
    #btn-mint{
        left: 944px;
        top: 541px;
    }

}

@media screen and (max-width: 1200px) {
    .gamewrapper {
         height:575px; /* was 798 */
    }
    
    .gameboard {
        width: 937px; /* was 1300 */
        height: 575px;
    }
    
    .slotwrapper {
        top:205px;
        left:22px;
        padding-top: 44px; 
        width: 716px;
        height: 227px; 
    }
    
    .slot
    {
        width: 108px;
        height: 108px;
    }
    
    #slot1
    {
      top:44px;
      left:29px;  
    }
    
    #slot2
    {
      top:44px;
      left:150px;  
    }
    
    #slot3
    {
      top:44px;
      left:267px;  
    }
    
    #slot4
    {
      top:44px;
      left:390px;  
    }
    
    #slot5
    {
      top:44px;
      left:506px;  
    }
    
    #slot6
    {
      top:44px;
      left:623px;  
    }
    
      .slotwrapper ul li img {
        padding: 7px;
         }
    
    .lock-button
    {
    width:72px;
    height:34px;
    font-size:0.9em;
    
    }
    
    .bet-button
    {
        width:94px;
        height:34px;
        font-size:0.7em;
    }
    
    #btn-lock1
    {
        top:454px;
        left:72px;
        }
    #btn-lock2
    {
        top:454px;
        left:187px;
        }
    
    #btn-lock3
    {
        top:454px;
        left:303px;
        }
    
    #btn-lock4
    {
        top:454px;
        left:428px;
        }
    
    #btn-lock5
    {
        top:454px;
        left:547px;
        }
    
    #btn-lock6
    {
        top:454px;
        left:658px;
    }
    
    #btn-spin1
    {
        top:510px;
        left:181px;    
    }
    
    #btn-spin5
    {
        top:510px;
        left:360px;    
    }
    
    #btn-spin10
    {
        top:510px;
        left:541px;    
    }
    
    .results {
        top: 241px;
        left: 775px;
        width: 123px;
        height: 149px;
      }
    
    #btn-mint{
        left: 793px;
        top: 454px;
    }
}


@media screen and (max-width: 992px) {

    .mint {
        width: 400px;
        height: 400px;
    }
    
   .accountInfo {
        width: 150px;
        height: 100px;
        font-size: 0.6em;
    }

    .accounthelper
    {
    width: 150px;
    height: 100px;
    top: 10px;
    right:  180px;
    font-size: 0.8em;
    }
    
    .gamewrapper {
        height:429px; /* was 798 */
   }
   
   .gameboard {
       width: 698px; /* was 1300 */
       height: 429px;
   }
   
   .slotwrapper {
       top:153px;
       left:16px;
       padding-top: 33px; 
       width: 533px;
       height: 169px; 
   }
   
   .slot
   {
       width: 80px;
       height: 80px;
   }
   
   #slot1
   {
     top:33px;
     left:22px;  
   }
   
   #slot2
   {
     top:33px;
     left:113px;  
   }
   
   #slot3
   {
     top:33px;
     left:199px;  
   }
   
   #slot4
   {
     top:33px;
     left:291px;  
   }
   
   #slot5
   {
     top:33px;
     left:377px;  
   }
   
   #slot6
   {
     top:33px;
     left:464px;  
   }
   
     .slotwrapper ul li img {
       padding: 5px;
        }
   
   .lock-button
   {
   width:54px;
   height:25px;
   font-size:0.8em;
   
   }
   
   .bet-button
   {
       width:70px;
       height:25px;
       font-size:0.6em;
   }
   
   #btn-lock1
   {
       top:338px;
       left:54px;
       }
   #btn-lock2
   {
       top:338px;
       left:139px;
       }
   
   #btn-lock3
   {
       top:338px;
       left:226px;
       }
   
   #btn-lock4
   {
       top:338px;
       left:319px;
       }
   
   #btn-lock5
   {
       top:338px;
       left:407px;
       }
   
   #btn-lock6
   {
       top:338px;
       left:490px;
   }
   
   #btn-spin1
   {
       top:380px;
       left:135px;    
   }
   
   #btn-spin5
   {
       top:380px;
       left:268px;    
   }
   
   #btn-spin10
   {
       top:380px;
       left:403px;    
   }
   
   .results {
       top: 180px;
       left: 577px;
       width: 92px;
       height: 111px;
     }
   
   #btn-mint{
    top: 338px;
    left: 591px;
   }

}


@media screen and (max-width: 767px) {
    .gamewrapper {
        height:319px; /* was 798 */
   }
   
   .gameboard {
       width: 519px; /* was 1300 */
       height: 319px;
   }
   
   .slotwrapper {
       top:114px;
       left:12px;
       padding-top: 25px; 
       width: 396px;
       height: 126px; 
   }
   
   .slot
   {
       width: 59px;
       height: 59px;
   }
   
   #slot1
   {
     top:25px;
     left:16px;  
   }
   
   #slot2
   {
     top:25px;
     left:84px;  
   }
   
   #slot3
   {
     top:25px;
     left:148px;  
   }
   
   #slot4
   {
     top:25px;
     left:216px;  
   }
   
   #slot5
   {
     top:25px;
     left:280px;  
   }
   
   #slot6
   {
     top:25px;
     left:345px;  
   }
   
     .slotwrapper ul li img {
       padding: 4px;
        }
   
   .lock-button
   {
   width:40px;
   height:19px;
   font-size:0.7em;
   }
   
   .bet-button
   {
       width:70px;
       height:25px;
       font-size:0.6em;
   }

   #btn-lock1
   {
       top:251px;
       left:40px;
       }
   #btn-lock2
   {
       top:251px;
       left:103px;
       }
   
   #btn-lock3
   {
       top:251px;
       left:168px;
       }
   
   #btn-lock4
   {
       top:251px;
       left:237px;
       }
   
   #btn-lock5
   {
       top:251px;
       left:303px;
       }
   
   #btn-lock6
   {
       top:251px;
       left:364px;
   }
   
   #btn-spin1
   {
       top:283px;
       left:100px;    
   }
   
   #btn-spin5
   {
       top:283px;
       left:199px;    
   }
   
   #btn-spin10
   {
       top:283px;
       left:300px;    
   }
   
   .results {
       top: 134px;
       left:429px;
       width:68px;
       height:83px;
     }
   
   #btn-mint{
    top:251px;
    left:439px;
   } 

}
@media screen and (max-width: 640px) and (orientation: landscape) { 

}


@media screen and (max-width: 440px) and (orientation: portrait) { 



    .accountInfo {
        width: 100px;
        height: 80px;
        font-size: 0.4em;
    }


       .gamewrapper {
        height:209px; /* was 798 */
   }
   
   .gameboard {
       width: 340px; /* was 1300 */
       height: 209px;
   }
   /* stopped here */
   .slotwrapper {
       top:75px;
       left:8px;
       padding-top: 16px; 
       width: 259px;
       height: 83px; 
   }
   
   .slot
   {
       width: 39px;
       height: 39px;
   }
   
   #slot1
   {
     top:16px;
     left:10px;  
   }
   
   #slot2
   {
     top:16px;
     left:54px;  
   }
   
   #slot3
   {
     top:16px;
     left:97px;  
   }
   
   #slot4
   {
     top:16px;
     left:142px;  
   }
   
   #slot5
   {
     top:16px;
     left:183px;  
   }
   
   #slot6
   {
     top:16px;
     left:226px;  
   }
   
     .slotwrapper ul li img {
       padding: 3px;
        }
   
   .lock-button
   {
   width:26px;
   height:12px;
   font-size:0.4em;
   }
   
   .bet-button
   {
       width:53px;
       height:19px;
       font-size:0.4em;
   }
   
   #btn-lock1
   {
       top:164px;
       left:26px;
       }
   #btn-lock2
   {
       top:164px;
       left:67px;
       }
   
   #btn-lock3
   {
       top:164px;
       left:110px;
       }
   
   #btn-lock4
   {
       top:164px;
       left:155px;
       }
   
   #btn-lock5
   {
       top:164px;
       left:198px;
       }
   
   #btn-lock6
   {
       top:164px;
       left:238px;
   }
   
   #btn-spin1
   {
       top:185px;
       left:66px;    
   }
   
   #btn-spin5
   {
       top:185px;
       left:130px;    
   }
   
   #btn-spin10
   {
       top:185px;
       left:197px;    
   }
   
   .results {
       top: 88px;
       left:281px;
       width:45px;
       height:54px;
     }
   
   #btn-mint{
    top:164px;
    left:288px;
   } 

}