/*!
Theme Name: 	Arcade Theme
Theme URI:		https://demo.arcadetheme.com
Author: 		ArcadeTheme.com
Author URI: 	https://arcadetheme.com
Description: 	Arcade Theme is a super fast, lightweight and highly customizible online video gaming WordPress theme. Are you using a Arcade WP Theme and still looking for the perfect theme? Look no further.
Version: 		2022.08.01
License:		GNU General Public License v3 or later
License URI:	https://www.gnu.org/licenses/gpl-3.0.html
Tags: 			one-column, two-columns, custom-colors, custom-menu, full-width-template, custom-logo, custom-background, translation-ready, theme-options
Text Domain:	arcade-theme
Requires PHP:	5.6
Tested up to:	5.5

/*
** GLOBAL
*/
body {
    background-color: #4FC6F9;
    min-height: 100vh;
}
ul { margin: 0; padding: 0;}
a {
    text-decoration: none;
    background-color: transparent;
}
* {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#header a:hover {
    text-decoration: none;
}
.screen-reader-text {display: none;}

/*
** Layout
*/
#content {
    margin: 1em;
}
header .page-title {
    font-size: 1.5em;
    margin: 0.2em;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.gt {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.gt .t {
    position: relative;
    text-align: center;
    filter: drop-shadow(1px 1px 1px black);
    font-size: 1.2em;
    overflow: hidden;
}
.gt .t b {
    font-size: 1.4em;
}
.gt .bg {
    background-image: radial-gradient(#656565c7,#ffffffa3,transparent,transparent);
}
.gt:hover .t, .gt:hover .bg {
    display: inherit;
}
.gt a:hover {
    color: #fff;
}
div.gt:hover img {
    border-style: inset;
    filter: sepia(0.7);
}
.center {
    text-align: center;
}
/* Pages */
.page-title {
    font-size: 1.4em;
    text-align: center;
}

/*
** UI
*/
.btn {
    border-radius: 30px;
    padding: 5px 20px;
    cursor: pointer;
    font-size: 1em;
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: transparent;
    border: 1px solid transparent;
    line-height: 1.5;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    /*margin: 15px;*/
    text-decoration: none;
}
.btn,.btn a {
    color: #fff;
}
.btn.active {
    filter: drop-shadow(2px 4px 6px black);
}
.btn.passive {
    filter:grayscale(1);
    opacity: 0.5;
}
.btn-color {
    /*
    width: 64px;
    height: 44px;
    */
    display: flex;
    align-items: center;
    align-content: center;
    border: none;
    margin-left: 0;
}
.btn-green {
    box-shadow: 0 4px 0 #408216;
    background: #56AD1E;
}
.btn-yellow {
    box-shadow: 0 4px 0 #bb9d17;
    background: #fdcc28;
}
.btn-red {
    box-shadow: 0 4px 0 #9c223f;
    background: #fb5174;
}
.btn-inline {
    display: inline;
}
/* pagination */
.pager {
    margin: 2em 0;
    text-align: center;
}
.pager .dots {
    display: none;
}
.pager .current {
    filter: grayscale(1);
}
/*flexbox*/
.f {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    }

.f .fi {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/* Toogle & Echo Cookie */
.gtc.ec > div {
    margin: 0.5em;
}
.gtc.ec img {
    width: 100%;
}

/*
** HEADER
*/
#header{
    box-shadow: 0px 1px 10px 0px #444;
}
.logo {
    float: left;
}
#header ul {
    list-style: none;
}
#top-nav {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
#top-nav ul {
    display: flex;
    justify-content: flex-end;
    /*align-items: center;*/
    align-items: stretch;
}
#top-nav ul li {
    margin: 0.5em;
}
#top-nav ul li.btn {
    padding: 0;
}
#top-nav ul li a {
    word-wrap: break-word;
    padding: 8px 8px;
    line-height: 2em;
}
#top-nav ul li a > i{
    font-style: normal !important;
}
#top-nav ul li a span {
    margin-left: 0.3em;
}
#mt.only-icons a span {
    display: none;
}
.only-icon span {
    display: none;
}
/* Top Categories */
ul#tc {
    margin: 1em;
    grid-auto-rows: auto;
    list-style: none;
}
#tc li a {
    font-weight: bold;
    border-radius: 0.5em;
    margin: 0.2em;
    padding: 0 1em;
    display: block;
    color: #1e5979;
    background-color: #fff;
    border: 5px solid transparent;
}
#tc li a:hover {
    border: 5px solid #08ba2e;
}
/* Quick Search */
.qsearch {
    display: block;
    margin: 2em;
    text-align: center;
}
.qsearch input[type="search"] {
    height: 3em;
    min-width: 50%;
    letter-spacing: 1px;
    background-image: linear-gradient(0deg, #6ed3ff, #37a0ce);
    box-shadow: inset 0 0 8px 0px white;
    border-radius: 5px;
    border-color: white;
    color: #666;
    border-style: double;
}

/* GAMEPLAY */
.tools {
    margin: 1em auto;
    font-size:1.35em;
}
.tools .fi {
    margin: 0 1em;
    position: relative;
    display: grid;
}
.tools header {
    color: #fff;
}
#fav .bl {
    display: none;
    position: absolute;
    top: 1%;
    right: 1%;
    color: #1e5979;
    background: white;
    border-radius: 0.5em;
    padding: 2px;
    box-shadow: 0 0 6px black;
}
#fav.liked .bl {
    display: block;
}

/* Game */
#game {
    margin:0 -1em 1em -1em;
}
#game > .embed {
    margin-left: 150px;
    margin-right: 150px;
    text-align: center;
}
.starter {
    margin: 0 auto;
    width: 80%;
    padding: 5% 0;
    text-align: center;
    background-color: #ffffff4d;
    border-radius: 1em;
}
.starter .game-title {
    font-size: 2em;
    padding: 1em 0;
    color:#56AD1E;
    text-shadow: 1px 1px #04244a;
    text-transform: uppercase;
}
.starter img {
    border-radius: 1em;
}
#start {
    display: inline-block;
    font-size: 1.2em;
    text-shadow: -1px -1px #666;
    filter: drop-shadow(2px 4px 20px #fff);
}
.desc img {
    min-height: 150px;
}
.desc img {
    border-radius: 1em;
    float: left;
    min-height: 150px;
    max-height: 180px;
    margin: 0 2rem 2rem 0;
}
.desc .more-tags {
    cursor: pointer;
}

/* Related Games */
.rg {
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: minmax(10em, auto);
    grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
    grid-gap: 0.45em;
    margin-bottom: 2em;
}
.rg a {
    color: #fff;
}
.rg img {
    width: 100%;
}
.mt {
    text-align: center;
}
/* Footer */
footer#colophon {
    padding: 2em;
    text-align: center;
}

#mf {
    list-style: none;
    display: inline-flex;
    margin: 1.5rem 0;
}
#mf li {
    padding: 0 0.5rem;
    border-right: #fff 1px dotted;
}
#mf li:last-child {
    border: none;
}

footer .site-info, footer .site-info a {
    color: #1e5979;
}

/*
** WordPress Stuff
*/
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/*
** Responsive Layout & Meadia Queries
*/
/* screenw>1000px */
@media only screen and (min-width:1000px) { 
	.tools {
        width: 60%;
    }
}
/* screenw<600px */
@media only screen and (max-width:600px) {
    #content {
        margin: 3px;
    }
	.tools {
        flex-wrap: wrap;
        text-align: center;
        flex-direction: row;
    }
    .tools header {
        width: 100%;
    }
    .starter {
        width: 100%;
        border-radius: 0;
    }
    
}