body{
    background-color:#D3D3FF;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align:center;
    margin:0px;
    color:white;
}

audio{
    position:absolute;
    z-index:1002;
    left:0px;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

#mainDiv{
    height:100vh;
    background-image: url('images/dreidelMess.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#mainDivOpacity{
    position:absolute;
    width:70%;
    height:100vh;
    left:50%;
    transform: translateX(-50%);
    background-color:black;
    opacity:.6;
    z-index:1;
}

#mainDivInner{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:70%;
    height:100vh;
    margin:0px auto;
    opacity:1;
    z-index:1000; 
    border-right: 1px solid black;
    border-left: 1px solid black;
}

#logo{
    font-family: cursive;
    font-size:50px;
    /*margin:0px 0px 20px 0px;*/
    margin:0px;
    padding:20px;
    color:white;
}

/*#logo span{
    display:none;
}*/

#nav div{
    display:inline-block;
    color:white;
    background-color:#30396A;
    border:5px solid #2B1F5F;
    /*border-radius:5px;*/
    width:33.33%;
    padding:5px 0px;
    margin:0px -3px;
    box-sizing:border-box;
    cursor:pointer;
}

#nav div:hover{
    background-color:#2B1F5F;
}

#potDiv{
    border:1px solid white;
    border-radius:10px;
    background-color:#2B1F5F;
    color:white;
}

#gameInfo {
    margin-top:20px;
}

#gameInfo div{
    padding:25px;
    width:25%;
    display: inline-block;
    margin:5px;
}

#turnInfoDiv{
    font-size:15px;
    line-height: 18px;
    margin:0px;
    padding:0px !important;
    /*width:30%;*/
}

/*#boardStart h3{
    margin-top:0px;
}*/

#dreidelStage{
    width:150px;
    height:150px;
    position:relative;
    margin:0px auto;
}

#dreidelStage img{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#player1,#player2,#player3,#player4{
    display:inline-block;
    border:1px solid white;
    min-width:22%;
    padding:20px 0px;
    border-radius: 10px;
}

#playerBoard h2{
    margin:0px;
}

#spinner1,#spinner2{
    width:200px;
    padding:10px;
    font-size:20px;
    background-color:#2B1F5F;
    color:white;
    cursor: pointer;
}

#spinner1{
    border-top-left-radius: 30px;
    border-bottom-left-radius:30px;
    margin-right:-3px;
}

#spinner2{
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-left:-3px;
}

#spinner1:hover,#spinner2:hover{
    color:gray;
}

#stopper{
    border-radius: 30px;
    width:300px;
    padding:10px;
    font-size:20px;
    background-color:#2B1F5F;
    color:white;
    cursor: pointer;
}

#stopper{
    color:gray;
}


#spined1,#spined2,#spined3,#spined4,#spined5,#stopper,#newBoard,#ruleBoard,#historyBoard,.dreidel,
#input1div,#input2div,#input3div,#input4div,#form2,#player3,#player4,#player1lost,#player2lost,
#player3lost,#player4lost,#developerBoard,#winnerBoard,#musicBoard{
    display:none;
}

#gimel{
    display:inline;
}

.playersTurn{
    background-color:#D7F757;
    color:black;
}


#modular{
    display:none;
    width:100%;
    height:100vh;
    opacity:.6;
    background-color:black;
    position:fixed;
    top:0px;
    left:0px;
    z-index:2000;
}

#newBoard, #ruleBoard, #historyBoard,#developerBoard,#winnerBoard,#musicBoard{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:50%;
    height:75%;
    background-color:white;
    border:3px solid #2B1F5F;
    color:#2B1F5F;
    border-radius:10px;
    padding:50px; 
    z-index:2001;
    overflow-y: hidden;  
    text-align:justify; 
}

#newBoard{
    text-align:center;
}

#xCancel{
    position:absolute;
    top:0px;
    right:10px;
    font-size:30px;
    color:lightgray;
    cursor:pointer;
}

.buttons{
    position:absolute;
    text-align:center;
    bottom:20px;
    left:50%;
    transform: translateX(-50%);
    width:100%;
}

#form2 h2{
    margin:0px;
}

#form1,#form2{
    color:blue;
}

#form1 input, #form1 label{
    font-size:25px;
    padding:10px;
}

#form2 input, #form2 label{
    font-size:20px;
    padding:10px;
    margin:10px;
}

 #form2 input{
    border:1px solid blue;
    border-radius:10px;
 }

#form1 button,#form2 button{
    margin:0px 25px;
    background-color:white;
    width:250px;
    padding:10px;
    font-size:25px;
    cursor:pointer;
    color:blue;
}

 #ruleBoard{
    text-align:left;
 }

 #winnerBoard{
     text-align:center;
 }

 .cancelBut{
     display:inline-block;
     text-align:center;
     min-width:25%;
     padding:5px;
     border: 1px solid #30396A;
     background-color:#30396A;
     border-radius:10px;
     cursor:pointer;
     color:white;
 }

.cancelBut:hover{
    border: 1px solid white;
}

 #donuts{
     border-top:5px double gray;
     border-bottom:5px double gray;
     background-color:#2B1F5F;
     font-size:20px;
     padding: 50px 0px;
     color:white;
     letter-spacing: 1px;
     word-spacing: 5px;
     font-weight:bold;
 }

 
 #foot{
     padding:50px 0px;
     text-align:center;
     color:#2B1F5F;
     /*background-image: url("images/donuts.png");
     background-repeat: no-repeat;
     background-size: cover;*/
     background-color:black;
     /*border-top:10px solid #2B1F5F;*/
     border-bottom:10px solid #2B1F5F;
 }

 #foot a{
     color:#2B1F5F;
     text-decoration: none;
 }

 #foot a:hover{
     color:gray;
 }

@media screen and (max-width: 1050px){
    #mainDivOpacity,#mainDivInner{
        width:80%;
    }
}



@media screen and (max-width: 700px){
    audio{
        display:none;
    }
    
    #mainDivInner{
        width:100%;
    }

    #mainDivOpacity{
        width:100%;
        opacity:.5;
    }

    #mainDiv,#mainDivOpacity,#mainDivInner{
        min-height:110vh;
    }

    #logo{
        font-size:20px;
        border-bottom:1px solid #2B1F5F;
    }

    /*#logo span{
        display:inline-block;
        margin-right:25px;
        font-size:10px;
        background-color:#2B1F5F;
    }*/

    /*#nav{
        display:none;
    }*/

    #nav div{
        font-size:10px;
    }

    #gameInfo{
        margin-top:0px;
    }
    

    #gameInfo div{
        /*border:1px solid white;*/
        display:block;
        width:95%;
        padding:5px;
        margin:0px auto;
        font-size:10px;
    }

    #gameInfo h3{
        margin:0px;
    }

    #potDiv{
        font-size: 15px;
    }

    #newBoard, #ruleBoard, #historyBoard,#developerBoard,#winnerBoard{
        width:90%;
        height:60%;
        padding:5px; 
        border-radius: 0px;
        overflow-y: scroll;  
        text-align:center; 
    }

    .buttons{
        position:relative;
        text-align:center;
        bottom:0px;
        /*left:50%;
        transform: translateX(-50%);*/
        width:100%;
    }

    #player1,#player2,#player3,#player4{
        padding:5px 0px;
    }

    #playerBoard h2{
        font-size:15px;
    }

    #playerBoard{
        font-size:10px;
    }

    #spinner1,#spinner2{
        width:40%;
        font-size:10px;
    }

    #donuts{
        font-size: 10px;
        word-spacing:1px;
    }

    #foot{
        font-size:10px;
    }


}