.review {
    font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 10pt; 
}

/* container */
div.review.container {
    background-color: #282C34;
    color: white;
    margin-bottom: 5px;
    margin-top: 5px;
    border-top: 3px solid #485555;
    padding: 10px;
}
div.review.info { /* single game */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 10px;
}
div.review.multi { /* multiple games */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10px;
}
div.review.infocolumn.multinames {
    grid-column: 1 / 3; /* colspan 2 */
}
div.review.infocolumn.dates {
    text-align: right;
}
div.review.tooltip {
    display: none;
    position: absolute;
    z-index: 2;
    background-color: #282C34;
    box-shadow: 2px 2px 5px black;
    padding: 10px;
}
img.review.icon:hover + div.review.tooltip {
    display: block;
}
img.review.icon:hover {
    box-shadow: 0px -5px 0px #CBF2F0;
}
div.review.text {
    margin-top: 10px;
    padding: 10px;
    background-image: linear-gradient(#485555, #282C34);
}
p.review.gameinfo {
    margin: 2px; /* reduce p margins */
}
span.review.gametitle {
    font-weight: bold;
    font-size: 12pt;
}
.blue {
    color:#CBF2F0;
}

/* review text formatting */
.review.content { 
    text-align: justify;
}
.review.content a:link, .review.content a:visited {
    color:#CBF2F0;
}
.review.content a:hover {
    text-decoration: none;
}
.review.title { 
    font-size: 14pt;
}
.review.section_title { 
    font-size: 12pt;
}
.review.title, .review.section_title {
    font-weight: bold;
    text-align: left;
}
.review.spoiler { 
    filter: blur(5px);
 }
.review.spoiler:hover {
    filter: blur(0); 
}
.review.video {
	text-align: center;
}
ul.review.list {
    list-style: square;
    padding-left: 1.4em;
}
.review.quote {
    border-left: 5px solid #CBF2F0;
    padding: 8px 8px 8px 12px;
    margin-left: 5px;
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.5);
}

/* toggle */
div.review.toggle {
    padding-top:10px;
}
.review.togglewrapper {
	display: grid;
    transition: grid-template-rows 500ms;
}
.review.togglewrapper > .review.togglecontent {
	overflow: hidden;
}
.review.togglecontent {
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}
.review.togglebutton {
	background-color: #CBF2F0;
	font-size: 8pt;
    color: #282C34;
	padding: 3px;
}
.review.togglebutton:hover {
    cursor: pointer;
    background-color: whitesmoke;
}
span.review.note {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
}
span.review.note:hover {
    opacity: 0.6;
}