html {
    background-image: url("../img/vegas3024.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-color: #333;
}
body {
    margin-top: 20px;
    margin-bottom: 20px;
}
.timer {
    background-color: black;
    color: red;
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    padding: 10px;
    margin: 10px;
    border: 1px solid red;
    text-align: center;
    width: 160px;
    display: inline-block;
}
#gameplayviewer {
    display: none;
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
    border-radius: 10px;
    background-color: white;
    background-image: url(../img/game-background-casino.jpg);
    background-repeat: no-repeat;
    background-position:right;
    background-size: contain;
    color: black;
    padding: 10px;
    border: 1px solid #666;
    z-index: 1000;
    position: absolute;
}
#gameplayviewer-playerportrait {
    display: none;
    border-radius: 10px;
    background-color: white;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 200px;
    height: 200px;
    top: 10px;
    left: 10px;
    border: solid 4px #333;
}
#gameplayviewer-playerinfo{
    display: none;
    position: absolute;
    top: 230px;
    left: 10px;
    text-align: left;
    width: 200px;
    height: 140px;
    padding: 10px;
    border-radius: 10px;
    border: solid 4px #333;
    background-color: #efefef;
}
#gameplayviewer-playertimer {
    display: none;
    position: absolute;
    top: 400px;
    left: 10px;
    text-align: center;
}
#gameplayviewer-puzzlecount{
    display: none;
    position: absolute;
    top: 550px;
    left: 10px;
    text-align: left;
}
#gameplayviewer-trigger-game1{
    display: none;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 80px); 
    text-align: center;
    width: 100px;
    height: 100px;
    opacity: 0.85;
    z-index: 1001;
}
#gameplayviewer-trigger-game2{
    display: none;
    position: relative;
    top: calc(50% - 50px);
    left: calc(50% - 250px); 
    text-align: center;
    width: 100px;
    height: 100px;
    opacity: 0.85;
    z-index: 1001;
}
#gameplayviewer-trigger-game3{
    display: none;
    position: relative;
    top: calc(50% - 250px);
    left: calc(50% + 250px); 
    text-align: center;
    width: 100px;
    height: 100px;
    opacity: 0.85;
    z-index: 1001;
}
#gameplayviewer-trigger-game4{
    display: none;
    position: relative;
    top: calc(50% + 25px);
    left: calc(50% + 350px); 
    text-align: center;
    width: 100px;
    height: 100px;
    opacity: 0.85;
    z-index: 1001;
}
#gameplayviewer-trigger-game5{
    display: none;
    position: relative;
    top: calc(50% -10px);
    left: calc(50% - 100px); 
    text-align: center;
    width: 100px;
    height: 100px;
    opacity: 0.85;
    z-index: 1001;
}
#gameplayviewer-trigger-cf9 {
    display: block;
    position: absolute;
    top: 500px;
    left: calc(50% + 480px);
    text-align: center;
    width: 20px;
    height: 20px;
    opacity: 0;
    z-index: 1001;
}
.game-screen-codepreview-terminal {
    color: black;
    padding: 5px; 
    font-size: 13px; 
    font-family: verdana; 
    height: calc(100% - 30px); 
    background-color: rgba(255,255,255,.5); 
    border-left: solid 1px black; 
    border-right: solid 1px black; 
    border-bottom: solid 1px black;
    overflow-y: scroll; 
    overflow-x: scroll;
}
.game-screen-codepreview-terminal-header {
    height: 30px; 
    background-color: #333; 
    border: solid 1px black; 
    padding-left: 10px;
    padding-bottom: 5px; 
    color: white;
}
.game-screen-codepreview-screen{
    padding: 10px; 
    background: radial-gradient(ellipse at center, #bfd255 0%,#8eb92a 53%,#8eb92a 53%,#8eb92a 53%,#72aa00 87%,#72aa00 100%,#9ecb2d 100%); 
    border: solid 2px #333; 
    overflow: hidden; 
    margin: 20px; 
    border-radius: 25px; 
    height: calc(100% - 40px);
}
.game-screen-codepreview-border{
    overflow: hidden;
    background: linear-gradient(135deg, #0e0e0e 0%,#7d7e7d 100%); 
    border-radius: 10px; 
    width: calc(100% - 40px); 
    height: calc(100% - 40px); 
    margin: 20px;
}
.game-screen-codepreview-border-container{
    border-radius: 20px; 
    height: 410px; 
    overflow:hidden; 
    background: linear-gradient(135deg, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
}
.game-screen-coderun-terminal {
    color: black;
    padding: 5px; 
    font-size: 13px; 
    font-family: verdana; 
    height: calc(100% - 30px); 
    background-color: rgba(255,255,255,.5); 
    border-left: solid 1px black; 
    border-right: solid 1px black; 
    border-bottom: solid 1px black;
    overflow-y: scroll; 
    overflow-x: scroll;
}
.game-screen-codepreview-terminal-header{
    height: 30px; 
    background-color: #333; 
    border: solid 1px black; 
    padding-left: 10px;
    padding-bottom: 5px; 
    color: white;
}
.game-screen-coderun-screen{
    padding: 10px; 
    background: radial-gradient(ellipse at center, #b7deed 0%,#71ceef 60%,#21b4e2 99%,#b7deed 100%); 
    border: solid 2px #333; 
    overflow: hidden; 
    margin: 20px; 
    border-radius: 25px; 
    height: calc(100% - 40px);
}
.game-screen-coderun-border{
    overflow: hidden;
    background: linear-gradient(135deg, #0e0e0e 0%,#7d7e7d 100%); 
    border-radius: 10px; 
    width: calc(100% - 40px); 
    height: calc(100% - 40px); 
    margin: 20px;
}
.game-screen-code-shadow{
    opacity: .2; 
    height: 30px; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 29%,rgba(0,0,0,0.65) 41%,rgba(0,0,0,0) 100%); 
    border-top-left-radius: 40px; 
    border-top-right-radius: 40px;
}
.game-screen-coderun-border-container {
    border-radius: 20px; 
    height: 410px; 
    overflow:hidden; 
    background: linear-gradient(135deg, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
}
#gameboard{
    display: none;
    position: absolute;
    top: 10px;
    left: 220px;
    right: 10px;
    bottom: 10px;
    border-radius: 10px;
     
    /*background-color: Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefefe+0,d1d1d1+49,dbdbdb+50,e2e2e2+100 */
    background: linear-gradient(to bottom,  #fefefe 0%,#d1d1d1 49%,#dbdbdb 50%,#e2e2e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    color: black;
    padding: 10px;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 1002;
}
#gameboard-close {    
    width: 100%;
    text-align: right;
}
#fade {
    opacity: 1;
    transition: opacity linear 0.8s 0s;
  }
  
  #fade.fadeout {
    opacity: 0;
    transition: opacity linear 0.8s 0s;
  }
  .is-primary {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b8e1fc+0,a9d2f3+10,90bae4+25,90bcea+37,90bff0+50,6ba8e5+51,a2daf5+83,bdf3fd+100;Blue+Gloss+%231 */
background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: solid 1px #666;
  }
  .is-danger {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,fd89d7+51,ff7cd8+100;Pink+Gloss+%232 */
background: linear-gradient(to bottom,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: solid 1px #666;
  }
  .is-info {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
background: linear-gradient(to bottom,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: solid 1px #666;
  }
  .is-warning {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6f0a3+0,d2e638+50,c3d825+51,dbf043+100;Green+Gloss+%232 */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: solid 1px #666;
  }
  .is-success {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bfd255+0,8eb92a+50,72aa00+51,9ecb2d+100;Green+Gloss */
background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  }