/*
Theme Name: Game Profile - Cloud Dosage
Theme URI: 
Author: eddyrick
Version: 1.5 
.
.
.
*/
.game-page{
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	gap: 20px;
}
.game-title{
	grid-column: col-start / span 14;
}
.game-left-align{
	grid-column: col-start / span 14;
	grid-row: 3;
}
.game-right-align{
	grid-column: col-start / span 14;
	grid-row:4;
}
.game-image{
	grid-column: col-start / span 14;
	grid-row:2;
}
.game-trailer{
	grid-column: col-start / span 14;
	grid-row:5;
}
.game-description{
	padding: 0 0 15px 0;
}
.game-description .description-title,
.game-availability-title{
	font-size:100%;
	font-weight:bold;
}
.game-description .description-title{
	font-size:100%;
}
.game-image img{
	padding: 0 0 10px 0;
    width: 100%;
    height: auto;
}
.game-availability{
	grid-area:game-availability;
	padding: 20px 0 20px 0;
}
.game-availability .game-row{
	display:flex;
	padding: 0 0 1vh 0;
}
.game-availability .game-row img{
	height:auto;
	width: 100%;
	max-width:40px;
}
.game-availability .game-row .platform{
	display:block;
	width:100%;
	padding: 0 0 0 2vw;
}
.game-availability .game-row .platform .platform-label{
	text-align: left;
}
.game-availability .game-row .platform .platform-available{
	padding:0 10px 0 0;
	font-size:10px;
}

.game-details-metacritic span{
font-size:x-small;
}
.game-details-metacritic-value div{
	padding: 25px;
	width:75px;height:75px;display: flex;justify-content: center;align-items: center;
}
.game-details-metacritic-value .positive{
background-color:#6c3
}
.game-details-metacritic-value .mixed{
background-color:#fc3
}
.game-details-metacritic-value .negative{
background-color:#ccc
}
.game-details-metacritic-value .noscore{
background-color:#f00
}
.game-details-metacritic-value span{
font-size:xx-large;
}
.game-details{
	grid-area:game-details;
	display:flex;
}
.game-details-left-align{
	width: 90%;
	font-size:100%;
}
.play-now-btn {
  background-color: rgb(221, 51, 51);
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

a.play-now-btn:hover {
  background-color: orange;
}
a.play-now-btn:link, a.play-now-btn:visited {
	color:white;
	text-decoration:none;
}
a[disabled] {
    pointer-events: none;
	opacity:0.6;
}
.no-search-image{
    height: 12vw;
    background-color: #D3D3D3;
}
.search-title{
    margin-bottom: 4.5vh;
    margin-top: 2vh;
}

.game-search-content{
	display: grid;
	grid-template-columns: repeat(1, [col-start] 1fr);
	gap: 50px;
}

.game-search-content img{
	height: auto;
    width: 100%;
}

.game-search-title{
    max-width: 330px;
}

.game-search-item{
	margin-bottom:20px;
}

@media (min-width: 900px) {	
.game-title{
	grid-column: col-start / span 12;
}
.game-left-align{
	grid-column: col-start / span 7;
	grid-row: 2/4;
	/*padding: 0 20px 0 0;*/
}
.game-image{
	grid-column: col-start 8 / span 4;
	grid-row:2;
}
.game-right-align{
	grid-column: col-start 8 / span 4;
	grid-row:3;
}
.game-trailer{
	grid-column: col-start / span 12;
	grid-row:5;
}
.game-availability .game-row .platform{
	width:70%;
	padding:0 0 0 0.5vw;
}
.game-availability .game-row .platform .platform-label{
	font-size:larger;
	text-align: left;
	width:60%;
	float:left;
}
.game-availability .game-row .platform .platform-available{
	padding:0 10px 0 0;
	font-size:large;
	float:right;
}

.game-search-content{
	display: grid;
	grid-template-columns: repeat(4, [col-start] 1fr);
	gap: 50px;
}
.game-search-content img{
	height: auto;
    max-height: 185px;
    width: 100%;
}

}