#main,#webglContainer {
    width: 100%;
    overflow-x: hidden
}

#main,#navbarToggler {
    background-repeat: no-repeat
}

#main,#navbrandText {
    font-family: Nunito,'Courier New',Courier,monospace
}

#mobileStoreLinks a,#storeLinks a {
    margin: 0 .2rem;
    text-decoration: none
}

#aboutGame,#gameInfo,#main,#mainFooter,#mainNavbarContent ul {
    max-width: 1920px
}

#main,#mainFooter,#webglContainer {
    overflow-x: hidden
}

#mobilePlay span,#mobileStoreLinks a,#storeLinks a,.no-effect a {
    text-decoration: none
}

#koomicsReadNowBtn,#playNowBtn {
    background-image: url(../design/bg/btn_play_now.webp)
}

@font-face {
    font-family: EnterSansman;
    src: url(../fonts/entsans.ttf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-stretch: normal
}

@font-face {
    font-family: EnterSansman;
    src: url(../fonts/entsani.ttf);
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    font-stretch: condensed
}

@font-face {
    font-family: Nunito;
    src: url(../fonts/Nunito-Regular.ttf);
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Nunito;
    src: url(../fonts/Nunito-Bold.ttf);
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Nunito;
    src: url(../fonts/Nunito-Italic.ttf);
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Nunito;
    src: url(../fonts/Nunito-ExtraBoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Nunito;
    src: url(../fonts/Nunito-LightItalic.ttf) format('truetype');
    font-weight: lighter;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Nunito;
    src: url(../fonts/Nunito-Medium.ttf) format('truetype');
    font-weight: medium;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Nunito;
    src: url(../fonts/Nunito-MediumItalic.ttf) format('truetype');
    font-weight: medium;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Asap;
    src: url(../fonts/Asap-Bold.ttf) format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: Asap;
    src: url(../fonts/Asap-Regular.ttf) format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Asap;
    src: url(../fonts/Asap-Light.ttf) format('truetype');
    font-style: normal;
    font-weight: lighter;
    font-display: swap
}

ins.adsbygoogle[data-ad-status=unfilled] {
    display: none!important
}

.custom-select-icon {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../design/dropdown.png) right center/1rem no-repeat content-box border-box;
    box-sizing: border-box
}

#koomicsReadNowBtn,#navbarToggler,.play-more-btn {
    background-position: center center
}

#main {
    position: static;
    margin: 0 auto;
    min-height: 100%;
    min-width: 360px;
    overflow-y: scroll;
    background-color: #fff;
    background-image: url(../design/bg/bg.png);
    background-position: right bottom
}

#main::-webkit-scrollbar {
    width: .75rem
}

#main::-webkit-scrollbar-track {
    background-color: #f5f5f5
}

#main::-webkit-scrollbar-thumb {
    width: .5rem;
    background-color: gray;
    outline: darkgray solid 1px
}

#aboutGame .content,.content-section {
    width: calc(100% - 330px)
}

.navbar {
    padding-bottom: .25rem!important
}

.content-section {
    position: relative;
    display: inline-block;
    margin: 0;
    height: auto;
    min-height: 600px
}

.inline-ads-160x600 {
    width: 160px;
    height: 600px;
    margin: 0
}

.inline-ads-300x600 {
    display: inline-block;
    width: 300px;
    height: 600px;
    margin: 0
}

.inline-ads-728x90 {
    display: inline-block;
    width: 728px;
    height: 90px;
    margin: 0
}

.floating-img {
    position: absolute;
    z-index: 5
}

.main-content {
    margin: 0 auto;
    overflow: auto
}

#webglContainer {
    position: relative;
    margin: 0;
    padding: 0;
    background: #e4eeff
}

.webgl-section {
    width: calc(100% - 320px)
}

#aboutGame {
    position: relative;
    display: block;
    margin: 3rem auto;
    padding: 0;
    color: #5354c0;
    width: 100%
}

#mobileContent {
    margin: 1rem 0;
    display: none
}

#gameInfo {
    display: block;
    padding: 1.5rem 0;
    margin: auto;
    background-color: #e5eeff;
    color: #5354c0
}

#aboutGame #corgi {
    bottom: -8rem;
    left: 0
}

#aboutGame #unicorn {
    top: -5rem;
    right: 0
}

.section-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#mainFooter,#mainFooter #bottom #links,#mainFooter #top,#mainNavbarContent,#otherAppIcons,.play-more-btn {
    position: relative
}

#aboutGame .content,#gameInfo .content {
    display: block;
    font-weight: 700;
    margin: 0 auto;
    max-width: 1920px;
    position: relative;
    font-style: normal;
    z-index: 10
}

#gameInfo .content {
    width: calc(100% - 280px)
}

#aboutGame p {
    margin-top: 1rem;
    font-size: 1.5rem
}

#gameInfo ul {
    list-style-type: disc!important;
    padding-left: 2rem
}

#gameInfo h3 {
    font-weight: bolder
}

.play-more-btn {
    display: flex;
    color: #fff;
    width: 297px;
    height: 97px;
    font-size: 2.5rem;
    text-align: center;
    font-family: Asap,'Courier New',Courier,monospace;
    font-weight: 700;
    background-color: transparent;
    background-size: contain;
    border: none;
    margin: 0 auto;
    justify-content: center;
    align-items: center
}

.no-webp #koomicsReadNowBtn,.no-webp #playNowBtn {
    background-image: url(../design/bg/btn_play_now.png)
}

#moreBtn {
    font-size: 2.4rem;
    background-image: url(../design/characters/btn_more.png)
}

#navbarToggler {
    width: 47px;
    height: 37px;
    margin-left: .5rem;
    padding: 0!important;
    border-width: 0;
    box-shadow: none;
    outline: 0;
    background-size: contain
}

#navbarToggler[aria-expanded=false] {
    background-image: url(../design/menu_open.webp)
}

#navbarToggler[aria-expanded=true] {
    background-image: url(../design/menu_close.webp)
}

#navbrandText {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
    color: #5354c0;
    font-weight: 700
}

.nav-item {
    line-height: 1rem;
    margin: .3rem 0;
    max-width: 200px
}

.nav-link {
    line-height: 1rem!important;
    padding: .5rem 1rem!important;
    display: inline-block!important;
    color: #5354c0!important
}

.nav-link.active {
    border-radius: 1rem;
    background-color: #5354c0;
    color: #fff!important
}

#koomicsReadNowBtn,#readComicBtn,.no-effect,.no-effect:hover {
    background-color: transparent
}

.no-effect {
    color: #fff
}

#mainNavbarContent ul {
    width: 80%;
    margin-left: 1rem;
    font-weight: 400;
    font-size: 1.35rem
}

#mobileStoreLinks,.comics-chapter-banner {
    display: none
}

#mobileStoreLinks a,#storeLinks a,.app-icon-link,.social-page-link {
    display: inline-block
}

#mobileFollow {
    font-weight: 700;
    text-align: center;
    color: #6053bc
}

#storeLinks {
    display: flex
}

#mobileStoreLinks a {
    width: 85%
}

#appleStoreBtn,#googlePlayStoreBtn {
    display: block;
    width: 99%;
    height: auto;
    margin: 0 auto;
    max-width: 180px;
    aspect-ratio: auto 348/104
}

#appleStoreBtn {
    min-width: 79px
}

#googlePlayStoreBtn {
    min-width: 90px
}

#mainFooter {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    z-index: 1000
}

#mainFooter #penguin {
    position: absolute;
    bottom: -7.5rem;
    right: 0
}

#mainFooter #top {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    margin: 0
}

#mainFooter #bottom {
    padding: 0;
    margin: 0;
    background-color: #79a7fd;
    height: 180px
}

#mainFooter #bottom #links {
    padding-top: 1rem;
    display: block;
    width: auto;
    margin: 0 auto
}

#mainFooter #bottom #links .external-link {
    display: inline-block;
    margin: 0 .5rem
}

#mainFooter #bottom #links a {
    color: #fff
}

#socialLinks {
    display: block;
    position: absolute;
    top: .5rem;
    left: -3rem
}

#otherAppIcons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: .85rem 0;
    z-index: 1000
}

#readFandomPage {
    background-color: #6053bc;
    color: #fff;
    font-size: 1.2rem;
    padding: .3rem 1rem;
    border-radius: 2rem
}

#fandomIcon {
    display: inline-block;
    width: 2.5rem;
    height: auto;
    aspect-ratio: auto 147/126;
    vertical-align: top
}

#fandomPageLink {
    color: #6053bc;
    font-weight: 700;
    text-decoration: underline
}

.loading-progress,.webgl-content .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.webgl-content .logo {
    background: url('../images/progressLogo.Light.png') center/contain no-repeat;
    width: 154px;
    height: 130px
}

#mobilePlay,.youtube-player .play {
    background-position: center;
    cursor: pointer
}

#koomicsReadNowBtn,#mobilePlay,#readComicBtn,.youtube-player .play {
    background-size: contain;
    background-repeat: no-repeat
}

.webgl-content .loading-progress {
    height: 18px;
    width: 141px;
    margin-top: 90px
}

.webgl-content .loading-progress .empty {
    background: url('../images/progressEmpty.Light.png') right/cover no-repeat;
    float: right;
    width: 100%;
    height: 100%
}

.webgl-content .loading-progress .full {
    background: url('../images/progressFull.Light.png') left/cover no-repeat;
    float: left;
    width: 0%;
    height: 100%
}

.webgl-content .logo.Dark {
    background-image: url('../images/progressLogo.Dark.png')
}

.webgl-content .loading-progress.Dark .empty {
    background-image: url('../images/progressEmpty.Dark.png')
}

.webgl-content .loading-progress.Dark .full {
    background-image: url('../images/progressFull.Dark.png')
}

.webgl-content .footer {
    margin-top: 5px;
    height: 38px;
    line-height: 38px;
    font-family: Helvetica,Verdana,Arial,sans-serif;
    font-size: 18px
}

.fullscreen,.title,.webgl-content .footer .webgl-logo {
    height: 100%;
    display: inline-block;
    background: center no-repeat
}

.webgl-content .footer .webgl-logo {
    background-image: url('../images/webgl-logo.png');
    width: 204px;
    float: left
}

.webgl-content .footer .title {
    margin-right: 10px;
    float: right
}

.webgl-content .footer .fullscreen {
    background-image: url('../images/fullscreen.png');
    width: 38px;
    float: right;
    cursor: pointer
}

#mobileSnakeLogo {
    position: relative;
    margin: 0 auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: 266px;
    aspect-ratio: auto 267/266
}

#mobileDownload {
    width: 50%;
    position: relative
}

#mobileDownload span {
    position: absolute;
    bottom: .5rem;
    display: block;
    width: 100%;
    font-weight: 700;
    text-align: center;
    font-size: 1.5rem;
    color: #fff
}

#mobilePlay {
    position: relative;
    display: block;
    margin: 0 auto;
    background-image: url(../design/story/biomes/btn_play.webp);
    width: 45%;
    text-align: center
}

.no-webp #mobilePlay {
    background-image: url(../design/story/biomes/btn_play.png)
}

#mobilePlay span {
    position: absolute;
    top: 50%;
    display: block;
    font-style: normal;
    width: 100%;
    color: #fff;
    font-size: 1.8rem;
    transform: translateY(30%)
}

#mobileSocial {
    display: flex;
    justify-content: center
}

.mobile-social-link {
    display: inline-block;
    margin: 0 1rem
}

.youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000
}

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: 0 0
}

.youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s
}

.youtube-player img:hover {
    -webkit-filter: brightness(75%);
    -moz-filter: brightness(75%);
    filter: brightness(75%)
}

.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background-image: url("../design/home/yt_play.png")
}

@keyframes show-fade {
    from {
        opacity: .2
    }

    to {
        opacity: 1
    }
}

.show-fade {
    display: block!important;
    animation-name: show-fade;
    animation-duration: 1.5s
}

.glow-wow-img {
    z-index: 1000;
    position: absolute;
    width: 70px
}

#headGlow {
    bottom: -1rem;
    left: -1rem
}

#headWow {
    top: -.5rem;
    left: 40px
}

#koomicsReadNowBtn {
    position: relative;
    color: #fff;
    border: none;
    font-family: Asap,'Courier New',Courier,monospace;
    font-weight: 700;
    font-size: 2.25rem;
    width: 250px;
    height: 82px
}

#comicsCoverArts {
    margin: 1rem auto
}

#readComicBtn {
    z-index: 10000;
    position: absolute;
    font-family: Nunito,monospace;
    font-weight: 700;
    font-size: .8rem;
    bottom: -12px;
    right: 0;
    width: 100px;
    height: 32.66px;
    color: #fff;
    border: none;
    background-image: url(../design/home/btn_read-comic.webp)
}

.no-webp #readComicBtn {
    background-image: url(../design/home/btn_read-comic.png)
}

#chapterComingSoonBanner,.chapter-readNow-banner {
    color: #fff;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.chapter-readNow-banner {
    display: none;
    z-index: 1000
}

.chapter-readNow-banner:hover+.comic-chapter-cover-art,.comic-chapter-cover-art:hover {
    filter: brightness(50%)
}

.comic-cover-art-container:hover .chapter-readNow-banner {
    display: block;
    color: #fff;
    opacity: 1
}

#chapterComingSoonBanner img {
    display: block;
    width: 2.5rem;
    margin: .5rem auto
}

#comicsCoverBanner {
    font-family: eurostile-extended,EnterSansman,'Courier New',Courier,monospace;
    color: #fff;
    top: 0;
    right: 0;
    width: 95%;
    padding: .75rem;
    text-indent: 2rem;
    margin-bottom: 1rem;
    align-self: flex-end;
    background: linear-gradient(90.01deg,#8053e0 24.66%,rgba(240,146,255,.29) 111.24%);
    clip-path: polygon(1% 0%,100% 0%,100% 100%,0% 100%)
}

@media screen and (min-width: 1720px) {
    .comic-chapter-cover-art {
        width:360px
    }
}

@media screen and (min-width: 1600px) {
    #otherAppIcons .app-icon {
        width:90px;
        height: 90px
    }

    .comics-chapter-banner {
        width: 330px;
        height: 72.42px
    }
}

@media screen and (max-width: 1600px) {
    #otherAppIcons .app-icon {
        width:90px;
        height: 90px
    }

    .comics-chapter-banner {
        width: 330px;
        height: 72.42px
    }
}

@media screen and (max-width: 1440px) {
    .app-icon-link:nth-child(n+7) {
        display:none
    }

    .glow-wow-img {
        width: 65px
    }
}

@media screen and (min-width: 1440px) {
    #otherAppIcons .app-icon {
        width:80px;
        height: 80px
    }
}

@media screen and (max-width: 1030px) {
    #otherAppIcons .app-icon {
        padding:1rem .5rem;
        width: 75px;
        height: 75px
    }

    .comics-chapter-banner {
        width: 245px;
        height: 53.763px
    }

    .glow-wow-img {
        width: 60px
    }

    .webgl-section {
        width: 100%
    }

    .inline-ads-160x600,.inline-ads-300x600,.inline-ads-728x90 {
        display: none!important
    }

    #corgi,#penguin,#unicorn {
        display: none
    }
}

@media screen and (max-width: 1024px) {
    #koomicsReadNowBtn {
        display:block;
        margin: 1rem auto 0;
        width: 200px;
        height: 65.32px;
        font-size: 1.5rem
    }
}

@media screen and (max-width: 912px) {
    .container-fluid {
        padding:0!important
    }

    #mainNavbarContent {
        background-color: #fff;
        background-image: url(../design/bg/pattern_hexagon-mirrored.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 1rem;
        padding: .5rem
    }

    #appleStoreBtn,#googlePlayStoreBtn {
        max-width: 220px
    }

    #storeLinks {
        top: .5rem;
        right: .5rem;
        display: block;
        width: 55%;
        position: absolute
    }

    #storeLinks a {
        display: block;
        margin: 0 auto .5rem
    }

    #otherAppIcons .app-icon {
        padding: .5rem;
        width: 60px;
        height: 60px
    }

    #mainNavbarContent ul {
        width: 50%;
        margin: 0
    }

    #aboutGame .content,#gameInfo .content {
        width: 80%
    }

    .navbar-brand {
        transform: translateX(-15%);
        margin: 0 auto!important
    }

    .navbar-brand img {
        display: none!important
    }

    #navbrandText {
        font-size: 2rem
    }

    #mainFooter #top {
        padding: 1rem 0
    }
}

@media screen and (max-width: 760px) {
    #mobileStoreLinks,#socialLinks {
        display:flex
    }

    #main {
        background-image: unset;
        background-position: unset;
        background-repeat: unset
    }

    #aboutGame {
        margin-top: 1rem;
        margin-bottom: 1rem
    }

    #aboutGame p {
        font-size: unset
    }

    #moreBtn {
        font-size: 1.5rem
    }

    .play-more-btn {
        width: 200px;
        height: 65.32px;
        font-size: 2rem
    }

    #readFandomPage {
        font-size: 1rem;
        padding: .25rem .9rem;
        border-radius: 1.5rem
    }

    #socialLinks {
        justify-content: center;
        position: relative;
        margin: 0 auto;
        top: unset;
        left: unset
    }

    #mobileContent {
        display: block
    }

    #comicsCoverBanner {
        width: 95%;
        padding: .5rem
    }
}

@media screen and (max-width: 620px) {
    .app-icon-link:nth-child(n+6) {
        display:none
    }
}