/* Prevent fixed navbar from covering up deep-linked anchors. */
:target
{
    /* Safari < 14.5 needs this non-standard property */
    scroll-snap-margin-top: 4em;
    scroll-margin-top: 4em;
}

.navbar-top
{
    z-index: 101010;
    position: fixed;
    width: 100%;
    max-width: 100vw;
    top: 0;
    right: 0;
    left: 0;
    transition-property: background-color;
    transition-timing-function: ease-in-out;
    transition-duration: 250ms;
    background-color: transparent;
}

body.reduce-motion .navbar-top,
body.reduce-motion .navbar-top:after
{
    transition-property: none;
}

@media screen and (prefers-reduced-motion)
{
    .navbar-top
    {
        transition-property: none;
    }
}

#navbar
{
    background-color: var(--page-bg);
    color: var(--text);
    border-bottom: 0.2rem solid transparent;
}

#navbar.scrolled
{
    border-bottom: 0.2rem solid var(--text);
}

.navbar-top ul
{
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    gap: .5em;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
    max-width: 130rem;
    font-size: 0.85em;
    justify-content: space-between;
    align-items: center;
}

.navbar-top li
{
    flex: 0 0 auto;
    margin: 0;
    padding: 0.125em 0;
    position: relative;
    font-weight: 700;
    letter-spacing: -0.0075em;
    border-radius: 1em;
    color: var(--text);
    display: flex;
    gap: 0.125em;
    align-items: center;
    justify-content: start;
    order: 4;
}

.navbar-top li a
{
    text-decoration: none;
}

.navbar-top li a::after
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.navbar-top li::before
{
    content: '';
    display: block;
    top: 0;
    right: 0;
    width: 1em;
    height: 1em;
    -webkit-mask-size: contain;
    -webkit-mask-position: 0 50%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--text);
}

/* Search form in navbar */

#nav-search-container
{
    padding: 0;
    order: 3;
    position: relative;
    flex: 1 1 auto;
}

#nav-search-container::before
{
    display: none;
}

#nav-search-container form
{
    align-items: center;
    padding: 0;
    margin: 0;
    display: contents;
}

#nav-search-field
{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    -webkit-appearance: none;
    z-index: 9999;

    background: transparent;
    color: transparent;

    border-width: .1em;
    border-style: solid;
    border-color: transparent;
    border-radius: 2em;

    padding: .125em .25em .125em .625em;
    margin: 0;

    font-size: .85em;
    caret-color: var(--text);

    transition-property: width, background, border-color, color;
    transition-duration: 300ms;
    transition-timing-function: ease; 
}

#nav-search-field:placeholder-shown
{
    text-overflow: ellipsis;
}
#nav-search-field::placeholder
{
    color: transparent;
}
#nav-search-field.expanded::placeholder,
#nav-search-field:focus::placeholder,
input#whopper:checked + div.whopper #nav-search-field::placeholder
{
    color: var(--text);
    opacity: .5;
}
#nav-search-field.expanded,
#nav-search-field:focus,
input#whopper:checked + div.whopper #nav-search-field
{
    flex: 1 1 auto;
    cursor: auto;
    border-color:  var(--text);
    color: var(--text);
}
input#whopper:checked + div.whopper #nav-search-field
{
    font-size: .8em;
    flex: 0 1 calc(100% - 2em);
    height: 1.6em;
}

#nav-search-field-icon
{
    /* -webkit-mask-image: url("images/search.fef28846d36e.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 43.92 43.92' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m43.04 36.8s-1.56-1.54-4.36-4.12c-3.38-3.11-8.12-6.36-8.12-6.36s-.71 1.19-1.88 2.36-2.36 1.88-2.36 1.88 3.3 4.79 6.36 8.12c2.65 2.88 4.12 4.36 4.12 4.36 1.17 1.17 5.07 1.17 6.24 0s1.17-5.07 0-6.24zm-11.38-20.97c0-8.74-7.09-15.83-15.83-15.83s-15.83 7.09-15.83 15.83 7.09 15.83 15.83 15.83 15.83-7.09 15.83-15.83zm-15.83 11.63c-6.42 0-11.63-5.21-11.63-11.63s5.21-11.63 11.63-11.63 11.63 5.21 11.63 11.63-5.21 11.63-11.63 11.63zm-6.61-18.25c-2.2 2.2-3.74 6.26-1.54 8.46s.54-1.96 2.39-4.46c1.92-2.6 9.82-3.33 7.61-5.54-2.2-2.2-6.26-.66-8.46 1.54z' fill='%23231f20' fill-rule='evenodd'/%3E%3C/svg%3E");
    position: absolute;
    opacity: 1;
    transition: opacity .3s ease;

    top: 0;
    right: 0;
    width: 1em;
    height: 100%;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--text);
}

@media (min-width: 670px) and (max-width: 1100px)
{
    #nav-search-container:has(#nav-search-field:focus)+li#nav-news,
    #nav-search-container:has(#nav-search-field:focus)+li#nav-news+li#nav-games,
    #nav-search-container:has(#nav-search-field:focus)+li#nav-news+li#nav-games+li#nav-dev,
    #nav-search-container:has(#nav-search-field:focus)+li#nav-news+li#nav-games+li#nav-dev+li#nav-help,
    #nav-search-container:has(#nav-search-field:focus)+li#nav-news+li#nav-games+li#nav-dev+li#nav-help+li#nav-account,
    #nav-search-container:has(#nav-search-field.expanded)+li#nav-news,
    #nav-search-container:has(#nav-search-field.expanded)+li#nav-news+li#nav-games,
    #nav-search-container:has(#nav-search-field.expanded)+li#nav-news+li#nav-games+li#nav-dev,
    #nav-search-container:has(#nav-search-field.expanded)+li#nav-news+li#nav-games+li#nav-dev+li#nav-help,
    #nav-search-container:has(#nav-search-field.expanded)+li#nav-news+li#nav-games+li#nav-dev+li#nav-help+li#nav-account
{
        display: none;
    }
}

#nav-search-field.expanded + #nav-search-field-icon,
#nav-search-field:focus + #nav-search-field-icon,
input#whopper:checked + div.whopper #nav-search-field + #nav-search-field-icon
{
    opacity: 0;
    pointer-events: none;
}

#nav-search-field::-webkit-search-cancel-button
{
    -webkit-appearance: none;
    display: none;
    z-index: 10000;

    width: .75em;
    height: .75em;
    -webkit-mask-size: contain;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    /* -webkit-mask-image: url("images/clear.6b2cfa894007.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='23.719' viewBox='0 0 23.719 23.719' width='23.719' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m943.852 281.7a11.852 11.852 0 1 1 11.848-11.848 11.852 11.852 0 0 1 -11.848 11.848zm5.805-15.947a1 1 0 0 0 -1.414-1.414l-4.243 4.247-4.243-4.243a1 1 0 0 0 -1.414 1.414l4.243 4.243-4.243 4.243a1 1 0 0 0 1.414 1.414l4.243-4.243 4.243 4.243a1 1 0 0 0 1.414-1.414l-4.243-4.243z' fill='%23312f28' fill-rule='evenodd' transform='translate(-932 -258)'/%3E%3C/svg%3E");
    background-color: var(--text);
}

#nav-search-field.expanded::-webkit-search-cancel-button,
#nav-search-field:focus::-webkit-search-cancel-button,
input#whopper:checked + div.whopper #nav-search-field::-webkit-search-cancel-button
{
    display: block;
}

#nav-search-results
{
    display: none;

    background: var(--card-bg);
    position: absolute;
    top: 2.1em;
    left: 1.1em;
    max-width: 16em;

    font-size: .87em;

    border-radius: 0 .3em .3em .3em;
    border: .1em solid var(--text);
    box-shadow: 0 0 .2em rgba(0,0,0,.3);

    z-index: 10001;
}

#nav-search-results ul
{
    list-style: none;
    display: block;
    margin: 0;
    padding: .25em;
    position: relative;
}

#nav-search-results li
{
    display: block;

    margin: 0;
    width: 15em;
    height: 1.5em;
    max-width: 15em;
    color: var(--text);

    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;

    grid-template-columns: auto;
    grid-gap: 0;
    align-items: start;
    justify-items: start;
}

#nav-search-results li a
{
    display: block;
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0.1em 0.5em 0.35em .5em;

    border-radius: .2em;
    overflow: clip;
    text-overflow: ellipsis;
}
#nav-search-results li a:hover
{
    background-color: var(--link);
    color: var(--card-bg);
}

#nav-search-results li:before
{
    display: none;
}

#nav-search-field.expanded + #nav-search-field-icon + #nav-search-results,
#nav-search-field:focus + #nav-search-field-icon + #nav-search-results
{
    /* display: block; */
}

input#whopper:checked + div.whopper #nav-search-results
{
    font-size: .7em;
}
input#whopper:checked + div.whopper #nav-search-results li
{
    max-width: 13em;
}

/* Hamburger Menu Active */

input#whopper
{
    margin: 0;
    padding: 0;
    border: 0;
    
    order: 5;

    position: relative;
    display: block;
    visibility: visible;

    font: inherit;
    font-weight: 700;
    color: var(--text);

    align-items: center;
    justify-items: start;

    flex: 0 0 2em;
    width: 2em;
    height: 2em;
    cursor: pointer;
    z-index: 111111;
    pointer-events: all;
    -webkit-appearance: none;
    appearance: none;
}

input#whopper::before
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-size: contain;
    -webkit-mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    /* -webkit-mask-image: url("images/menu.a4220770d407.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='95' viewBox='0 0 95 95' width='95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1510 28a32 32 0 1 1 -32 32 32 32 0 0 1 32-32zm-12 20h24a2 2 0 0 1 0 4h-24a2 2 0 0 1 0-4zm0 10h24a2 2 0 0 1 0 4h-24a2 2 0 0 1 0-4zm0 10h24a2 2 0 0 1 0 4h-24a2 2 0 0 1 0-4z' fill='%236c00ff' fill-rule='evenodd' transform='translate(-1463 -13)'/%3E%3C/svg%3E");

    background-color: var(--text);
    background-size: contain;
}

label.whopper
{
    display: none;
}

div.whopper
{
    --page-bg: var(--psd-lightest-gray);
    --text: var(--screen-black);
    
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    gap: 0.25em;
    top: 0;
    right: -120vw;
    padding: .5em;
    background: var(--page-bg);
    color: var(--text);
    border-radius: 0 0 0 0.25em;
    border: 0.2rem solid var(--text);
    border-top: 0;
    border-right: 0;

    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    transition-property: right, transform;
    
    transform: skew(50deg, 0deg);  
        
    pointer-events: none;
}

input#whopper:checked + div.whopper
{
    right: 0;
    pointer-events: all;
    
    transform: skew(0deg, 0deg);
}

input#whopper:checked::before
{
    background: var(--purple);
}

input#whopper:checked + div.whopper > li:hover
{
    color: var(--purple);
}

input#whopper:checked + div.whopper > li:hover::before
{
    background-color: var(--purple);
}

li#nav-buy
{
    align-self: center;
    justify-self: end;
    white-space: nowrap;
    
    order: 5;
}


@media (min-width: 670px)
{
    /* Hamburger Menu Hidden */
    div.whopper,
    input#whopper:checked + div.whopper
    {
        font-size: 1em;
        display: contents;
        --page-bg: inherit;
        --text: inherit;
        pointer-events: all;
    }

    input#whopper
    {
        pointer-events: none;
        visibility: hidden;
        position: absolute;
    }
}

li#nav-home
{
    flex: 0 0 2.5em;
    overflow: clip;
    border-radius: 0;
    order: 1;
    width: 2.5em;
    height: 1.5em;
    padding: 0;
    whitespace: nowrap;
}

@media (min-width: 1100px)
{
    li#nav-home
    {
        flex: 0 0 6em;
        width: 6em;
        height: 2em;
    }
}

li#nav-s2
{
    order: 2;
    flex: 1 0 2.25em;
    height: 1.75em;
    width: 2.25em;
    border-radius: 0;
    whitespace: nowrap;
    color: transparent;
    overflow: clip;
    
    /* background-image: url("images/s2-nav.9f32e4408c85.svg"); */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0% center;
    
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129.56 105.91'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23ffac00;%7D%3C/style%3E%3C/defs%3E%3Cg id='Season_2'%3E%3Cg id='S2_box'%3E%3Cpath d='M14.08,1h101.4c7.22,0,13.08,5.86,13.08,13.08v77.75c0,7.22-5.86,13.08-13.08,13.08H14.08c-7.22,0-13.08-5.86-13.08-13.08V14.08C1,6.86,6.86,1,14.08,1Z'/%3E%3Cpath class='cls-2' d='M115.48,2c6.67,0,12.08,5.41,12.08,12.08v77.76c0,6.67-5.41,12.08-12.08,12.08H14.08c-6.67,0-12.08-5.41-12.08-12.08V14.08C2,7.41,7.41,2,14.08,2h101.4M115.48,0H14.08C6.32,0,0,6.32,0,14.08v77.76c0,7.76,6.32,14.08,14.08,14.08h101.4c7.76,0,14.08-6.32,14.08-14.08V14.08c0-7.76-6.32-14.08-14.08-14.08h0Z'/%3E%3Cg id='Symbol'%3E%3Crect class='cls-2' x='82.21' y='74.81' width='26.18' height='16.46' transform='translate(190.6 166.08) rotate(180)'/%3E%3Cpath class='cls-2' d='M82.69,74.81c-5.74,0-8.75-2.76-9.42-6.93-3-18.67,37.14-1.19,37.14-32.05,0-12.88-11.04-22.09-26.53-22.09-16.89,0-28.04,9.64-28.26,24.47h18.14c.43-4.87,4.17-8.01,10.12-8.01,4.76,0,7.9,2.27,7.9,5.63,0,14.18-37.79,1.08-37.79,31.73,0,14.4,11.26,23.71,28.69,23.71s6.5-16.46,0-16.46Z'/%3E%3Cpath class='cls-1' d='M17.03,64.31h18.41c.43,6.39,4.76,10.5,11.26,10.5,5.74,0,9.42-2.71,9.42-6.93,0-12.78-37.14-1.19-37.14-32.05,0-12.88,11.04-22.09,26.53-22.09,16.89,0,28.04,9.64,28.26,24.47h-18.19c-.43-4.87-4.11-8.01-10.07-8.01-4.76,0-7.9,2.27-7.9,5.63,0,14.18,37.79,1.08,37.79,31.73,0,14.4-11.26,23.71-28.69,23.71s-29.13-10.61-29.67-26.96Z'/%3E%3Cpath class='cls-2' d='M109.57,42.77l-26.87.61c-11.18,2.73-28.7,3.31-28.7,24.18,0,2.15.13,3,.41,4.63,8.22-7.1,15.66-8.52,20.5-9.73,8.14-2.03,29.83-1.38,34.66-19.68Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
li#nav-s2::before
{
    display: none;
}

li#nav-home::before
{
    -webkit-mask-size: contain;
    /* -webkit-mask-image: url("images/playdate-logo-stacked.97602f597e45.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 380.99 242.57' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m57.26 35.73c4.47-5.96 10.93-14.24 26.99-14.24 25.17 0 38.75 22.35 38.75 47.52 0 29.47-16.89 49.34-39.9 49.34-15.56 0-22.52-8.61-25.83-12.75v32.1h-37.93v-114.05h37.92v12.09zm0 54.15c2.32 1.65 5.13 3.81 10.1 3.81 7.29 0 16.06-5.96 16.06-23.68 0-12.42-4.14-23.51-15.73-23.51-4.14 0-6.96 1.49-10.43 3.64z'/%3E%3Cpath d='m129.81 0h38.08v114.38h-38.08z'/%3E%3Cpath d='m271.36 114.38h-38.08v-12.09c-4.64 6.13-11.42 14.74-27.98 14.74-19.21 0-29.97-13.58-29.97-29.8 0-20.03 16.06-31.29 35.93-31.29 9.93 0 17.05 2.32 22.02 3.97 0-5.3-.17-12.75-6.62-18.05-4.64-3.81-9.6-3.97-12.25-3.97-11.59 0-18.38 6.79-23.18 11.59l-11.26-9.44c8.11-9.11 19.87-21.19 46.69-21.19 18.05 0 26.49 5.3 29.47 7.29 15.07 9.6 15.23 23.18 15.23 33.11v55.14zm-38.08-38.91c-2.98-.66-5.13-1.16-8.28-1.16-10.1 0-13.08 6.62-13.08 11.09 0 4.97 3.48 9.77 9.6 9.77 5.46 0 8.61-2.98 11.76-6.29v-13.42z'/%3E%3Cpath d='m269.31 23.65h40.07c5.13 16.56 10.93 34.77 13.91 50.01 4.3-15.56 5.46-18.88 16.39-50.01h30.3l-35.27 82.62c-4.8 10.76-11.09 25.01-24.34 33.45s-29.31 8.44-41 8.28v-14.24c19.64-1.33 26.26-12.75 34.38-27.16l-34.44-82.95z'/%3E%3Cpath d='m65.9 125.68h38.08v113.25h-38.08v-11.92c-3.64 5.13-10.43 14.57-27.32 14.57-25.17 0-38.58-21.86-38.58-47.69s13.41-49.84 39.24-49.84c16.06 0 22.52 7.95 26.66 13.08zm0 47.02c-2.98-1.99-5.8-3.81-10.43-3.81-8.94 0-16.06 8.44-16.06 24.5 0 12.75 5.13 22.68 15.73 22.68 4.63 0 7.45-1.65 10.76-3.48v-39.9z'/%3E%3Cpath d='m207.75 238.93h-38.08v-12.09c-4.63 6.13-11.42 14.74-27.98 14.74-19.21 0-29.97-13.58-29.97-29.8 0-20.03 16.06-31.29 35.93-31.29 9.93 0 17.05 2.32 22.02 3.97 0-5.3-.17-12.75-6.62-18.05-4.64-3.81-9.6-3.97-12.25-3.97-11.59 0-18.38 6.79-23.18 11.59l-11.26-9.44c8.11-9.11 19.87-21.19 46.69-21.19 18.05 0 26.49 5.3 29.47 7.29 15.07 9.6 15.23 23.18 15.23 33.11v55.14zm-38.08-38.91c-2.98-.66-5.13-1.16-8.28-1.16-10.1 0-13.08 6.62-13.08 11.09 0 4.97 3.48 9.77 9.6 9.77 5.46 0 8.61-2.98 11.76-6.29z'/%3E%3Cpath d='m223.84 133.95h37.92v22.19h15.73v21.69h-15.73v30.63c0 3.97 0 13.91 10.6 13.91 1.99 0 3.81-.34 5.8-.83l4.47 12.25c-5.46 3.48-13.41 8.78-27.15 8.78-8.61 0-17.72-2.48-24.01-8.61-7.12-7.12-7.62-15.9-7.62-23.68v-32.46h-10.1v-21.69h10.1v-22.19z'/%3E%3Cpath d='m377.51 218.06c-4.47 6.29-16.89 23.51-44.7 23.51-32.12 0-51.49-20.37-51.49-48.68s19.7-49.17 49.51-49.17c12.42 0 21.86 3.48 28.31 7.62 21.86 13.58 21.86 37.91 21.86 49.67h-61.76c.83 5.3 1.99 11.09 8.61 15.73 4.8 3.48 9.77 4.64 15.4 4.64 12.42 0 19.87-7.45 24.34-11.93l9.93 8.61zm-32.95-35.76c-.33-5.63-.99-18.21-13.08-18.21-11.09 0-12.75 11.93-13.58 18.21z'/%3E%3C/svg%3E");
}

@media (min-width:1100px)
{
    li#nav-home::before
    {
        
        -webkit-mask-size: contain;
        /* -webkit-mask-image: url("images/playdate-logo.7a56f6286e6f.svg"); */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 287 58.2' viewBox='0 0 287 58.2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.9 14c1.8-2.3 4.3-5.6 10.6-5.6 9.9 0 15.2 8.8 15.2 18.7 0 11.6-6.6 19.4-15.7 19.4-6.1 0-8.8-3.4-10.1-5v12.6h-14.9v-44.8h14.9zm0 21.3c.9.6 2 1.5 4 1.5 2.9 0 6.3-2.3 6.3-9.3 0-4.9-1.6-9.2-6.2-9.2-1.6 0-2.7.6-4.1 1.4z'/%3E%3Cpath d='m43.4 0h15v44.9h-15z'/%3E%3Cpath d='m99 44.9h-15v-4.7c-1.8 2.4-4.5 5.8-11 5.8-7.5 0-11.8-5.3-11.8-11.7 0-7.9 6.3-12.3 14.1-12.3 3.9 0 6.7.9 8.7 1.6 0-2.1-.1-5-2.6-7.1-1.8-1.5-3.8-1.6-4.8-1.6-4.6 0-7.2 2.7-9.1 4.6l-4.4-3.7c3.2-3.6 7.8-8.3 18.3-8.3 7.1 0 10.4 2.1 11.6 2.9 5.9 3.8 6 9.1 6 13zm-14.9-15.2c-1.2-.3-2-.5-3.3-.5-4 0-5.1 2.6-5.1 4.4 0 2 1.4 3.8 3.8 3.8 2.1 0 3.4-1.2 4.6-2.5z'/%3E%3Cpath d='m98.2 9.3h15.8c2 6.5 4.3 13.7 5.5 19.6 1.7-6.1 2.1-7.4 6.4-19.6h11.9l-13.9 32.5c-1.9 4.2-4.4 9.8-9.6 13.1s-11.5 3.3-16.1 3.3v-5.6c7.7-.5 10.3-5 13.5-10.7z'/%3E%3Cpath d='m161.3.3h15v44.5h-15v-4.7c-1.4 2-4.1 5.7-10.7 5.7-9.9 0-15.2-8.6-15.2-18.7 0-10.3 5.3-19.6 15.4-19.6 6.3 0 8.8 3.1 10.5 5.1zm0 18.5c-1.2-.8-2.3-1.5-4.1-1.5-3.5 0-6.3 3.3-6.3 9.6 0 5 2 8.9 6.2 8.9 1.8 0 2.9-.6 4.2-1.4z'/%3E%3Cpath d='m217.1 44.8h-15v-4.7c-1.8 2.4-4.5 5.8-11 5.8-7.5 0-11.8-5.3-11.8-11.7 0-7.9 6.3-12.3 14.1-12.3 3.9 0 6.7.9 8.7 1.6 0-2.1-.1-5-2.6-7.1-1.8-1.5-3.8-1.6-4.8-1.6-4.6 0-7.2 2.7-9.1 4.6l-4.4-3.7c3.2-3.6 7.8-8.3 18.3-8.3 7.1 0 10.4 2.1 11.6 2.9 5.9 3.8 6 9.1 6 13zm-15-15.3c-1.2-.3-2-.5-3.3-.5-4 0-5.1 2.6-5.1 4.4 0 2 1.4 3.8 3.8 3.8 2.1 0 3.4-1.2 4.6-2.5z'/%3E%3Cpath d='m223.4 3.6h14.9v8.7h6.2v8.5h-6.2v12c0 1.6 0 5.5 4.2 5.5.8 0 1.5-.1 2.3-.3l1.8 4.8c-2.1 1.4-5.3 3.4-10.7 3.4-3.4 0-7-1-9.4-3.4-2.8-2.8-3-6.2-3-9.3v-12.7h-4v-8.5h4v-8.7z'/%3E%3Cpath d='m283.8 36.6c-1.8 2.5-6.6 9.2-17.6 9.2-12.6 0-20.2-8-20.2-19.1 0-11.3 7.7-19.3 19.5-19.3 4.9 0 8.6 1.4 11.1 3 8.6 5.3 8.6 14.9 8.6 19.5h-24.3c.3 2.1.8 4.4 3.4 6.2 1.9 1.4 3.8 1.8 6.1 1.8 4.9 0 7.8-2.9 9.6-4.7zm-13-14c-.1-2.2-.4-7.2-5.1-7.2-4.4 0-5 4.7-5.3 7.2z'/%3E%3C/svg%3E");
    }
}

li#nav-admin::before
{
    /* -webkit-mask-image: url("images/panic.ff1f61679ac9.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='195' width='188' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m178.496 97.543c8.138 7.333 11.678 19.035 8.072 30.133-3.607 11.1-13.347 18.474-24.235 19.602 2.282 10.725-1.723 22.277-11.155 29.132-9.431 6.853-21.638 7.087-31.108 1.592-4.448 10.017-14.467 17.004-26.12 16.999s-21.665-7.005-26.101-17.029c-9.479 5.486-21.685 5.241-31.108-1.624-9.292-6.769-13.032-18.698-10.945-29.289h29.352l4.542-23.935h88.365l14.314-75.443c10.615 1.367 20.707 8.864 24.228 19.739 3.595 11.101.045 22.8-8.101 30.123zm-113.574-.145 4.544-23.945h58.405l-4.542 23.945zm-39.126 49.661c-10.68-1.315-20.854-8.553-24.392-19.479-3.596-11.102-.045-22.802 8.102-30.126-8.139-7.333-11.678-19.035-8.071-30.132 3.606-11.098 13.345-18.473 24.234-19.603-2.281-10.722 1.724-22.274 11.153-29.128 9.432-6.856 21.639-7.089 31.11-1.591 4.449-10.02 14.468-17.006 26.119-17 11.653.006 21.665 7.004 26.102 17.025 9.477-5.486 21.683-5.241 31.108 1.625 9.221 6.719 13.09 18.506 11.108 29.031h-117.716z' fill='%23312f28' fill-rule='evenodd'/%3E%3C/svg%3E");
}

li#nav-games::before
{
    /* -webkit-mask-image: url("images/toolbar-icon-games-3.47d069316429.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.88 52.77'%3E%3Cstyle%3E %23all %7B animation-name: rotate; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: infinite; transform-origin: center; %7D .b %7B fill: %23312f27; fill-rule: evenodd; animation-name: scale; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: infinite; transform-origin: center; %7D .b%23c %7B animation-delay: 0; %7D .b%23d %7B animation-delay: 250ms; %7D .b%23e %7B animation-delay: 500ms; %7D @keyframes scale %7B 0%25 %7B transform: scale(1); %7D 5%25 %7B transform: scale(.7); %7D 10%25 %7B transform: scale(1); %7D 100%25 %7B transform: scale(1); %7D %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 3%25 %7B transform: rotate(-5deg); %7D 7%25 %7B transform: rotate(5deg); %7D 10%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(0deg); %7D %7D %3C/style%3E%3Cg id='all'%3E%3Cpolygon id='c' class='b' points='14.97 0 18.29 9.92 24.95 12.97 18.29 16.02 14.97 25.94 11.66 16.02 5 12.97 11.66 9.92 14.97 0'/%3E%3Cpolygon id='d' class='b' points='32.92 2.97 38.22 22.91 48.88 27.87 38.22 32.82 32.92 52.77 27.62 32.82 16.97 27.87 27.62 22.91 32.92 2.97'/%3E%3Cpolygon id='e' class='b' points='8.27 25 11.02 33.23 16.55 35.76 11.02 38.28 8.27 46.51 5.52 38.28 0 35.76 5.52 33.23 8.27 25'/%3E%3C/g%3E%3C/svg%3E");
    transform: scale(1.1);
}

li#nav-news::before
{
    /* -webkit-mask-image: url("images/toolbar-icon-news.82e12baa924d.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='47' viewBox='0 0 47 47' width='47' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m609.5 140a23.5 23.5 0 1 1 23.5-23.5 23.5 23.5 0 0 1 -23.5 23.5zm1.5-42.413v7.374a42.076 42.076 0 0 0 5.172-.475c-1.142-3.341-2.752-5.789-4.6-6.857-.19-.021-.382-.029-.572-.042zm.567 37.785c1.894-1.091 3.536-3.627 4.683-7.087a44.065 44.065 0 0 0 -5.25-.465v7.593c.189-.013.38-.021.567-.041zm11.266-5.359a27.406 27.406 0 0 0 -3.752-1.167 23.838 23.838 0 0 1 -2.448 5.246 19.024 19.024 0 0 0 6.2-4.079zm-11.833-12.013v7.042a43.808 43.808 0 0 1 5.992.584 39.9 39.9 0 0 0 .965-7.626zm6.957-3a39.918 39.918 0 0 0 -.971-7.656 41.768 41.768 0 0 1 -5.986.611v7.045zm-1.323-16.091a23.467 23.467 0 0 1 2.369 5 27.157 27.157 0 0 0 3.59-1.141 18.991 18.991 0 0 0 -5.959-3.859zm3.185 7.8a40.312 40.312 0 0 1 1.135 8.291h7.459a18.856 18.856 0 0 0 -3.83-10 28.7 28.7 0 0 1 -4.764 1.711zm1.135 11.291a40.314 40.314 0 0 1 -1.123 8.24 29.221 29.221 0 0 1 4.824 1.667 18.859 18.859 0 0 0 3.758-9.907zm-18.587 16.092a23.834 23.834 0 0 1 -2.451-5.253 27.635 27.635 0 0 0 -3.766 1.161 19.016 19.016 0 0 0 6.217 4.092zm-3.2-7.857a40.266 40.266 0 0 1 -1.121-8.235h-7.459a18.861 18.861 0 0 0 3.752 9.9 29.251 29.251 0 0 1 4.829-1.665zm-1.121-11.235a40.36 40.36 0 0 1 1.136-8.3 28.992 28.992 0 0 1 -4.77-1.7 18.862 18.862 0 0 0 -3.825 10zm-1.646-12.229a27.257 27.257 0 0 0 3.6 1.138 23.458 23.458 0 0 1 2.369-5 18.992 18.992 0 0 0 -5.969 3.862zm4.643 12.229h6.957v-7.042a41.576 41.576 0 0 1 -5.985-.619 39.98 39.98 0 0 0 -.972 7.661zm0 3a39.944 39.944 0 0 0 .965 7.63 43.474 43.474 0 0 1 5.992-.591v-7.039zm1.706 10.284c1.148 3.46 2.79 6 4.684 7.088.187.02.378.027.567.041v-7.6a44.115 44.115 0 0 0 -5.251.471zm4.681-30.655c-1.851 1.068-3.46 3.517-4.6 6.859a42.1 42.1 0 0 0 5.173.474v-7.375c-.193.013-.385.021-.573.042z' fill='%23312f27' fill-rule='evenodd' transform='translate(-586 -93)'/%3E%3C/svg%3E");
}

li#nav-dev::before
{
    /* -webkit-mask-image: url("images/toolbar-icon-dev.facb0dc49bac.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='40' viewBox='0 0 43 40' width='43' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m212.117 138h-31.226a6.068 6.068 0 0 1 -5.891-6.23v-27.526a6.068 6.068 0 0 1 5.891-6.23h31.226a6.068 6.068 0 0 1 5.892 6.23v27.527a6.069 6.069 0 0 1 -5.892 6.229zm-30.117-35h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2-2v-4a2 2 0 0 1 2-2zm0 22h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2-2v-4a2 2 0 0 1 2-2zm7-11h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2-2v-4a2 2 0 0 1 2-2zm7-11h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2-2v-4a2 2 0 0 1 2-2zm7 11h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2-2v-4a2 2 0 0 1 2-2zm-7 11h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2-2v-4a2 2 0 0 1 2-2z' fill='%23312f27' fill-rule='evenodd' transform='translate(-175 -98)'/%3E%3C/svg%3E");
}

li#nav-help::before
{
    /* -webkit-mask-image: url("images/toolbar-icon-help.b1ee519a9db6.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='47.938' viewBox='0 0 48 47.938' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m277 137.957a25.576 25.576 0 0 1 -4.69-.5 2.567 2.567 0 0 0 -2.05.531 21.118 21.118 0 0 1 -10.06 3.948 1.091 1.091 0 0 1 -1.02-1.695 15.417 15.417 0 0 0 2.96-5.961 1.606 1.606 0 0 0 -.6-1.569 21.12 21.12 0 0 1 -8.54-16.734c0-12.122 10.75-21.977 24-21.977s24 9.855 24 21.978-10.74 21.979-24 21.979zm-1.176-13.127h5.8v-2.778h-5.637c-2.053 0-3.342-.644-3.342-2.657 0-4.429 12.6-1.611 12.6-9.623 0-4.429-3.382-7.207-8.617-7.207-5.073 0-8.817 3.1-9.018 8.012h3.261c.161-3.221 2.577-5.073 5.757-5.073s5.074 1.53 5.074 4.308c0 5.878-12.321 1.973-12.321 9.623.001 3.704 2.578 5.395 6.443 5.395zm-1.006 2.456v3.785h3.582v-3.785h-3.583z' fill='%23312f27' fill-rule='evenodd' transform='translate(-253 -94)'/%3E%3C/svg%3E");
}

li#nav-account::before
{
    /* -webkit-mask-image: url("images/toolbar-icon-account.796d44df7488.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='42' viewBox='0 0 42 42' width='42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m464 133v6h-6a2 2 0 0 0 -2-2h-2a2 2 0 0 0 -2 2h-6a2 2 0 0 0 -2-2h-2a2 2 0 0 0 -2 2h-6a2 2 0 0 0 -2-2h-2a2 2 0 0 0 -2 2h-6v-6a2 2 0 0 0 2-2v-2a2 2 0 0 0 -2-2v-6a2 2 0 0 0 2-2v-2a2 2 0 0 0 -2-2v-6a2 2 0 0 0 2-2v-2a2 2 0 0 0 -2-2v-6h6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h6v6a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2v6a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2v6a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2zm-6-30h-30v30h30zm-2 28h-26v-26h26z' fill='%23312f27' fill-rule='evenodd' transform='translate(-422 -97)'/%3E%3C/svg%3E");
}

li#nav-buy::before
{
    /* -webkit-mask-image: url("images/toolbar-icon-shop.0ed32500dd3b.svg"); */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg height='42' viewBox='0 0 35.969 42' width='35.969' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m274.969 409h-31.969a2 2 0 0 1 -2-2l1-25a2.072 2.072 0 0 1 2-2h3l1 7h1v-7-7a6 6 0 0 1 6-6h8a6 6 0 0 1 6 6v7 7h1l1-7h2.969a2.086 2.086 0 0 1 2 2l1 25a2 2 0 0 1 -2 2zm-9.969-35a3 3 0 0 0 -3-3h-6a3 3 0 0 0 -3 3v6h12z' fill='%237f7b74' fill-rule='evenodd' transform='translate(-241 -367)'/%3E%3C/svg%3E");
}

li#nav-home
{
    position: relative;
    color: transparent;
}

li#nav-home a
{
    overflow: clip;
}

li#nav-home::before
{
    position: absolute;
    width: 100%;
    height: 100%;
}

li#nav-buy
{
    color: var(--white);
    background-color: var(--purple);
    padding-left: .4em;
    padding-right: .4em;
}

li#nav-buy::before
{
    background-color: var(--white);
    height: 1em;
}

/* Subnav */

/* Nav */

nav.internal-nav
{
    width: 80rem;
    margin: 2rem auto;
}

nav.internal-nav ul
{
    width: 100%;
    max-width: 70rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

nav.internal-nav li
{
    margin: 0 0.5em;
    font-size: 0.65em;
    font-weight: 600;
}

nav.internal-nav li a
{
    padding: .15em .5em .25em .5em;
    border-radius: .25em;
    white-space: nowrap;

    color: var(--text);
    background: transparent;

    text-decoration: none;
    text-transform: uppercase;
}

nav.internal-nav li.here a
{
    background-color: var(--text);
    color: var(--card-bg);
}

nav.internal-nav li.button a
{
    padding: .35em .7em;
    border-radius: .35em;

    /* border: .2em solid var(--subtle); */
    background-color: var(--card-bg);
}
nav.internal-nav li.button a:hover
{
    color: var(--link);
}

/* END SUBNAV */


.navbar-top[data-color="purple"] li#nav-buy
{
    background: var(--white);
    color: var(--purple);
}

.navbar-top[data-color="purple"] li#nav-buy::before
{
    background-color: var(--purple);
}

#navbar
{
    font-size: 1.8em;
}

body
{
    padding-top: calc(1.8em * 2.125);

}

/* Sitemap */

footer #sitemap
{
    display: grid;
    grid-template-columns: auto auto;
    /* justify-content: space-around; */

    margin-top: 2em;

    font-size: 1.5em;
}

footer #sitemap ul
{
    text-align: left;
    margin-bottom: .5em;
}
footer #sitemap ul li
{
    margin-bottom: 1em;
}

footer #sitemap a
{
    display: inline-block;
    text-decoration: none;
}
footer #sitemap a:hover
{
    color: var(--link);
}

.subtleFooter ul.panic,
.subtleFooter #sitemap
{
    margin-left: 0;
    text-align: left;
}

.subtleFooter #sitemap
{
    max-width: 60rem;
}


@media screen and (min-width: 670px)
{
    #navbar
    {
        font-size: 1.2em;
    }

    body
    {
        padding-top: calc(1.1em * 2.125);
    }

    footer #sitemap
    {
        grid-template-columns: auto auto auto auto;
        margin-top: 1.5em;

        font-size: 1em;
    }

    footer #sitemap ul li
    {
        margin-bottom: .5em;
    }

}

/* Stop scaling */
@media screen and (min-width: 1100px)
{
    #navbar
    {
        font-size: 1em;
    }

    body
    {
        padding-top: calc(1em * 2.125);
    }
}
