:root{
    --fontDiner:'Fontdiner Swanky', cursive;
    --firaCode:'Fira Sans Condensed', sans-serif;
    --pressStart:'Press Start 2P', cursive;
}


*{
    padding:0px;
    margin:0px;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
}

#backgroundMain{
    background-color:rgb(249,38,114);
    position: fixed;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;

}
#playField{
    overflow: hidden;
    background-color:rgb(39,40,34);
    position: absolute;
    top: 10%;
    left: 5%;
    width:1240px;
    height:500px;

}
#overlay{
    position:absolute;
    z-index: -2;
    top:10%;
    left:5%;
    width: 1240px;
    height:500px;
    display:flex;
    justify-content: center;
    align-content:center;
    align-items:center;
    background-color:rgba(39,40,34, 0);
    overflow: hidden;

}
#alertBox{
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-content:center;
    align-items:center;
    width: 400px;
    height: 300px;
    background-color: rgb(249,38,114);
    border:1px;

}
#retryButton{
    font-family: var(--fontDiner);
    font-size: 30px;
    width:150px;
    height:55px;
    border:1px solid rgb(39,40,34);
    background-color: rgb(249,38,114);
}
#retryButton:hover{
    background-color: rgb(39,40,34);
    border:1px solid rgb(249,38,114);
    color:rgb(249,38,114);

}
#Head{
    position: absolute;
    z-index:3;
    top:20px;
    left:20px;
    width:20px;
    height:20px;
    border:1px solid rgb(39,40,34);
    background-color:rgb(126,226,46);
    /* z-index: 2; */
}
#Food{
    position: absolute;
    z-index: 1;
    top:100px;
    left:100px;
    width:20px;
    height:20px;
    /* border:2px solid blue; */
    background-color:rgb(225,79,93);
    /* box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75) */
}

#intro{
    overflow: hidden;
    position:absolute;
    z-index:5;
    top:10%;
    left:5%;
    width: 1240px;
    height:500px;
    display:flex;
    background-color:rgba(39,40,34, 0);

}

#introBox{
    font-family: firacode;
    font-size:16px;
    display:flex;
    width: 100%;
    height: 100%;
    background-color: rgba(39,40,34, 100);
    border:1px;
    border-radius: 20px;
    color: bisque;
}
#introCol1{
    font-family: var(--firaCode);
    flex:1;
    display:flex;
    border: 2px solid rgb(249,38,114);
    flex-direction: column;
    align-items: center;
    align-content:space-around;
    justify-content: space-around;
    padding:30px;
}
#introCol2{
    font-family:var(--firaCode);
    flex:1;
    display:flex;
    border: 2px solid rgb(249,38,114);
    flex-direction: column;
    align-content: space-around;
    align-items: center;
    justify-content: space-around;
    padding:30px;
}
#playyes{
    background-color:rgb(249,38,114);
    width: 150px;
    height:50px;
    border:5px solid black;
    border-radius: 2px;
    padding:2px;
}
#playno{
    padding:2px;
    background-color: rgb(249,38,114);
    width: 150px;
    height:50px;
    border:5px solid black;
    border-radius: 2px;
}
#scoreBoard{
    position: absolute;
    left:0%;
    top:2%;
    width:100%;
    height:25px;
    display:flex;
    justify-content: space-evenly
}
#score{
    font-family:var(--fontDiner);

}
#highScore{
    font-family:var(--fontDiner);
}
#credits{
    position:absolute;
    /* z-index :1; */
    top: 95%;
    left:0%;
    width: 100%;
    height: 30px;
    display:flex;
    justify-content: space-around;
}

#snakeGrowth{
    background: rgb(249,38,114);
    color: rgb(39,40,34);
    width:80px;
    height:25px;
    border: 1px solid rgb(39,40,34);
    text-align: center;
}
#snakeSpeed{
    background:rgb(249,38,114);
    color:rgb(39,40,34);
    width:80px;
    height:25px;
    border: 1px solid rgb(39,40,34);
    text-align: center;
}
.list{
    margin:10px;
}
#lost{
    font-family:var(--fontDiner);
    text-align: center;
}
#reason{
    font-family: var(--firaCode);
    text-align: center;
}
#achievement{
    font-family:var(--pressStart);
    text-align: center;
}
#presentScore{
    font-family: var(--pressStart);
    text-align: center;
}