:root {
  --background: rgba(0, 0, 0, .75);
  --darkGrey:#1d1d1d;
  --midGrey:#aaa;
  --lightGrey: #ccc;
  --lightest: #fff;
  --veryLight: #e3e3e3;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
	margin: 0;
	background: #ebebeb;
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
    width: 100%;
    height: 100%;
}

.allDownloads{
    display: grid;
    grid-template-columns: repeat(auto-fit,6rem);
    grid-area: allFanGroups;
    grid-gap: .75em;
    justify-content: center;
}

/*=== avatar ===*/
.avatar{
    display: grid;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". avatarImg ."
        ". avatarName .";
    width: 100%;
    height: 100%;

}

.avatar img{ /* avatar */
    grid-area: avatarImg;
    height: 90px;
    width: 90px;
    display: block;
    
}

.avatarName{ /* avatar name */
    grid-area: avatarName;
    font-size: .75em;
}

/*=== end of avatar ===*/

.allWallpapers{
    display: grid;
    grid-template-columns: repeat(auto-fit,10rem);
    grid-area: allFanGroups;
    grid-gap: .75em;
    justify-content: center;
    background-color: var(--lightest);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/*=== wallpaper ===*/
.wallpaper{
    display: grid;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". wallpaperImg ."
        ". wallpaperTitle ."
        ". wallpaper800 ."
        ". wallpaper1024 ."
        ". wallpaper1152 ."
        ". wallpaper1280 .";
    /*width: 100%;
    height: 100%;*/
    grid-template-rows: 8rem .75em .75em .75em .75em .75em;
}

.wallpaper img{ /* wallpaper */
    grid-area: wallpaperImg;
    height: 120px;
    width: 150px;
    display: block;
    
}

.wallpaperTitle{ 
    grid-area: wallpaperTitle;
    font-size: .5em;
}

.wallpaper800{ /* wallpaper sizes */
    grid-area: wallpaper800;
    font-size: .75em;
}

.wallpaper1024{ 
    grid-area: wallpaper1024;
    font-size: .75em;
}

.wallpaper1152{ 
    grid-area: wallpaper1152;
    font-size: .75em;
}

.wallpaper1280{ 
    grid-area: wallpaper1280;
    font-size: .75em;
}

.wallpaper800 a,
.wallpaper1024 a,
.wallpaper1152 a,
.wallpaper1280 a{
    color: var(--darkGrey);
    text-decoration: none;
}

.wallpaper800 a:hover,
.wallpaper1024 a:hover,
.wallpaper1152 a:hover,
.wallpaper1280 a:hover{
  color: red; 
}

/*=== end of wallpaper ===*/

.allNextGames{
    display: grid;
    grid-template-columns: repeat(auto-fit,30rem);
    /*grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));*/
    grid-area: allFanGroups;
    grid-gap: .75em;
    justify-content: center;
    background-color: var(--lightest);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/*=== next game ===*/
.nextGame{
    display: grid;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". nextGameImg ."
        ". nextGameTitle ."

   grid-template-rows: 8rem .75em;
}

.nextGame img{ /* next game */
    grid-area: nextGameImg;
    /*height: 233px;*/ /*=== image size ===*/
    /*width: 480px;*/  /*=== image size ===*/
    height: 100%;
    width: 100%;
    display: block;
    
}

.nextGameTitle{ 
    grid-area: nextGameTitle;
    font-size: .5em;

}

.nextGameText{ 
    grid-area: nextGameTitle;
    font-size: .75em;
    font-weight: 600;
    /*=== make the text appear at the bottom of the graphic  ===*/
    background-color: rgba(255,255,255,.5);
    margin-top: 240px;
    
}