@font-face {
font-family: 'Comic Neue';
src: url(../woff2/comicneue-regular.woff2) format('woff2'),
url(../woff/comicneue-regular.woff) format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Comic Neue';
src: url(../woff2/comicneue-bold.woff2) format('woff2'),
url(../woff/comicneue-bold.woff) format('woff');
font-weight: 700;
font-style: normal;
} :root { --container-width: 1200px; --color-bg-body: #f8f8f8;  
--color-text-main: #646E6F;
--color-white: #ffffff;
--color-link: #1E73BE;
--color-link-hover: #175A94;
--color-link-focus: #144C7A;
--color-button-bg: #3276b1;
--color-button-bg-hover: #285b8a;
--color-more-games-bg: #0F8A13;
--color-more-games-bg-hover: #0E8112;
--color-payment-tab-bg-active: #FF8E05; --primary-menu-bg: #207AB6;
--primary-menu-blue: #0F4AFA;
--primary-menu-blue-hover: #0D3EC8;
--primary-menu-orange: #D91E18;
--primary-menu-orange-hover: #C31A14;
--primary-menu-purple: #B200FD;
--primary-menu-purple-hover: #9E00E8;
--primary-menu-green: #0D7711;
--primary-menu-green-hover: #0B5F0E;
--primary-menu-yellow: #135CA4;
--primary-menu-yellow-hover: #0F4A83;
--primary-menu-magenta: #E10E6D;
--primary-menu-magenta-hover: #C00C5D;
--primary-menu-text: #ffffff;
--primary-menu-hover-text: #ffcc00; --footer-text: #ffffff;
--footer-bg-search: #dbdbdb;
--footer-bg-top: #207AB6;
--footer-bg-mid: #1C689C;
--footer-bg-bottom: #185D8C;
--footer-link-hover: #ffcc00;
--footer-button-bg: #B200FD;
--footer-button-bg-hover: #7701a9; --login-student-bg: #dcedc8;
--login-family-bg: #b3e5fc;
} * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Comic Neue", "Comic Sans MS", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
} body {
margin: 0;
padding: 0;
background-color: var(--color-bg-body);
font-size: 18px;
line-height: 1.5em;
overflow-wrap: break-word;
color: var(--color-text-main);
overflow-x: hidden;
} h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0.75em 0 1em 0;
padding: 0;
font-weight: 700;
} p {
margin-bottom: 1.5em;
} ul,
ol {
padding: 0;
margin: 0;
} ul,
ol {
list-style: decimal;
padding-left: 20px;
margin-left: 20px;
margin-bottom: 1.5em;
} img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
max-width: 100%;
} table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th,
td {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 8px 12px;
text-align: left;
} button,
input,
textarea,
select {
font: inherit;
background: none;
border: none;
padding: 0;
margin: 0;
outline: none;
color: inherit;
}
button {
cursor: pointer;
}
input[type="search"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
resize: vertical;
} a {
text-decoration: none;
color: var(--color-link);
}
a:visited {
color: var(--color-link);
}
a:hover {
color: var(--color-link-hover);
}
a:focus,
a:active {
color: var(--color-link-focus);
} .skg-main-content {
width: 100%;
max-width: var(--container-width);
margin: 20px auto;
padding: 20px;
background-color: var(--color-white);
} h1 {
font-size: 40px;
}
h2 {
font-size: 40px;
}
h3,
h4,
h5,
h6 {
font-size: 20px;
} .container {
max-width: var(--container-width);
margin: 0 auto; } .wp-show-posts-inner {
text-align: center;
}
.wp-show-posts .wp-show-posts-entry-title {
font-size: 18px;
} .button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
border-radius: 0;
padding: 10px 15px;
font-weight: 700;
vertical-align: baseline;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
background: var(--color-button-bg);
color: var(--color-white);
border: 0;
text-decoration: none;
display: inline-block;
cursor: pointer;
font-size: 18px;
}
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
background: var(--color-button-bg-hover);
border-color: var(--color-button-bg-hover);
color: var(--color-white);
} input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"] {
font-weight: 400;
text-transform: none;
margin: 0;
vertical-align: baseline;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
background: rgb(250, 250, 250);
color: rgb(102, 102, 102);
border: 1px solid rgb(204, 204, 204);
border-radius: 0;
padding: 10px 15px;
box-sizing: border-box;
max-width: 100%;
width: 100%;
}
input:focus {
color: rgb(102, 102, 102);
background-color: rgb(255, 255, 255);
border-color: rgb(191, 191, 191);
outline: none;
box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.25);
}
input:hover {
background-color: rgb(245, 245, 245);
border-color: rgb(191, 191, 191);
}
input:disabled {
background-color: rgb(240, 240, 240);
color: rgb(153, 153, 153);
border-color: rgb(204, 204, 204);
cursor: not-allowed;
}
input::placeholder {
color: rgb(153, 153, 153);
opacity: 1;
}
input:focus::placeholder {
color: rgb(204, 204, 204);
} .more-games-container {
clear: both;
text-align: right;
}
.more-games-button {
background-color: var(--color-more-games-bg);
border: none;
color: var(--color-white);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: 700;
cursor: pointer;
margin-bottom: 30px;
}
.more-games-button:link,
.more-games-button:visited {
color: var(--color-white);
}
.more-games-button:hover {
color: var(--color-white);
background-color: var(--color-more-games-bg-hover);
}
@media (max-width: 767px) {
.more-games-button {
display: block;
}
} .search-form {
width: 100%;
max-width: var(--container-width);
margin: 20px auto;
padding: 20px;
background-color: #f2f2f2;
text-align: center;
} .wc-shortcodes-tabs ul.wcs-tabs-nav .wcs-state-active a {
background-color: var(--color-payment-tab-bg-active);
color: var(--color-white);
} .skg-price-box {
margin: 0px;
}  .skg-search-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}
@media (max-width: 768px) { .skg-search-grid {
grid-template-columns: 1fr;
}
} .skg-search-grid article {
text-align: center;
} .skg-search-grid .skg-article-title {
font-size: 18px;
margin: 10px 0;
} .skg-search-grid article img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
} .skg-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--container-width);
margin: 20px auto;
padding: 0 20px;
} .skg-logo {
width: 20%;
} .skg-member-menu {
width: 80%;
display: flex;
align-items: center;
justify-content: flex-end;
} .skg-member-menu>* {
display: inline-flex;
align-items: center;
padding: 8px 20px;
font-size: 15px;
font-weight: 700;
} #skg-search {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
box-sizing: border-box;
} #skg-search img {
vertical-align: middle;
} @media screen and (max-width: 600px) {
.skg-top-bar {
flex-direction: column-reverse;
} .skg-logo,
.skg-member-menu {
width: 100%;
margin-bottom: 10px;
text-align: center;
} .skg-member-menu {
justify-content: center;
} #skg-search {
display: none !important;
}
} #student {
background-color: #0F8A13;
color: #fff;
border-radius: 2px;
padding: 8px 20px;
}
#subscribe {
background-color: #EFEFEF;
border-radius: 2px;
padding: 8px 20px;
}
#subscribe a {
color: #5E6768;
}
#subscribe:hover {
background-color: #E3E3E3;
}
#login,
#account {
padding: 8px 20px;
} #skg-menu {
background: var(--primary-menu-bg);
padding: 10px 10px 20px;
} #skg-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
} #skg-menu .menu-row {
display: flex;
flex-wrap: wrap;
} #skg-menu .menu-grade-games {
flex: 0 0 12.5%;
padding: 4px;
box-sizing: border-box;
text-align: center;
min-width: 0;
}
#skg-menu .menu-grade-games img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
box-sizing: border-box;
}
#skg-menu .menu-caption {
display: none;
text-align: center;
font-size: 17px;
white-space: nowrap;
font-weight: 700;
} #skg-menu .menu-main-categories {
flex: 0 0 33.33%; min-height: 1px;
padding: 3px; box-sizing: border-box;
text-align: center;
}
#skg-menu .menu-main-categories span {
display: none;
}
#skg-menu .menu-button {
border: none;
color: var(--primary-menu-text);
padding: 6px 2px;
text-align: center;
text-decoration: none;
display: block;
font-size: 17px;
font-weight: 700;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
border-radius: 0;
} #skg-menu .menu-blue {
background-color: var(--primary-menu-blue);
}
#skg-menu .menu-orange {
background-color: var(--primary-menu-orange);
}
#skg-menu .menu-purple {
background-color: var(--primary-menu-purple);
}
#skg-menu .menu-green {
background-color: var(--primary-menu-green);
}
#skg-menu .menu-yellow {
background-color: var(--primary-menu-yellow);
}
#skg-menu .menu-magenta {
background-color: var(--primary-menu-magenta);
} #skg-menu .menu-button.menu-blue:hover {
background-color: var(--primary-menu-blue-hover);
}
#skg-menu .menu-button.menu-orange:hover {
background-color: var(--primary-menu-orange-hover);
}
#skg-menu .menu-button.menu-purple:hover {
background-color: var(--primary-menu-purple-hover);
}
#skg-menu .menu-button.menu-green:hover {
background-color: var(--primary-menu-green-hover);
}
#skg-menu .menu-button.menu-yellow:hover {
background-color: var(--primary-menu-yellow-hover);
}
#skg-menu .menu-button.menu-magenta:hover {
background-color: var(--primary-menu-magenta-hover);
} #skg-menu .menu-grade-games a:link,
#skg-menu .menu-grade-games a:visited {
color: var(--primary-menu-text);
text-decoration: none;
}
#skg-menu .menu-grade-games a:hover,
#skg-menu .menu-grade-games a:focus,
#skg-menu .menu-grade-games a:active {
color: var(--primary-menu-hover-text);
text-decoration: none;
} @media (min-width: 576px) {
#skg-menu .menu-grade-games {
padding: 8px;
flex: 0 0 12.5%; }
}
@media (min-width: 768px) {
#skg-menu .menu-grade-games {
padding: 15px;
} #skg-menu .menu-main-categories {
flex: 0 0 16.66%;
}
#skg-menu .menu-button {
padding: 12px 2px;
font-size: 14px;
}
#skg-menu .menu-main-categories span {
display: inline-block;
}
}
@media (min-width: 992px) { #skg-menu .menu-caption {
display: block;
}
#skg-menu .menu-main-categories {
flex: 0 0 16.66%;
}
#skg-menu .menu-button {
padding: 15px 2px;
font-size: 16px;
}
#skg-menu .menu-main-categories span {
display: inline-block;
}
}  .skg-footer-top,
.skg-footer-middle,
.skg-footer-bottom {
color: var(--footer-text);
} .skg-footer-top ul,
.skg-footer-middle ul,
.skg-footer-bottom ul {
list-style: none;
padding: 0;
margin: 0;
} .skg-footer-top ul li,
.skg-footer-middle ul li,
.skg-footer-bottom ul li {
margin: 5px 0;
} .skg-footer-top ul li a,
.skg-footer-middle ul li a,
.skg-footer-bottom ul li a {
color: var(--footer-text);
text-decoration: none;
display: flex;
align-items: center;
transition: color 0.3s;
} .skg-footer-top ul li a:hover,
.skg-footer-middle ul li a:hover,
.skg-footer-bottom ul li a:hover {
color: var(--footer-link-hover);
} .skg-footer-top ul li a:visited,
.skg-footer-middle ul li a:visited,
.skg-footer-bottom ul li a:visited {
color: var(--footer-text);
} .skg-footer-top ul li a img,
.skg-footer-middle ul li a img,
.skg-footer-bottom ul li a img {
margin-right: 10px;
width: 34px;
height: 36px;
} .skg-footer-top h2,
.skg-footer-middle h2,
.skg-footer-bottom h2 {
font-size: 25px;
margin-bottom: 10px; } .skg-footer-search {
background-color: var(--footer-bg-search);
padding: 20px;
}
.skg-footer-top {
background-color: var(--footer-bg-top);
padding: 40px 20px;
}
.skg-footer-middle {
background-color: var(--footer-bg-mid);
padding: 40px 20px;
}
.skg-footer-bottom {
background-color: var(--footer-bg-bottom);
padding: 10px 20px;
} .skg-footer-columns,
.skg-footer-about {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
} .skg-footer-button {
background-color: var(--footer-button-bg);
color: var(--footer-text) !important;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-weight: 700;
margin-top: 10px;
border-radius: 0;
transition: background-color 0.3s, color 0.3s;
}
.skg-footer-button:hover {
background-color: var(--footer-button-bg-hover);
color: var(--footer-text);
} .skg-footer-bottom .skg-footer-columns div,
.skg-footer-bottom .skg-footer-about div {
text-align: center;
}
.skg-footer-bottom .container {
text-align: center;
}  @media (max-width: 1025px) {
.skg-footer-columns,
.skg-footer-about {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 768px) {
.skg-footer-columns,
.skg-footer-about {
grid-template-columns: 1fr;
}
} .skg-search-form {
display: flex;
width: 100%;
margin: 0 auto;
}
.skg-search-form label {
flex: 1;
margin: 0;
}
.skg-search-field {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-right: none;
background-color: #fff;
}
.skg-search-submit {
padding: 10px 20px;
border: 1px solid #ccc;
border-left: none;
cursor: pointer;
font-size: 16px;
} .skg-section {
margin-bottom: 20px;
}
.skg-section h2 {
text-align: left;
margin-bottom: 20px;
font-size: 1.5em;
}
.skg-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.skg-grid-item {
flex: 0 1 calc(25% - 20px);
text-align: center;
max-width: calc(25% - 20px);
box-sizing: border-box;
}
.skg-grid-item img {
max-width: 100%;
height: auto;
display: block;
}
@media (max-width: 1000px) {
.skg-grid-item {
flex: 0 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.skg-grid-item {
flex: 0 1 calc(100% - 20px);
max-width: calc(100% - 20px);
}
}  .skg-login-sections {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px;
} .skg-login-section {
padding: 20px;
border-radius: 0px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.skg-login-section h2 {
font-size:30px;
} .skg-student-login {
background-color: var(--login-student-bg);
}
.skg-family-login {
background-color: var(--login-family-bg);
} @media (max-width: 768px) {
.skg-login-sections {
grid-template-columns: 1fr;
}
} .skg-game-title {
margin-bottom:20px;
}
.skg-categories {
font-size:14px;
}
.skg-tags {
font-size: 14px;
} .leaderboard {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (min-width: 768px) {
.leaderboard {
min-height: 120px;
}
}
@media only screen and (max-width: 767px) {
.leaderboard {
min-height: 56px;
}
}