elm.css

* {
    box-sizing: border-box;
}

h1 {
    font-size: 40pt;
    color : #FF5794;
}

body {
    margin : auto;
    background: #242424;
    color : #F9F5DD;
    font-family : Arial;
    text-align : center;
    font-size: 12pt;
}

.button-class {
    background-color : #B2E64C;
    border : 2px solid #B2E64C;
    border-radius : 5px;
    padding : 5px;
    margin : 10px;
    font-size: 20pt;
    transition: box-shadow 0.1s;
}
.button-class:hover {
    box-shadow: 0 0px 20px 0 rgba(255, 255, 255, 0.5), 0 0px 25px 0 rgba(255, 255, 255, 0.4);
}

.row {
    width : 100%;
    height : 500px;
}

.col {
    align: center;
    padding: 10px;
    float : left;
    width : 50%;
    height: 100%;
    display : block;
    padding : 10px;
}

.col img {
    padding : 15px;
    border : 1px solid #B2E64C;
    border-radius: 5px;
    background-color : #B2E64C;
    max-width : 100%;
    max-height : 100%;
}

.col::after {
    content : "";
    clear : both;
    display: table;
}

.row::after {
    content : "";
    clear: both;
    display : table;
}


.infobar {
    color : #66CEE1;
    padding : 5px;
}    

ol.done {
    display: table;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    width: 80%;
    list-style: none;
    counter-reset : rating;
}

ol.done li img {
    float : right;
    width : 120px;
    height: 120px;
}

ol.done li {
    text-shadow: 2px 2px 5px #000000;
    width: 100%;
    font-size: 20pt;
    counter-increment : rating;
    background-color: #66CEE1;
    border : 1px solid #66CEE1;
    border-radius: 5px;
    margin: 10px;
    padding : 10px;
}

ol.done li::before {
    
    float: left;
    content : counter(rating);
    font-size : 40pt;
}

ol.done li::after {
    content: "";
    clear: both;
    display: table;
}

.choices-area {
    text-align : center;
}

button.main {
    position: absolute;
    top:50%;
    left:50%;
    margin: 0 auto;
    transform: translate(-50%,-50%);
}