*{
    color:#424874;
}
.col-4,.col-12{
    text-align: center;
}
.instructions{
    position: relative;
}
.rules li{text-align: left;}
.fas{
    color:rgb(119, 1, 1);
    font-size: 32pt;
}
.instructions .fas{
    font-size: 16pt;
}
.fas:hover{
    color:rgb(243, 16, 16);
}
.btn{
    margin-bottom: 10px;;
}
.rules{display: none;
position: absolute;
top: calc(100% +10px);
left: 35%;
background-color: #f4eeff ;
border:1px solid #424874;
border-radius:20px ;
padding: 10px;
z-index: 3;}
.btn:hover +.rules{
    display: block;
}


#userDisplay{
    cursor: pointer;}
.selector,.selection{
    align-items: center;
    background-color: #f4eeff;
    
}
.selector{
    border-bottom: 2px solid #424874;
}
header{
    padding: 20px 0;
    background-color:#dcd6f7;
    align-items: center;
    border-bottom: 2px solid #424874;
}
.right{
padding-right: 2px;
}
.left{
padding-left: 2px;
}
.center{
    padding:0;
}
.selector img, .selection img{
 max-width: 100%;
 max-height: 24vh;
}
header img{
    max-height: 12vh;
}

.score{
    background-color:#f4eeff;
    border-top: 1px solid #424874;
}
footer{
    background-color: #424874;

} 
footer p{
    margin: 0;
    color: wheat;
}
@media only screen and (max-width:400px){
    h1{
        font-size:23pt;
        text-align: center;
    }
    .container{
        padding:0;
    }
}