a,article,aside,body,center,footer,form,h1,h2,h3,h4,h5,h6,header,html,iframe,img,li,nav,object,p,section,span,table,tbody,tfoot,thead,th,tr,tt,u,ul{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;outline:0;vertical-align:top}
ol,ul{list-style:none}
table,table td{padding:0;border:none;border-collapse:collapse}
img{vertical-align:top}
embed{vertical-align:top}
*{border:none;box-sizing: border-box;}

body {
    background-image: linear-gradient(#6c26ff, #3D0F79);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow-x: hidden;
}


footer,
header {
    height: 4em;
    width: 100%;
    background-color: #1F252D;
    border-bottom: rgb(52, 61, 71) 1px solid;
    position: relative;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-around;

}
.logo {
    text-align: left;
}
header a, footer a{
    text-decoration: none;
    color: white;
}
h1 {
    font-size: 2em;
    color: white;
}

.category-page h1 {
    margin: 20px;
}
.site-name {    
    top: 7px;
}
.site-description {
    font-size: 1em;
    bottom: 2px;

}
#menuToggle {
    height: 100%;
}
#menuToggle input,
#menuToggle span{
    display: none;
}
nav {
    flex-grow:1;
    max-width: 700px;
}
nav ul {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    align-content: flex-start
}

nav ul li {
    flex-grow:1;
    cursor: pointer;
    margin: auto;
}
nav ul li.active {
    background: #3abd33;
    padding: 5px 0;
    border-radius: 4px;

}
.section-title {
    color: white;
    font-size: 1.5em;
    text-align: center;
    margin: 10px 0;
}

.selection-container.selection-player {
    justify-content: center;
}
.selection-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1050px;
    margin: auto;
}


.category-page .selection-container {
    max-width: none;
    display: grid;
    grid-auto-flow: row;
    justify-items: stretch;
    align-items: stretch;
    justify-content: stretch;
    column-gap: 20px;
    grid-template-columns: repeat(7,1fr);
}
.category-page .selection-container li.game-item {
    max-height: none;
    max-width: none;
    width: auto;
    height: auto;
    min-height: 7em;
    margin: 0 1px;
}
.category-page .selection-container li.square-sd {
    justify-self: stretch;
    align-self: stretch;
    grid-column: 1 / span 2;
    grid-row: 2 / span 2;
}

.selection-container li {
    max-height: 9em;
    max-width: 9em;    
    width: 27%;
    height: 27%;
    margin: 10px;

}
.selection-container li img {
    width: 100%;
    border-radius: 1em;
    border: 3px solid transparent;
    object-fit: cover;
    height: 17vh;
}
.category-page .selection-container li img{
    height: 9em;
}

.image-description span{    
    opacity: 1;
}

.image-description {    
    text-align: center;
    background: black;
    color: white;
    padding: 0.1em;
    top: -2.1em;
    position: relative;
    opacity: 0.8;
    width: 100%;
}

.category-selection {
    margin-bottom: 20px;
}

.selection-container li:hover img,
.selection-container li.active img{
    border: solid 3px yellow;
}

.selection-player li {
    border: 3px solid transparent;  
}

.game-result {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: [row1] auto [row2] auto [row3] auto;
    grid-column-gap: 20px;
    justify-items: center;
    justify-content: center;
    margin: 20px auto;    
    max-width: 1050px;      
    border-radius: 10px;  
}

.game-description {
    max-width: 400px;
    color: white;
    margin-bottom: 20px;
    font-weight: normal;
    font-size: 1.04em;
    letter-spacing: 1.5px;
    line-height: 1.5;
}

.game-title {
    color: white;
    font-size: 2em;
    margin-bottom: 20px;
}

#game-find-btn-container {
    grid-column-start: 1;
    grid-column-end: span 2;
}

#game-find-btn-container.column-span-1 {
    grid-column-end: span 1;
}

#game-image-container {
    max-width: 512px;
    margin: 0 20px;
    min-width: 350px;
    grid-row-start: 1;
    grid-row-end: span 3;
    grid-column-start: 2;
    grid-column-end: span 1;
    padding: 20px;

}

#game-play-btn-container {
    grid-row-start: 2;
    grid-row-end: span 1;
}

#game-image-container img {
    width: 100%;
}

.play-game-img {
    cursor: pointer;
    border-radius: 10px;
}

.find-button,
.play-game-btn {
  display: block;
  width: 320px;  
  max-width: 100%;  
  margin: 20px auto;  
  overflow: hidden;
  position: relative;
  transform: translatez(0);
  text-decoration: none;
  box-sizing: border-box;
  font-size: 24px;
	font-weight: normal;
    box-shadow: 0 9px 18px rgba(0,0,0,0.2);
    text-align: center;
	border-radius: 50px;
  padding: 26px;
  transition: all 0.2s ease-out 0s;
  text-transform: uppercase;
}

.find-button {
    color: white;
    background: #BD3381;
}

.play-game-btn {
    color: white;
    background: #3abd33;
}

.find-button.try-again {
    width: 200px;
    font-size: 18px;
    padding: 20px;
}

.gradient {
	display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: auto;
  margin: auto;
  z-index: -1;  
  background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
  transition: all 0s ease-out 0s;
	transform: translatex(-140px);
    animation: 18s linear 0s infinite move;

}

@keyframes move {
	0% {
		transform: translatex(-140px);
	}
	25% {
		transform: translatex(140px);
		opacity: 0.3;
	}
	50% {
		transform: translatex(140px);
		opacity: 1;
		background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
	}
	75% {
		transform: translatex(-140px);
		opacity: 0.3;
	}
	100% {
		opacity: 1;
		transform: translatex(-140px);
		background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
	}
}

.find-button:hover,
.play-game-btn:hover  {   
    cursor: pointer; 
    letter-spacing: 2px;
    -webkit-box-shadow: 0px 10px 30px -10px rgba(184, 150, 210.7);
    -moz-box-shadow: 0px 10px 30px -10px rgba(184, 150, 210,0.7);
    box-shadow: 10px 30px -10px rgba(184, 150, 210,0.7);
    transition: all 0.4s ease 0s;
}

#game-code-container iframe{
    display: block;
	margin: auto;	
}

#game-code-container>div {
    margin: 10px auto;
}

.game-full-screen {
    background: #f78800;
    border-radius: 50px;
    width: 150px;
    padding: 9px; 
    text-transform: uppercase;
    display: block;
    margin: auto; 
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: bolder;
    cursor: pointer;
}
.about-container>div {
    max-width: 1000px;
    margin: auto;
}
section.about-container {
    background: #e8caff;    
    padding: 20px;        
    margin: auto;
    font-weight: normal;
    font-size: 1.04em;
    letter-spacing: 1.5px;
    line-height: 1.5;
}
.about-container h2 {
    margin-top: 20px; 
}

.games-container {
    max-width: 1050px;
    margin: 60px auto;
}

.games-container h1 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.8em;
    margin: 0 0 0 20px; 

}
.pagination-container {
    text-align: center;
}

.pagination-container li.active {
    background-color: #BD3381;
}

.pagination-container li {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    padding: 0;
    margin: 5px;
    text-align: center;
    position: relative;
    background-color: #3abd33;
    display: inline-block;
    cursor: pointer;
}

.selection-container li.game-item {
    max-height: 15em;
    max-width: 15em;    
    width: 27%;
    height: 27%;
    cursor: pointer;
}

.special-image {
    width: 100px;
}
.special-title {
    color: white;
    margin-left: 20px;
    font-size: 20px;
    text-decoration: none;
}
.special-games {
    margin: auto;
    max-width: 350px;
    display: flex;
    align-items: center;
}

.footer-nav  {
    padding-top: 10px; 
}
.footer-nav a {
    border-right: white solid 1px;
    padding: 0 10px;
    text-decoration: underline;
}



@media all and (max-width:1620px){
    .category-page .selection-container li.square-sd {
        grid-column: 1 / span 3;
    }


}

@media all and (max-width:1100px){
    .category-page .selection-container li.square-sd {
        grid-column: 1 / span 3;
    }

    .category-page .selection-container {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media all and (max-width:1060px){
    .about-container {
        margin: auto 10px;
    }



}

@media all and (max-width:950px){
    .about-container {
        margin: auto 10px;
    }

    .category-page .selection-container {
        grid-template-columns: repeat(5, 1fr);
    }

}

@media all and (max-width:800px){

    #game-image-container ,
    #game-text-container ,
    #game-play-btn-container,
    #game-find-btn-container.column-span-1,
    #game-find-btn-container {
        
        grid-row-end: span 1;
        grid-column-start: 1;
        grid-column-end: span 2;
    }

    #game-find-btn-container {
        grid-row-start: 1;
    }

    #game-text-container {
        grid-row-start: 2;
    }

    #game-image-container {
        grid-row-start: 3;

    }

    #game-play-btn-container {
        grid-row-start: 4;        
    }
    .category-page .selection-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-page .selection-container li.square-sd {
        grid-column: 1 / span 2;
    }
}

@media all and (max-width:700px){
    .category-page .selection-container li.square-sd {
        grid-column: 1 / span 3;
    }
}


@media all and (max-width:500px){
    header {
        display: revert;
    }

    .selection-player {
        display: none;
    }

    .selection-container li.game-item {
        min-width: 44%;
        min-height: 135px;
    }
    .category-page .selection-container li.game-item {
        min-width: auto;
    }

    .category-page .selection-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-page .selection-container li.square-sd {
        grid-column: 1 / span 2;
    }

    #menuToggle
    {
        position: absolute;
        top: 18px;
        right: 18px;

        z-index: 8;

        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle input
    {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;

        cursor: pointer;

        opacity: 0; /* hide this */
        z-index: 9; /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }

    #menuToggle span
    {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;

        background: #cdcdcd;
        border-radius: 3px;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }

    #menuToggle input:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #cdcdcd;
    }

    /*
     * But let's hide the middle one.
     */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
     * Ohyeah and the last one should go the other direction
     */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
        transform: rotate(-45deg) translate(0, -1px);
    }

    #main-menu
    {
        display: revert;
        height: auto;
        position: absolute;
        width: 300px;
        margin: -100px 0 0 0;
        padding: 50px;
        padding-top: 125px;
        right: -100px;
        background: #1F252D;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */

        transform-origin: 0% 0%;
        transform: translate(100%, 0);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

    }

    #main-menu li
    {
        padding: 10px 0;
        font-size: 22px;

    }


    /*
 * And let's slide it in from the left
 */
    #menuToggle input:checked ~ ul
    {
        transform: none;
        opacity: 1;
    }

}

@media all and (max-width:400px){

    .site-description {
        font-size: 0.7em;
    }

    h1 {
        font-size: 1.7em;
    }


}