.content-container {
    padding-bottom: 0;
}

.top-text {
    color: white;
    margin-top: 0px;
    text-align: center;
}

.opponent-container {
    border-top: 1px #cccccc solid;
    border-right: 1px #888888 solid;
    border-bottom: 1px #888888 solid;
    border-left: 1px #cccccc solid;
    border-radius: 9px;
    box-shadow: 4px 4px 4px rgba(0,0,0,.25);
    color: #444444;
    display: grid;
    font-size: 0px;
    grid-template-columns: 89px 1fr 116px;
    margin: 8px 0;
    padding: 10px;
    text-decoration: none;
}

.opponent-container:hover .avatar {
    opacity: .75;
}
.opponent-container:hover .ai-info-container {
    background-color: rgba(255, 255, 255, .95);
    color: black;
}
.opponent-container:hover .current-month-top-score {
    background-color: rgba(255, 255, 255, .75);
}

    .opponent-container section {
        font-size: 16px;
        vertical-align: top;
    }

    .opponent-container .ai-avatar-container {
        border-left: 0px #cccccc solid;
    }
        .ai-avatar {
            background-position: center center;
            height: 100px;
            opacity: .5;
        }
    
    .opponent-container .ai-info-container {
        background-color: rgba(255, 255, 255, .80);
        border-right: 1px #cccccc solid;
        border-left: 1px #cccccc solid;
        padding: 10px;
    }
        .name {
            font-weight: bold;
        }
    
    .opponent-container .current-month-top-score {
        background-color: rgba(255, 255, 255, .5);
        padding-top: 15px;
        text-align: center;
    }
    
        .current-month-top-score .title { font-weight: bold; }
            .current-month-top-score .full-month { display: inline; }
            .current-month-top-score .short-month { display: none; }
        .current-month-top-score .player { }
        .current-month-top-score .margin { }



@media all and (max-width: 600px) {
    body > section {
        padding-bottom: 0;
    }
        .content-container {
            padding: 20px 20px 20px 20px;
        }
            .opponent-container {
                grid-template-columns: 116px 1fr;
                grid-template-rows: 1fr 28px;
                width: 100%;
            }
                .opponent-container .ai-avatar-container {
                    grid-row: span 2;
                }
                    .ai-avatar {
                        height: 130px;
                    }
                .opponent-container .ai-info-container {
                    padding-bottom: 5px;
                }            
                .opponent-container .current-month-top-score {
                    padding: 3px 10px;
                    text-align: right;
                    width: 100%;
                }
                    .current-month-top-score .title {
                        display: inline;
                        float: left;
                        margin-right: 5px;
                    }
                        .current-month-top-score .full-month { display: none; }
                        .current-month-top-score .short-month { display: inline; }
                    .current-month-top-score .player {
                        display: inline;
                        margin-right: 3px;
                    }
                    .current-month-top-score .margin {
                        display: inline;
                    }
}