/* Dark mode */
:root{--bg:#111;--box:#222;--thbBox:#222;--btnBG:#222}

/* Dark Light */
/* :root{--bg:#222;--box:#fff;--thbBox:#444;--btnBG:#222} */

/* Light mode */
/* :root{--bg:#ddd;--box:#fff;--thbBox:#bbb;--btnBG:#222} */


html {font-size: 16px;}

body{padding:0;margin:0;overflow: hidden;font-family: 'Arial', serif; -webkit-font-smoothing: antialiased;color:#000;background:var(--bg);}
			
#highResCanvas {display:none;}
#qrcode{margin:2rem;}

#cols{position:absolute;left:1rem;top:1rem;bottom:1rem;right:1rem;display:flex;flex-direction:row;align-items:stretch;}
#colR{width:15rem;display:flex;flex-direction:column;}





/* thumbs */
#thbsContainer{flex-grow:1;position:relative;}
#thbsScroll{overflow-y: auto;overflow-x: hidden;position:absolute;left:.5rem;top:0;bottom:.5rem;right:0;line-height:1;font-size:0;}
.thbCell{margin:.25rem;background:var(--thbBox);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;overflow: hidden;cursor:pointer;vertical-align: top;width:100px; height:100px;}
#thbCover{position:absolute;left:0;top:0;bottom:0;right:0;background:transparent;}

/* button container */
#btnContainer{background:var(--box);border-bottom-right-radius:1rem;border-top-right-radius:1rem;padding:2rem;display:flex;flex-direction:column;gap:2rem;position:relative;}
#wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-grow:1;background:var(--box);border-radius:1rem;border-bottom-right-radius:0;position:relative;}
.btnRow{display:flex;justify-content:space-between;gap:.9rem;flex-direction:column;}

/* buttons */
.iconBtn{background-color: var(--btnBG);border:0.3rem solid #000;flex-grow:1;border-radius:1rem;box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.3);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;}
/* .iconBtn:hover{background:#333;} */
.collect{height:4rem;}
.regen{height:3rem;padding-top:3rem;background: var(--btnBG) url(../img/regenW.png) no-repeat 50% 21%;background-size: 2rem;}
.btnLabel{color:#999; font-size:0.8rem;text-align:center;}
#btnCover{position:absolute;left:1rem;top:1rem;bottom:1rem;right:1rem;background:var(--box);opacity:.7;}


/* iframe */
/* box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.3);  */
#iframeContainer{border:none;z-index:2;}
#loaderCont{position:absolute;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:1;flex-direction:column;gap:1rem;}
#loader { border:0.2rem solid #aaa; border-radius:50%; border-top:0.2rem solid #fff; width:15vh; height:15vh; animation:spinner 4s linear infinite;box-sizing: border-box; }
#loaderText { text-align:center;font-size: 1rem;color:#999; }
@keyframes spinner { 0% {  transform:rotate(0deg);  }100% {  transform:rotate(360deg);  } }


/* Black out */
#blackOut{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);display:none;z-index:10;flex-direction:row;align-items:center;justify-content:center;padding:3rem;}
.blackoutOptions{display:flex;flex-direction:row;align-items:center;justify-content:center;}
#msg{color:#fff;font-size:2rem;line-height:2rem;}
#captureEmail{flex-direction:column;gap:0.5rem;color:#fff;align-items:center;justify-content:center;font-size:2rem;}
input{font-size:2rem;width:60vw;padding:1rem 2rem;border:0.3rem solid #fff;background:#444;border-radius:1rem;margin:1rem;display:inline-block;color:#fff;}
.proceedToMint{padding:1rem 2rem;font-size:2rem;border:0.3rem solid #444;margin-top:1rem;}
.note{font-size:1rem;}