list.css

@import "preset.css";
@import "palette.css";
@import "clayto.css";

html, body {
    width: 100%;
    height: 100%;
}

body {
    background: var(--clh-black);
    color: var(--clh-white);
    opacity: 0;
    transition: opacity ease-out 1s;
}

/* my body is ready */
body.ready {
    opacity: 1;
}

a {
    /*color: var(--clh-orange-light);*/
	color: rgb(153, 204, 255);
    cursor: pointer;
}

a:visited {
	color: rgb(153, 204, 255);
}
.beside {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#arcade-list-container {
    margin: 42px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /*repeat(auto-fill,minmax(720px,1fr));*/
    /*grid-auto-rows: auto;*/
    grid-gap: 27px;
    align-items: start;
}

.game-wrapper {
	height: 100%;
}

img {
    width: 100%;
}

.msg {
}
.msg h1 {
	margin-bottom: 2px;
	padding-bottom: 1px;
}

.pbp-article-thumbnail {
    transition: transform ease-out 180ms;
    z-index: 100;
    position: relative;
}
.pbp-article-thumbnail:hover {
    transform: scale(1.06);
    z-index: 1000;
}

.msg {
    font-size: 1.3rem;
    height: 100%;
    color: #c8c8c8;
}
.msg h1 {
	color: white;
}

pfe-cta {
	font-size: 1.6em;
}

pfe-icon.place1 {
	--pfe-icon--Color: gold;
}
pfe-icon.place2 {
	--pfe-icon--Color: silver;
}
pfe-icon.place3 {
	--pfe-icon--Color: brown;
}

body {
	--pfe-theme--color--ui-accent:#b500c8;
	--pfe-theme--color--ui-accent--hover:#d059dd;
}
pfe-card {
	box-shadow: 0px 6px 10px 10px rgba(0,0,0,0.2);
	--pfe-card--Border: 2px dotted purple;
}

.banner {
	grid-column: 1 / -1;
	margin: 0px 0;
	text-align: center;
}
.banner h2 {
	padding: 12px 16px;
	display: inline-block;
}