.create-game{
    background-image: url(../assets/images/backgroundphoto.jpg);
    background-size: cover;
    background-attachment: fixed;
}
.game-page{
    animation: change 10s infinite;
}
@keyframes change{
    0%{background-color: #1abc9c;}
    25%{background-color: #2ecc71;}
    50%{background-color: #3498db;}
    75%{background-color: #9b59b6;}
    100%{background-color: #e74c3c;}
}
.content{
    background: rgba(0,0,0,0.5);
    width: 50%;
    padding: 40px;
    margin: 100px auto;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 500px;
}
p{
    font-size: 25px;
    color: white;
}
#highscores{
    background-color: hotpink;
}
#discord{
    background-color: #00cc96;
}
#title{
    text-align: center;
}
.field-1,
.field-2,
.field-3,
#startBtn{
    display: flex;
    justify-content: center;
    align-items: center;
}

#timer{
    visibility: hidden;
    float: right;
    font-weight: bold;
    margin: 20px 50px;
}

/* title of website  */
p{
    color: black;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    text-shadow: -3px 0 hotpink, 0 3px hotpink, 3px 0 hotpink, 0 -3px hotpink; 
    font-size: xx-large;
}
/* .startBtn{
    
}
.center-card{
    
} */

#questions{
    color:white;
}

#questions h1{
    color:white;
}
.high-score-list{
    background-color: clear;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 100px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: 40px;
    color: hotpink;
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
}

.new-game-btn{
    margin-top: 15px;
    
}

.high-score-1{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(211, 39, 39);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-2{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(61, 16, 38);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-3{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(207, 125, 2);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-4{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(236, 240, 8);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-5{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(15, 114, 6);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-6{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(216, 226, 226);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-7{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(23, 184, 233);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-8{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(228, 3, 3);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-9{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:rgb(91, 82, 223);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.high-score-10{
    background-color: ;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 25px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-weight: bolder;
    font-size: x-large;
    color:greenyellow;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
.game-over{
    color: black !important;
    font-family: 'Press Start 2P', cursive !important;
    font-weight: bolder;
    text-shadow: -3px 0 hotpink, 0 3px hotpink, 3px 0 hotpink, 0 -3px hotpink !important; 
};