/*
Theme Name: PlayShift
Theme URI: https://playshift-games.com/
Author: richter_h
Author URI: https://crescentsun.space
Description: Based on bootScore5, a powerful Bootstrap 5 WordPress Starter Theme with WooCommerce Support. <a href="https://bootscore.me/category/documentation/" target="_blank">Documentation</a>.
Version: 5.0.2.3
Tested up to: 5.7.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bootscore
Tags: featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Bootscore is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.  Temporary
2.  Header
3.  Body
4.  Alerts
5.  Breadcrumb
6.  To Top Button
7.  Single Post
8.  Comments
9.  Archive
10. Widgets
11. Utilities
12. Colors
13. HTML Markups (Theme Unit Test Data)
--------------------------------------------------------------*/

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
:root {
    --bs-font-sans-serif: "Noto Sans JP", sans-serif!important;
    --playshift-darker-orange: #8B4C22;
    --playshift-dark-orange: #CA6B2D;
    --playshift-orange: #F1B266;
    --playshift-white: #fefefe;
    --playshift-grey: #3F3B38;
    --playshift-black: #111215;

    --playshift-steam: #2c2e35;
    --playshift-itch: #FF2449;
    --playshift-ns: #E60012;

    --bs-primary: var(--playshift-orange)!important;
}

/*--------------------------------------------------------------
1. Temporary
--------------------------------------------------------------*/

/* scroll-behaviour: smooth not supportet by Safari. 
jQuery smooth scroll script will be removed when Safari supports it */
html {
    scroll-behavior: auto !important;

    min-height: 100vh;
}

/*
Remove autop (WP 5.7 bug near shortcode)
https://wordpress.org/support/topic/how-to-stop-wp-from-adding-p-tag-automatically/
*/

p:empty:before {
    content: none;
}

a {
    color: var(--playshift-orange);
}

hr.white {
    background-color: var(--playshift-dark-orange);
    height: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700!important;
}

.object-fit-cover {
    object-fit: cover;
}
.object-fit-contain {
    object-fit: contain;
}

/* To Top Button Fallback (done by classes) */
.top-button {
    position: fixed;
    z-index: 1031;
}

/* Footnote styling */
.footnote {
    font-weight: 300;
    font-size: 75%;
    font-style: italic;
}


/* Dropdown Search (replaced by Collapse component in 5.1.0.0. Fallback to old headers) */
@media (max-width: 782px) {

    .logged-in.admin-bar .dropdown-search {
        top: 100px !important;
    }

}

@media (min-width: 783px) {

    .logged-in.admin-bar .dropdown-search {
        top: 86px !important;
    }
}

.dropdown-search.dropdown-menu[data-bs-popper] {
    top: 54px;
}

.dropdown-search .searchform {
    opacity: 0;
    transition: opacity .8s;
    transition-delay: .3s;
}

.dropdown-search.show .searchform {
    opacity: 1;
}

#nav-main.navbar {
    background-color: #FFFFFF;
    transition: all .15s ease-in-out;
}

@media (max-width: 991px) {
    .btn-dropdown.right {
        padding-right: 0;
        border: none;
    }

    #dropdown-search:hover {
        color: currentColor;
        background-color: transparent;
        border-color: transparent;
    }

    #dropdown-search:focus {
        box-shadow: none;
    }
}
/* Dropdown Search Fallback End */


/* Offcanvas Backdrop fade */
.modal-backdrop.fade {
    transition: opacity .4s ease-in-out;
}

.modal-backdrop {
    cursor: pointer;
}


/* Offcanvas */
/* Expand-sm */
@media (min-width: 576px) {

    .navbar-expand-sm .offcanvas .offcanvas-header {
        display: none;
    }

    .navbar-expand-sm .offcanvas {
        position: inherit;
        bottom: 0;
        flex-grow: 1;
        visibility: visible !important;
        transition: none;
        transform: none;
        border-left: none;
        border-right: none;
        z-index: inherit;
    }

    .navbar-expand-sm .offcanvas .offcanvas-body {
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        display: flex;
    }

    .navbar-expand-sm .offcanvas-top {
        border-bottom: none;
        height: auto;
    }

    .navbar-expand-sm .offcanvas-bottom {
        border-top: none;
        height: auto;
    }

    /* Override background-color in case bg-* color classes are used */
    .navbar-expand-sm .offcanvas,
    .navbar-expand-sm .offcanvas .offcanvas-body {
        background-color: transparent !important;
    }

}

/* Expand-md */
@media (min-width: 768px) {

    .navbar-expand-md .offcanvas .offcanvas-header {
        display: none;
    }

    .navbar-expand-md .offcanvas {
        position: inherit;
        bottom: 0;
        flex-grow: 1;
        visibility: visible !important;
        transition: none;
        transform: none;
        border-left: none;
        border-right: none;
        z-index: inherit;
    }

    .navbar-expand-md .offcanvas .offcanvas-body {
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        display: flex;

    }

    .navbar-expand-md .offcanvas-top {
        border-bottom: none;
        height: auto;
    }

    .navbar-expand-md .offcanvas-bottom {
        border-top: none;
        height: auto;
    }

    /* Override background-color in case bg-* color classes are used */
    .navbar-expand-md .offcanvas,
    .navbar-expand-md .offcanvas .offcanvas-body {
        background-color: transparent !important;
    }

}

/* Expand-lg */
@media (min-width: 992px) {

    #nav-main.navbar {
        background-color: transparent;
    }
    #nav-main.navbar.opaque {
        background-color: #fff;
    }

    .navbar-expand-lg .offcanvas .offcanvas-header {
        display: none;
    }

    .navbar-expand-lg .offcanvas {
        position: inherit;
        bottom: 0;
        flex-grow: 1;
        visibility: visible !important;
        transition: none;
        transform: none;
        border-left: none;
        border-right: none;
        z-index: inherit;
    }

    .navbar-expand-lg .offcanvas .offcanvas-body {
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        display: flex;
    }

    .navbar-expand-lg .offcanvas-top {
        border-bottom: none;
        height: auto;
    }

    .navbar-expand-lg .offcanvas-bottom {
        border-top: none;
        height: auto;
    }

    /* Override background-color in case bg-* color classes are used */
    .navbar-expand-lg .offcanvas,
    .navbar-expand-lg .offcanvas .offcanvas-body {
        background-color: transparent !important;
    }

}

/* Expand-xl */
@media (min-width: 1200px) {

    .navbar-expand-xl .offcanvas .offcanvas-header {
        display: none;
    }

    .navbar-expand-xl .offcanvas {
        position: inherit;
        bottom: 0;
        flex-grow: 1;
        visibility: visible !important;
        transition: none;
        transform: none;
        border-left: none;
        border-right: none;
        z-index: inherit;
    }

    .navbar-expand-xl .offcanvas .offcanvas-body {
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        display: flex;
    }

    .navbar-expand-xl .offcanvas-top {
        border-bottom: none;
        height: auto;
    }

    .navbar-expand-xl .offcanvas-bottom {
        border-top: none;
        height: auto;
    }

    /* Override background-color in case bg-* color classes are used */
    .navbar-expand-xl .offcanvas,
    .navbar-expand-xl .offcanvas .offcanvas-body {
        background-color: transparent !important;
    }

}

/* Expand-xxl */
@media (min-width: 1400px) {

    .navbar-expand-xxl .offcanvas .offcanvas-header {
        display: none;
    }

    .navbar-expand-xxl .offcanvas {
        position: inherit;
        bottom: 0;
        flex-grow: 1;
        visibility: visible !important;
        background-color: transparent;
        transition: none;
        transform: none;
        border-left: none;
        border-right: none;
        z-index: inherit;
    }

    .navbar-expand-xxl .offcanvas .offcanvas-body {
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        display: flex;
    }

    .navbar-expand-xxl .offcanvas-top {
        border-bottom: none;
        height: auto;
    }

    .navbar-expand-xxl .offcanvas-bottom {
        border-top: none;
        height: auto;
    }

    /* Override background-color in case bg-* color classes are used */
    .navbar-expand-xxl .offcanvas,
    .navbar-expand-xxl .offcanvas .offcanvas-body {
        background-color: transparent !important;
    }

}
/* Offcanvas End */



/* Badges (fixes Bootstrap hover state if badge is wrapped in a <a>...</a> tag) */
.badge.bg-light,
.badge.bg-warning,
.badge.bg-info {
    color: currentColor;
}

.badge.bg-secondary:hover,
.badge.bg-primary:hover,
.badge.bg-danger:hover,
.badge.bg-sussess:hover,
.badge.bg-dark:hover {
    color: #fff;
}

.badge.bg-info:hover,
.badge.bg-warning:hover,
.badge.bg-light:hover {
    color: currentColor;
}

a.badge,
a.badge:hover {
    text-decoration: none;
}

.badge.bg-primary {
    background-color: var(--bs-primary)!important;
}
/* Badges End */


/*--------------------------------------------------------------
2. Header
--------------------------------------------------------------*/

.logo {
    height: 48px;
}

@media (max-width: 782px) {
    
    #wpadminbar {
        position: fixed;
    }

    .logged-in.admin-bar .fixed-top,
    .logged-in.admin-bar .offcanvas:not(.offcanvas-bottom),
    .logged-in.admin-bar .modal {
        top: 46px;
    }
    
    .logged-in.admin-bar .modal-fullscreen {
        height: calc(100% - 46px);
    }
    
}

@media (min-width: 783px) {

    .logged-in.admin-bar .fixed-top,
    .logged-in.admin-bar .offcanvas:not(.offcanvas-bottom),
    .logged-in.admin-bar .modal {
        top: 32px;
    }
    
    .logged-in.admin-bar .modal-fullscreen {
        height: calc(100% - 32px);
    }

    .site-header .bg-light {
        background-color: transparent!important;
    }
    
}

#nav-main .menu-item .nav-link.active {
    color: var(--playshift-orange);
}

#nav-main .menu-item:last-child .nav-link {
    padding-right: 0;
}

.navbar-expand-lg .navbar-nav {
    background-color: #fff;
    padding: 0 1rem;
    box-shadow: 0 1px 3px rgba(16,16,16,.15);
}

.navbar-nav .icon {
    display: block;
    width: 24px; height: 24px;
    background-size: contain;
    background-position: center center;
    background-color: transparent;
    background-repeat: no-repeat;

    filter: brightness(0) invert(1) brightness(0.3);
}
.navbar-nav .icon.steam {
    background-image: url('img/icons/icon-steam-old.svg');
}
.navbar-nav .icon.itch {
    background-image: url('img/icons/icon-itch-old.svg');
}
.navbar-nav .icon.facebook {
    background-image: url('img/icons/icon-facebook.svg');
}
.navbar-nav .icon.twitter {
    background-image: url('img/icons/icon-twitter.svg');
}
.navbar-nav .icon.youtube {
    background-image: url('img/icons/icon-youtube.svg');
}
.navbar-nav .icon.switch {
    background-image: url('img/icons/icon-switch.png');
}

.offcanvas-header.text-primary {
    color: var(--playshift-dark-orange)!important;
}


/*--------------------------------------------------------------
3. Body
--------------------------------------------------------------*/

body {
    position: relative;
    word-break: break-word;

    background-color: #f5f5f5!important;
}

::-moz-selection {
    text-shadow: none;
}

::selection {
    text-shadow: none;
}

#content {
    min-height: calc(100vh - 6.6rem);
}

#content a:not(.badge) {
    color: var(--playshift-dark-orange);
}

#main .entry-header {
    position: relative;
    overflow: hidden;

}
#main .entry-header .fullscreen-bg__video {
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: auto; height: 100%;
}
#main .entry-header:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    background-color: rgba(16,16,16,.4);
}
#main .entry-header > .container {
    z-index: 1029;
}
#main .entry-content {
    position: relative;
    z-index: 1029;
}
#main .text-primary {
    color: var(--playshift-dark-orange)!important;
}

#main.games .entry-content .gallery {
    background-color: var(--playshift-dark-orange);
    margin-top: 3rem;
    margin-bottom: 0;
    padding: 3rem 0;
}

#main.games .entry-content .gallery img {
    object-fit: cover;
    width: 100%;
    height: 15rem;
    margin-bottom: 1.5rem;

    border: 2px solid #fff;
    filter: drop-shadow(0 2px 3px rgba(16,16,16,.45));
    border-radius: 4px;
}

#main > .entry-header {
    min-height: 80vh;

    display: flex;
    align-items: flex-end;
    padding: 2rem 0;

    background-color: #C4C4C4;
    background-position: center center;
    background-attachment: fixed;
}

@media (min-width: 992px){
    #main.games > .entry-header {
        min-height: 75vh;
    }
    #main .entry-header .fullscreen-bg__video {
        width: 100%; height: auto;
    }
}

#main.home > .entry-header {
    position: relative;

    min-height: 100vh;
    padding-bottom: 6rem;
}
.logged-in #main.home > .entry-header {
    min-height: calc(100vh - 32px);
}
#main.home > .entry-header .container {
    display: flex;
    justify-content: flex-end;
}
#main.home > .entry-header .content {
    background-color: rgba(255,255,255,.75);
    padding: 2rem 3rem;
}
#main.home > .entry-header .content p {
    display: none;
}
#main.home > .entry-header .stripe {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3rem;
    z-index: 1029;

    background-color: rgba(255,255,255,1);

    display: flex;
    justify-content: center;
    align-items: center;
}
#main.home > .entry-header .stripe a {
    display: flex;
    justify-content: center;

    text-decoration: none;
    font-weight: 700;

    color: var(--playshift-black);
}
#main.home > .entry-header .icon {
    display: inline-block;
    width: 24px; height: 24px;
    margin-left: .5rem;
}
#main.home > .entry-header .icon.dropdown {
    background: url('img/icons/icon-dropdown.svg') center center no-repeat transparent;
}
#main.home .game-showcase {
    padding-top: 4rem;
    padding-bottom: 4rem;

    background-color: var(--playshift-orange);
}
#main.home .game-showcase .slick-dots {
    bottom: -3rem;
}
#main.home .game-slideshow .game-slide {
    padding: 0 2rem;
    margin-bottom: 2rem;
}
#main.home .game-nav .slick-slide {
    margin: 0 1rem;
}
#main.home .game-nav .slick-prev, 
#main.home .game-nav .slick-next {
    width: 2.5rem;
    height: 2.5rem;
}
#main.home .game-nav .slick-prev:before, 
#main.home .game-nav .slick-next:before {
    font-size: 2.5rem;
}
#main.home .game-nav .game-slide {
    padding: 0;
}
/* Hide item */
#main.home .game-slide.hidden {
    display: none!important;
    visibility: hidden;
}

#main.home .game-slide a,
#main.home .game-slide .text-primary {
    color: var(--playshift-darker-orange)!important
}
#main.home .game-nav .game-slide img {
    width: 128px;
    height: auto;
    margin: 0 auto;
}
#main.home .badge {
    font-size: 1.25rem;

    width: 100%;
}
#main.home .platforms a {
    display: block;
    margin: 0 0 .5rem;
}
#main.home .platforms a:first-child {
    margin-left: 0;
}
#main.home .platforms a:last-child {
    margin-right: 0;
}
#main.home .platform .btn {
	padding: 0
}
/* Inclusion of Switch */
#main.home .platform .icon {
    display: inline-block;
    width: 112px;
	height: 112px;
    /*width: 24px; */
    /*margin-right: .5rem;*/
    /* height: 24px; */ 

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#main.home .platform .icon.steam {
    background-image: url('img/icons/icon-steam.svg');
    filter: brightness(0) invert(1);
	height: 86px;
}
#main.home .platform .icon.itch {
    background-image: url('img/icons/icon-itch.svg');
    filter: brightness(0) invert(1);
	height: 86px;
}
#main.home .platform .icon.switch {
    background-image: url('img/icons/icon-switch.png');
    background-size: cover;
}

#main.home .blog-posts {
    padding: 4rem 0;

    font-size: 75%;
}
#main.home .blog-posts .card-img, 
#main.home .blog-posts .card-img-top {
    max-height: 180px;
    object-fit: cover;
}
#main.home .blog-posts .posts {
    display: flex;
    justify-content: center;
}
#main.home .blog-posts .card {
    text-align: center;
}

#main.games .entry-content {
    background-color: var(--playshift-white);
    padding-top: 3rem;
}
#main.games .badge {
    font-size: 1.25rem;
}
#main.games .platforms a {
    margin: 0 .5rem;
}
#main.games .platforms a:first-child {
    margin-left: 0;
}
#main.games .platforms a:last-child {
    margin-right: 0;
}
/* Inclusion of Switch */
#main.games .platform .icon {
    display: inline-block;
    width: 112px;
    /*width: 24px; */
    /*margin-right: .5rem;*/
    height: 24px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#main.games .platform .icon.steam {
    background-image: url('img/icons/icon-steam.svg');
    filter: brightness(0) invert(1);
}
#main.games .platform .icon.itch {
    background-image: url('img/icons/icon-itch.svg');
    filter: brightness(0) invert(1);
}
#main.games .platform .icon.switch {
    background-image: url('img/icons/icon-switch.png');
    background-size: cover;
}

#main.blog > .entry-header {
    align-items: center;
    text-align: center;
    color: var(--playshift-white);
}

#main.blog .blog-post-date {
    color: var(--playshift-orange);
}
#main.blog .single .blog-post-date {
    color: var(--playshift-white);
}
#main.blog .blog-post-title {
    background-color: #fff;

    margin-bottom: 2rem;
    padding: 2rem;
}
#main.blog .blog-post-title.single {
    background-color: var(--playshift-orange);
    border-top: .5rem solid var(--playshift-dark-orange);
    border-bottom: .5rem solid var(--playshift-dark-orange);
}
#main.blog .blog-post-title a {
    color: var(--playshift-black)!important;
    text-decoration: none;
    font-weight: 700;
}
#main.blog .blog-post-title a.category {
    color: var(--playshift-dark-orange)!important;
    font-weight: 300;
    font-size: 80%;
}

#main.team > .entry-header {
    align-items: center;
    text-align: center;
    color: var(--playshift-white);
}
#main.team .teams {
    padding: 2rem 0;
    display: flex;
    height: 100%;
}
#main.team .teams .card-body {
    text-align: center;
}
#main.team .teams img {
    width: 160px!important;
    height:  160px;
    object-fit: cover;

    display: block;
    margin: 0 auto;

    border-radius: 50%;
}

#main.contact > .entry-header {
    align-items: center;
    text-align: center;
    color: var(--playshift-white);
}

@media (min-width: 768px){
    #main.home > .entry-header .content p {
        display: block;
    }

    #main.home .badge {
        width: auto;
    }
    #main.home .platforms a {
        display: inline-block;
        margin: 0 .5rem .75rem;
    }
    #main.home .platforms a:first-child {
        margin-left: 0;
    }
    #main.home .platforms a:last-child {
        margin-right: 0;
    }
}
@media (min-width: 992px){
    #main.home > .entry-header .content {
        max-width: 50%;
        margin-right: 0;
    }
    #main.blog > .entry-header,
    #main.contact > .entry-header,
    #main.team > .entry-header {
        min-height: 50vh;
    }
}

footer {
    position: relative;
}


/*--------------------------------------------------------------
4. Alerts
--------------------------------------------------------------*/

.alert.alert-danger,
.alert.alert-warning,
.alert.alert-info,
.alert.alert-success {
    padding-left: 3.25rem;
}

.alert::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translate(0, -50%);
}

.alert-danger::before {
    content: "\f071";
}

.alert-warning::before {
    content: "\f06a";
}

.alert-info::before {
    content: "\f05a";
}

.alert-success::before {
    content: "\f058";
}

/*--------------------------------------------------------------
5. Breadcrumb
--------------------------------------------------------------*/

.breadcrumb {
    font-style: italic;
    font-size: 80%;
}

@media (max-width: 991px) {
    .breadcrumb {
        display: block !important;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

/*--------------------------------------------------------------
6. To Top Button
--------------------------------------------------------------*/


.top-button {
    right: 5%;
    bottom: 30px;
    opacity: 0;
    transition: opacity 1s;
}


.top-button.visible {
    opacity: 1;
}


/*--------------------------------------------------------------
7. Single Post
--------------------------------------------------------------*/

img {
    height: auto;
    max-width: 100%;
}

.wp-post-image {
    width: 100%;
}

.page-image img,
.post-image img {
    width: 100%;
    object-fit: contain;
    height: auto;
}

.featured-full-width-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[rel="prev"]:before {
    content: "« ";
}

[rel="next"]:after {
    content: " »";
}

.game-logo {
    width: auto;
    height: 120px;
}

/*--------------------------------------------------------------
8. Comments
--------------------------------------------------------------*/

.comments-area {
    font-size: 80%;
    padding-bottom: 2rem;
}


ul.comment-list {
    list-style: none;
    padding: 0;
}

ul.comment-list li {
    list-style: none;
}

.avatar {
    border-radius: 50%;
}

.comment-list ul.children {
    padding-left: 96px;
}

@media (max-width: 991px) {
    .comment-list ul.children ul.children {
        padding-left: 0;
    }
}

@media (min-width: 992px) {
    .comment-list ul.children ul.children ul.children {
        padding-left: 0;
    }
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

#cancel-comment-reply-link {
    margin-left: 1rem;
}

/* 
    Adding width to comment. 
    When using <pre> in comment, comment-content will not crashed
*/

@media (min-width: 768px) {
    .comment-content {
        width: calc(100% - 96px);
    }
}

/*--------------------------------------------------------------
9. Archive
--------------------------------------------------------------*/

@media (max-width: 767px) {
    .card-img-left img {
        border-top-left-radius: calc(.25rem - 1px);
        border-top-right-radius: calc(.25rem - 1px);
        width: 100%;
        height: auto;
    }
}

@media (min-width: 768px) {
    .card-img-left img {
        border-top-left-radius: calc(.25rem - 1px);
        border-bottom-left-radius: calc(.25rem - 1px);
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .card-img-left-md img {
        border-top-left-radius: calc(.25rem - 1px);
        border-top-right-radius: calc(.25rem - 1px);
        width: 100%;
        height: auto;
    }
}

@media (min-width: 992px) {
    .card-img-left-md img {
        border-top-left-radius: calc(.25rem - 1px);
        border-bottom-left-radius: calc(.25rem - 1px);
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
}

/*--------------------------------------------------------------
10. Widgets
--------------------------------------------------------------*/

.widget-area ul,
.bootscore-footer ul {
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

.widget-area ul li ul li {
    padding: 0 1rem;
}

.bootscore-footer {
    background: var(--playshift-grey);
}
.bootscore-info {
    background: var(--playshift-black);
    font-size: 75%;
}

#footer-menu li a {
    padding-left: 0;
    color: #fff;
}
#footer-menu li a.active {
    padding-left: 0;
    color: var(--playshift-orange);
}
#footer-menu .icon {
    display: block;
    width: 24px; height: 24px;
    background-size: contain;
    background-position: center center;
    background-color: transparent;
    background-repeat: no-repeat;

    filter: brightness(0) invert(1);
}
#footer-menu .icon.steam {
    background-image: url('img/icons/icon-steam-old.svg');
}
#footer-menu .icon.itch {
    background-image: url('img/icons/icon-itch-old.svg');
}
#footer-menu .icon.facebook {
    background-image: url('img/icons/icon-facebook.svg');
}
#footer-menu .icon.twitter {
    background-image: url('img/icons/icon-twitter.svg');
}
#footer-menu .icon.youtube {
    background-image: url('img/icons/icon-youtube.svg');
}
#footer-menu .icon.switch {
    background-image: url('img/icons/icon-switch.svg');
}


/*--------------------------------------------------------------
11. Utilities
--------------------------------------------------------------*/

/* 
Add width-100 class to element to stretch it to the entire width 
of the screen when element is in .container.
https://bootscore.me/documentation/width-height-classes/
*/

/* Hide horizontal scrollbars on Windows Chrome & Firefox */

body {
    overflow-x: hidden;
}

.width-100 {
    position: relative;
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

/* 
Add underline-0 class to <a>..</a> to disable underline on hover
*/

.underline-0,
.underline-0:hover,
.underline-0:focus {
    text-decoration: none !important;
}

/* 
Hide racaptcha v3 badge 
*/

.grecaptcha-badge {
    display: none !important;
}

/* 
Clear
*/

.clear-both {
    clear: both;
}

/* 
z-index
*/

.zi-1000 {
    z-index: 1000 !important;
}

.zi-1020 {
    z-index: 1020 !important;
}

.zi-1030 {
    z-index: 1030 !important;
}

.zi-1040 {
    z-index: 1040 !important;
}

.zi-1050 {
    z-index: 1050 !important;
}

.zi-1060 {
    z-index: 1060 !important;
}

.zi-1070 {
    z-index: 1070 !important;
}

.zi-n1 {
    z-index: -1 !important;
}

/*
Cursor
*/

.cursor-pointer {
    cursor: pointer;
}

/*
Focus
*/

.focus-0:focus {
    box-shadow: none !important;
}

/* 
Hover 
*/

.hover {
    transition: filter .3s;
}

.hover:hover {
    filter: brightness(0.95);
}

/* 
Hidden
*/

.hidden {
    visibility: hidden;
    display: none;
}

/*--------------------------------------------------------------
12. Colors
--------------------------------------------------------------*/

::selection {
    color: #fff;
    background-color: var(--bs-primary);
}

::-moz-selection {
    color: #fff;
    background-color: var(--bs-primary);
}

pre {
    background-color: var(--bs-light);
}

:focus {
    outline: none !important;
    outline: -webkit-focus-ring-color none !important;
    outline-color: -webkit-focus-ring-color none !important;
    outline-style: none !important;
    outline-width: 0 !important;
}

.btn-primary {
    background-color: var(--bs-primary)!important;
    border-color: var(--bs-primary)!important;
}

.btn-steam > div {
	border-radius: 0!important;
	padding: .75rem!important;
    background-color: var(--playshift-steam)!important;
    border-color: var(--playshift-steam)!important;
    color: var(--bs-white)!important;
}

.btn-itch > div {
	border-radius: 0!important;
	padding: .75rem!important;
    background-color: var(--playshift-itch)!important;
    border-color: var(--playshift-itch)!important;
    color: var(--bs-white)!important;
}

.btn-ns {
	border-radius: 0!important;
	padding: 0!important;
	/* background-color: var(--playshift-ns)!important;
    border-color: var(--playshift-ns)!important;
    color: var(--bs-white)!important; */
	background: transparent;
	border-color: transparent;
}

/*--------------------------------------------------------------
13. HTML Markups (Theme Unit Test Data)
--------------------------------------------------------------*/

/*
pre
*/

pre {
    padding: 1rem;
    border-radius: .25rem;
}

img {
    height: auto;
    max-width: 100%;
}

iframe {
    max-width: 100%;
}

pre {
    max-width: 100%;
    border-radius: .25rem;
}


/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/

.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
    overflow: auto;
    padding: .5rem;
    font-size: 1rem;
    background: rgba(0, 0, 0, .5);
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}