body{
    font-family:Arial, Helvetica, sans-serif;
}

h1{
    text-align: center;
}

#input, #output{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}

#input div, #result div{
    padding:20px;
    margin:20px;
}

#input div h2, #output div h2{
    margin-top:0;
    text-align: center;
}

.attackerBox{
    border: 1px red solid;
    background-image: linear-gradient(to bottom, pink, white);
}

.defenderBox{
    border: 1px blue solid;
    background-image: linear-gradient(to bottom, rgb(149, 149, 255), white);
}

td{
    min-width:150px;
    text-align: right;
}

td:nth-child(2) {
    text-align: left;
}

#execute, #options{
    text-align: center;
}

#execute input{
    font-size:24px;
    padding:10px 20px;
    margin:20px;
}

#result .victoryTotal{
    font-weight: bold;
    padding:0 0 20px;
    margin:0;
    text-align:center;
}

#result .victoryPercent{
    font-size:100px;
    padding:0;
    margin:0;
}