body {
    background: linear-gradient(120deg, #33436b, #547999);
    background-attachment:fixed;
    margin:0px;
    padding:0px;
}

hr {
    width:90%;
    height:0.5vh;
    background:white;
    border-width:0px;
    
    margin-bottom:100px;
}

.title {
    width:100%;
    color:white;
    text-align:center;
    font-size:50px;
    font-family: 'Trebuchet MS';
}

.subTitle {
    width:100%;
    color:white;
    text-align:center;
    font-size:20px;
    font-family: 'Trebuchet MS';
    margin:0px;
}

.choices {
    
    margin-left:5%;
    
    padding:5px;
    
    width:20%;

    border: 3px solid white;
    border-radius:3%;
    background:rgba(0,0,0,0.2);
    
    float:left;
    
}

button {
    width:100%;
    height:14vh;
    
    border-width: 0px;
    border-radius:4%;
    background:rgba(255,255,255,0.1);
    
    font-size:25px;
    
    background-size:contain;
    background-repeat: no-repeat;
    
    margin-bottom:2.5px;
    margin-top:2.5px;
    
    vertical-align: text-bottom;
    
    transition: all .5s;

}

button:hover {
    width:110%;
    background:rgba(0,0,0,0.1);
    background-size:contain;
    background-repeat:no-repeat;
}

p {
    margin-left:25%;
    width:100%;
    height:4vh;
    color:white;
    font-family: 'Courier New';
    text-align:center;
}

.choicesContainer {
    width: 62.5%;
    height: 30vh;
    float:left;
    margin-left:5%;
    
    border: 3px solid white;
    border-radius: 4%;
}

.choiceDisplay {
    width:40%;
    height:100%;
    background:rgba(0,0,0,0.1);
    transition: .5s all;
}

.choiceDisplay img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.enlarge {
    transform: scale(1.1);
    background: rgba(0,0,0,0.3);
}

.win {
    transform: scale(1.1);
    background: rgba(0,255,0,0.3);
}

.lose {
    transform: scale(0.9);
    background: rgba(255,0,0,0.3);
}

.versus {
    width:20%;
    height:100%;
    object-fit:contain;
    transition: all .5s;
}

.result {
    background:rgba(0,0,0,0.1);
    width:62.5%;
    
    margin-left:5%;
    margin-top:5%;
    
    float:left;
    height:10vh;
    
    border:3px solid white;
    border-radius: 5%;
    
    padding:0px;
    
}

.result p {
    
    width:100%;
    
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 25px;
    
    color:white;
    font-size:40px;
    
    font-family: Arial;
    
    text-align:center;
    
}

figcaption {
    color:white;
    text-align:center;
    font-family:Trebuchet;
    font-size:35px;
}

table {
    background:rgba(0,0,0,0.1);
    width:30%;
    float:left;
    height:15vh;
    margin-left:5%;
    margin-top:5%;
    
    border: 3px solid white;
    border-radius: 5%;
}

th {
    color:white;
    text-align:center;
    width:50%;
    font-size:30px;
    font-family: Arial;
}

td {
    color:white;
    text-align:center;
    width:50%;
    font-size:45px;
    font-family: Courier;
}

.lost {
    background:black;
    color:red;
    text-align:center;
    width:100%;
    font-size:100px;
    font-family: Courier;
    margin:0px;
}

.lost a {
    color:red;
}

.won {
    background:#2ebf72;
    color:white;
    width:100%;
    text-align:Center;
    font-size:100px;
    font-family:Courier;
    margin:0px;
}

.won a {
    color:white;
}