@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --c-primary: #41C3FF;
    --c-secondary: #165CAB;
    --c-white: #fff;

    --c-font: var(--c-white);
    --c-font-alt: var(--c-secondary);
    --c-bg: var(--c-primary);
    
    --c-btn: var(--c-white);
    --c-btn-font: var(--c-secondary);
    --c-btn-shadow: var(--c-secondary);

    --b-mobile: 800px;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--c-bg);
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--c-font);
    font-weight: 700;
}
section {
    padding-block: 2rem;
}
@media only screen and (max-width: 800px) {
    section {
        padding-block: 1rem;
    }
}
body.home section:not(:last-child) {
    padding-block: 1rem;
}
main, nav {
    --content-width: min(1000px, 90%);
    max-width: var(--content-width);
    margin: auto;
}
@media only screen and (max-width: 800px) {
    main, nav {
        --content-width: min(360px, 90%);
    }
}
.row {
    display: flex;
    justify-content: stretch;
}
.row > * {
    flex-basis: 50%;
}
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 999;
    background-image: linear-gradient(#41C3FF,#416dff00);
}
@media only screen and (max-width: 800px) {
    .row {
        display: flex;
        flex-direction: column;
    }
    nav {
        flex-direction: column;
        position: relative;
    }
    ul.btn-list, nav menu {
        align-items: stretch;
    }
    ul.btn-list li, nav menu li {
        flex-grow: 1;
        display: flex;
    }
    ul.btn-list li .btn, nav menu li .btn {
        flex-grow: 1;
        text-align: center;
    }
}
#site-name {
    color: var(--c-white);
    font-size: 1.5rem;
    text-shadow: 3px 2px 0px var(--c-font-alt);
    font-weight: 800;
}
.white-bg {
    --c-font-alt: var(--c-primary);
    --c-font: var(--c-secondary);
    --c-btn: var(--c-primary);
    --c-btn-font: var(--c-white);
    background-color: var(--c-white);
    border-radius: 16px;
    padding: 10px 24px 14px;
}
.btn {
    --c-font-alt: var(--c-btn-font);
    --c-font: var(--c-btn-font);
    padding: 12px 16px;
    border-radius: 16px;
    background-color: var(--c-btn);
    box-shadow: 2px 3px 0px 1px var(--c-btn-shadow);
    display: inline-block;
    text-decoration: none;
    transform: scale(1);
    transition: transform 0.25s ease-out;
}
.btn:hover {
    transform: scale(1.1, 1.05);
}
.btn-instagram {
    --c-btn-shadow: #795289;
    background: linear-gradient(135deg, #a649c3,#db6849,#fcb045);
}
.btn-artstation {
    --c-btn-shadow: #404040;
    background: linear-gradient(165deg, #777,#666, #4c7db1);
}
.btn-twitter {
    background-color: #00acee;
}
.btn-list-v {
    flex-direction: column;
    justify-content: stretch;
    gap: 18px;
}
.btn-list-v > li {
    width: 100%;
    display: flex;
    align-items: stretch;
    text-align: center;
}
.btn-list-v > li .btn {
    width: 100%;
}
.btn-list-v > li .btn:hover {
    width: 100%;
    transform: scale(1.025, 1.05);
}
.btn-disabled {
    --c-btn-shadow: #404040;
    color: #c0c0c0;
    background: linear-gradient(165deg, #999,#777);
    transition: none!important;
    cursor: not-allowed;
}
a {
    color: var(--c-font-alt);
    text-decoration: none;
    font-weight: 900;
}
h1, h2, h3, p, small {
    color: var(--c-font);
}
h1 {
    font-size: 2.75rem;
    line-height: 2.5rem;
    margin-bottom: 0.8rem;
    max-width: 25ch;
    text-shadow: 3px 3px 0px var(--c-font-alt);
    font-weight: 900;
}
h2 {
    font-size: 1.75rem;
    line-height: 1.75rem;
    text-shadow: 2px 2px 0px var(--c-font-alt);
    font-weight: 800;
    margin-top: 2rem;
}
h2 small {
    text-shadow: none;
    font-size: 16px;
    font-weight: 700;
    margin-left: 8px;
    color: var(--c-white);
}
h3 {
    font-weight: 800;
    margin-bottom: 0;
}
h3, p, a, small {
    font-size: 1rem;
    font-size: 1rem;
}
b, small {
    color: var(--c-font-alt);
}
ul, menu {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Specific sections */
#introduction {
    position: relative;
    padding-top: 100px;
}
#introduction .white-bg {
    max-width: min(875px, 66%);
}
#stand-photos-img {
    position: absolute;
    z-index: -1;
    top: 2rem;
    right: 0;
    max-width: min(480px, 90%);
}
@media only screen and (max-width: 800px) {
    #introduction .white-bg {
        max-width: 100%;
    }
    #stand-photos-img {
        position: relative;
        max-width: 100%;
    }
}
.print-grid-v {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.print-grid-v > li {
    /*flex-basis: calc(33% - 10.7px);*/
    flex-basis: calc(25% - 12px);
}
.print-grid-h {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.print-grid-h > li {
    flex-basis: calc(33% - 10.7px);
}
.print-grid-v > li img, .print-grid-h > li img {
    max-width: calc(100% - 24px);
    border: solid 12px var(--c-white);
}
@media only screen and (max-width: 800px) {
    .print-grid-h > li {
        flex-basis: 100%;
    }
    .print-grid-v > li {
        flex-basis: calc(50% - 8px);
    }
}
.magnet-grid, .charm-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-block: 2rem;
}
.magnet-grid > li, .charm-grid > li {
    flex-basis: calc(33% - 16px);
}
.sticker-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-block: 2rem;
}
.cards-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-block: 2rem;
}
.cards-grid > li {
    flex-basis: calc(16.6% - 13.3px);
}
.magnet-grid > li img, .charm-grid > li img, .cards-grid > li img {
    max-width: 100%;
}
.sticker-grid > li img {
    max-width: 100%;
    max-height: 220px;
}
.sticker-grid-small {
    gap: 24px;
}
.sticker-grid-small > li img {
    max-width: 100%;
    max-height: 150px;
    max-width: 220px;
}
@media only screen and (max-width: 800px) {
    .magnet-grid > li, .charm-grid > li {
        flex-basis: calc(50% - 12px);
    }
    .cards-grid > li {
        flex-basis: calc(25% - 12px);
    }
    .sticker-grid > li img {
        max-height: 180px;
    }
    .sticker-grid-small > li img {
        max-height: 120px;
        max-width: 180px;
    }
}
#video iframe {
    margin-block: 24px;
    border: 0;
    border-radius: 16px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}
/* Lightbox fixes */
.lightbox {
    top: 50px!important;
    position: fixed;
}