:root {
    --grid-item-size: min(3.3vw, 50px);
    --bottom-item-size: min(3.3vw, 50px);
    --footer-size: 20px;
}

@font-face {
    font-family: "cascadia";
    src: url("fonts/CascadiaMono-VariableFont_wght.ttf");
    unicode-range: U+0000-00FF;
}

.row {
    --bs-gutter-x: 0;
}

html,
body {
    height: 100dvh;
    overflow: hidden;
    image-rendering: pixelated;
}

a {
    color: #B26838;
    text-decoration: none;
}

body {
    background-color: #8E9F9B;
    /* background: linear-gradient(0deg,rgba(53, 108, 101, 1) 0%, rgba(142, 159, 155, 1) 42%); */
}

@keyframes move-bg {
    from {
        background-position: -2968px 30%;
    }

    to {
        background-position: 2968px 30%;
    }
}

.mainWindow {
    z-index: 2;
    height: 100dvh;
    padding-right: 0px;
    overflow-y: hidden;
}

.sideView {
    width: 25%;
}

/* MARK: Backgrounds */
/* #region movingBackgrounds */
.sideViewBackground1,
.sideViewBackground2,
.sideViewBackground3 {
    position: absolute;
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-size: auto 70%;
    height: 100%;
    width: 25%;
}

.sideViewBackground4,
.sideViewBackground5 {
    position: absolute;
    background-repeat: repeat-x;
    background-position: 0vw 100%;
    background-size: auto 45%;
    height: 100%;
    width: 25%;
}

.sideViewBackground1 {
    background-image: url("/img/background.png?version=2");
    animation: move-bg 200s linear infinite;
    z-index: -5;
}

.sideViewBackground2 {
    background-image: url("/img/background2.png");
    animation: move-bg 300s linear infinite reverse;
    z-index: -6;
}

.sideViewBackground3 {
    background-image: url("/img/background3.png");
    animation: move-bg 1000s linear infinite reverse;
    z-index: -4;
}

.sideViewBackground4 {
    background-image: url("/img/background4.png");
    z-index: -2;
}

.sideViewBackground5 {
    background-image: url("/img/background5.png");
    z-index: -3;
}

/* #endregion */
.monitorContent {
    height: 95vh;
}

.monitorFooter {
    height: 100%;
}

.tm-center {
    position: relative;
}

.grid-container {
    display: grid;
    grid-template-columns: var(--grid-item-size) 1fr var(--grid-item-size);
    grid-template-rows: var(--grid-item-size) 1fr var(--bottom-item-size) var(--footer-size);
    height: 100%;
    width: 100%;
}

/* MARK: navTerminal */
/*#region navTerminal */
.navimg {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: inherit;
    z-index: 10;
}

.bottomright {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: min(30vw, 400px);
    aspect-ratio: 16/10;
    pointer-events: none;
    background-origin: content-box;
    background-image: url("/img/nav-sheet.png");
    background-size: 400% 400%;
    background-repeat: no-repeat;
    background-position: 33.33% 33.33%;
}

#mini-overlay {
    position: relative;
    z-index: 1;
    top: 32%;
    pointer-events: all;
    left: 36.6%;
    width: 26%;
    height: 27%;
    margin-left: 20%;
    background-image: url("/img/navScanlines.gif");
    background-size: cover;
    background-repeat: no-repeat;
}

#nav-mute {
    position: absolute;
    pointer-events: all;
    cursor: pointer;
    z-index: 2;
    top: 72%;
    left: 60%;
    height: 10%;
    width: 7.2%;
    background-origin: content-box;
    background-position: 0% 50%;
    background-image: url("/img/nav_mute.png");
    background-size: cover;
    background-image: no-repeat;
}

#nav-left {
    position: absolute;
    pointer-events: all;
    cursor: pointer;
    z-index: 2;
    top: 75%;
    left: 70%;
    height: 9%;
    width: 6.1%;
    background-origin: content-box;
    background-position: 0% 0%;
    background-image: url("/img/nav_left.png?version=2");
    background-size: cover;
    background-image: no-repeat;
}

#nav-left:hover {
    background-position: 0% 100%;
}

#nav-right {
    position: absolute;
    pointer-events: all;
    cursor: pointer;
    z-index: 2;
    top: 73%;
    left: 76.5%;
    height: 9%;
    width: 6.1%;
    background-origin: content-box;
    background-position: 0% 0%;
    background-image: url("/img/nav_right.png?version=2");
    background-size: cover;
    background-image: no-repeat;
}

#nav-right:hover {
    background-position: 0% 100%;
}

/*#endregion*/
/* MARK: monitor */
#monitor-overlay {
    position: absolute;
    background-image: url("/img/overlay.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* MARK: 9slice */
/*#region 9slice*/
.grid-item {
    background-color: #1d2a3a;
    box-sizing: border-box;
    overflow-y: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

/* northwest */
.tm-nw {
    background-image: url("/img/tm1.png?version=2");
    position: relative;
    overflow: visible;
}

/* north */
.tm-n {
    background-image: url("/img/tm2.png?version=2");
    background-size: 100% 100%;

}

/* northeast */
.tm-ne {
    background-image: url("/img/tm3.png?version=2");
}

/* west */
.tm-w {
    background-image: url("/img/tm4.png?version=2");
    background-size: 100% 100%;
}

/* east */
.tm-e {
    background-image: url("/img/tm6.png?version=2");
    background-size: 100% 100%;
}

/* southwest */
.tm-sw {
    display: inline-block;
    position: relative;
    background-image: url("/img/tm7.png?version=2");
    background-size: 100% 100%;
    overflow: visible;
}

#scrollwheel {
    position: absolute;
    bottom: -180%;
    left: -40%;
    z-index: 500;
    width: 230%;
    cursor: pointer;
    transition: scale 0.1s ease-in;
    /* filter: url("pixel_filter.svg#pixelate"); */
}

#scrollwheel:hover {
    scale: 1.05;
}

/* south */
.tm-s {
    background-image: url("/img/tm8.png?version=2");
    background-size: 100% 100%;
    text-align: right;
    color: #aabab9;
    position: relative;
    overflow: visible;
}

/* southeast */
.tm-se {
    background-image: url("/img/tm9.png?version=2");
    background-size: 100% 100%;

}

.tm-footer-left {
    background-image: url("/img/footer1.png?version=2");
    background-size: 100% 100%;
}

.tm-footer {
    background-image: url("/img/footer2.png?version=2");
    background-size: 100% 100%;

}

.tm-footer-right {
    background-image: url("/img/footer3.png?version=2");
    background-size: 100% 100%;

}

.tm-s span {
    position: absolute;
    top: 50%;
    right: 0px;
    font-weight: bold;
    text-shadow: 0px -2px 4px rgb(93, 103, 113, 1);
}

/*#endregion 9slice*/
/* MARK: filter drawer */
/* #region*/

#sideViewSplitter {
    position: absolute;
    transform-origin: top left;
    height: 50vh;
    transform: scale(1);
}

#sideViewSplitterBottom {
    position: absolute;
    transform-origin: bottom left;
    bottom: 0;
    height: 50%;
    width: 24%;
}

#artFilterDrawer {
    position: absolute;
    transform-origin: bottom left;
    bottom: 0;
    background-image: url("/img/filter.png");
    background-size: cover;
    height: 100%;
    z-index: 10;
    aspect-ratio: 1/3;
    transition: transform 0.3s ease-in;
    transform: rotateY(90deg) skew(0deg, -15deg);
}

#artFilterDrawer.expanded {
    transform: rotateY(0deg) skew(0deg, 0deg);
}

.filter-button {
    position: absolute;
    background-image: url("/img/filterButton.png");
    background-size: cover;
    background-clip: border-box;
    font-size: 2cqh;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.6;
    font-family: "cascadia";
    cursor: pointer;
    user-select: none;
    /* transition: padding-top 0.1s ease-in; */
}

.filter-button:hover {
    padding-top: 1%;
    background-position-y: 50%;
}

.filter-button.active {
    padding-top: 2%;
    background-position-y: 100%;
    color: rgb(198, 201, 204);
}

#filterAllMediums,
#filterAllCategories {
    background-image: url("/img/filterButtonAll.png");
    height: 8%;
    width: 55%;
    left: 24%;
    font-size: 2.5cqh;
    line-height: 1.4;
}

#filterPixelArt,
#filterDigital,
#filter3D,
#filterCharacters,
#filterEnvironment,
#filterDesign,
#filterAnimation,
#filterGameArt {
    height: 7%;
    width: 77%;
    left: 13%;
}

#filterAllMediums {
    top: 3.6%;
}

#filterAllCategories {
    top: 43.5%;
}

#filterPixelArt {
    top: 14%;
}

#filterDigital {
    top: 23%;
}

#filter3D {
    top: 32%;
}

#filterCharacters {
    top: 54%;
}

#filterEnvironment {
    padding-top: 1%;
    font-size: 1.7cqh;
    top: 63%;
}

#filterEnvironment:hover {
    padding-top: 2%;
}

#filterEnvironment:active {
    padding-top: 3%;
}

#filterDesign {
    top: 72%;
}

#filterAnimation {
    top: 81%;
}

#filterGameArt {
    top: 90.2%;
}


/* #endregion */
/* MARK: Drawer */
/*#region drawer*/
#drawerButton {
    inline-size: fit-content;
    background-size: 300% 100%;
    width: 100%;
    aspect-ratio: 1 / 1.3;
    background-repeat: no-repeat;
    background-clip: content-box;
    background-origin: content-box;
    padding-left: 31%;
    background-image: url("/img/drawer_buttonNEW.png");
    background-position: 0px;
    cursor: pointer;
}

#drawerButton:hover {
    background-position: 50%;
}

#drawerButton:active {
    background-position: 100%;
}

#drawer {
    position: absolute;
    top: 35px;
    transform: translateX(-250px);
    transition: transform 0.3s ease-in;
    height: 324px;
    width: 273px;
    background-repeat: no-repeat;
    background-size: auto;
    overflow: visible;
}

#drawerSprite {
    position: absolute;
    background-image: url("/img/drawer.png");
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

#drawer.expanded {
    transform: translateX(0px);
}

.drawer-content {
    position: absolute;
    /* background-color: rgba(0, 128, 0, 0.371);
    background-clip: content-box; */
    top: -40px;
    height: 260px;
    width: 220px;
    z-index: 10;
}

#cardContainer {
    position: absolute;
    top: 218px;
    left: 40px;
    width: 250px;
    height: 100px;
}

#cardContainer> :first-child {
    margin-right: auto;
}

#cardContainer> :last-child {
    margin-left: -20px;
}

#card1 {
    background-image: url("/img/kon_button.png");
}

#card2 {
    background-image: url("/img/gib_button.png");
}

#card3 {
    background-image: url("/img/fufu_button.png?version=2");
}

.punchcard {
    background-size: cover;
    height: 100%;
    min-width: 40px;
    margin-left: -40px;
    transition: transform 0.3s ease-in-out;
    transform: skew(0deg, 15deg);
    cursor: pointer;
}

.punchcard:hover {
    transition: transform 0.1s ease-in-out;
    transform: skew(0deg, 0deg) scale(1.2);
    border: solid #1d2a3a 2px;
    z-index: 20;
}

.cardHolders {
    height: 15px;
    margin-left: 13px;
    position: relative;
    padding: 0
}

.card-holder {
    position: absolute;
    height: 16px;
    width: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 20;
    transition: transform 0.1s ease-in-out;
    background-image: url("/img/card_holder.png");
}

.card-holder.hovered {
    transform: translateY(-8px);
}

/*#endregion*/
/* MARK: Canvas and Pins */
/*#region canvas and pins*/
#lineCanvas {
    width: 100%;
    height: 100%;
    filter: url("nn_filter.svg#filter");
    cursor: none;
}

#plugSprite {
    background-image: url("/img/plug.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 21px;
    height: 57px;
    top: 10px;
}

.nav-pins {
    position: absolute;
    height: 126px;
    width: 171px;
    top: 93px;
    left: 27px;
    background-image: url("/img/nav_buttons.png");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.nav-pin {
    position: absolute;
    transform: translateX(-5px);
    height: 15px;
    width: 20px;
    z-index: 11;
}

#artPin {
    top: 8px;
    left: 9px;
}

#homePin {
    top: 8px;
    left: 105px;
}

#contactPin {
    top: 57px;
    left: 9px;
}

#aboutPin {
    top: 57px;
    left: 105px;
}

#tosPin {
    top: 105px;
    left: 9px;
}

#gamesPin {
    top: 105px;
    left: 105px;
}

/*#endregion*/
/* MARK:MOBILE */
#mobile-drawer {
    position: absolute;
    z-index: 4;
    top: 0px;
    height: 100%;
    border: 20px solid transparent;
    border-image: url("/img/mobile-drawer-border.png") 16 stretch;
    background-image: url("/img/mobile-drawer-background.png");
    background-size: 10px;
    width: 100dvw;
    background-color: #8d8181;
}

#mobile-navigation {
    position: absolute;
    right: 0px;
    height: 120%;
    aspect-ratio: 1/1;
    background-image: url("/img/drawer_button_mobile.webp");
    background-size: cover;
    background-position: 0% 0%;
}
#mobile-artfilters {
    position: absolute;
    right: 50px;
    height: 120%;
    aspect-ratio: 1/1;
    background-image: url("/img/filter_button_mobile.webp");
    background-size: cover;
    background-position: 0% 100%;
}
#mobile-navigation.active {
    background-position: 0% 100%;
}
#mobile-artfilters.active {
    background-position: 0% 0%;
}
#mobile-artfilters.toggled {
    background-position: 0% 50%;
}
/* #mobile-artfilters.active{

} */

#mobile-navigation-drawer {
    z-index: 3;
    position: absolute;
    border: 60px solid transparent;
    border-image: url("/img/mobile-drawer-border-2.png") 35 round;
    background-color: #8d8181;
    background-clip: content-box;
    /* background-image: url("/img/mobile-drawer-background.png");
    background-size: 10px; */
    top: -300px;
    width: 100vw;
    height: 300px;
    transition: top 0.1s ease-in;
}

#mobile-navigation-drawer.expanded {
    top: 70px;
}
#mobile-filter-drawer {
    z-index: 3;
    position: absolute;
    border: 60px solid transparent;
    border-image: url("/img/mobile-drawer-border-2.png") 35 round;
    background-color: #8d8181;
    background-clip: content-box;
    /* background-image: url("/img/mobile-drawer-background.png");
    background-size: 10px; */
    top: -300px;
    width: 100vw;
    height: 300px;
    transition: top 0.1s ease-in;
}

#mobile-filter-drawer.expanded {
    top: 70px;
}
#mobile-filter-drawer .row{
    position: absolute;
    inset: -40px 10px;
}



.mobile-page-button{
    height: 40px;
    width: 90%;
    margin-left:10px;
    background-image: url("/img/filterButton.png");
    background-size: 100% 300%;
    text-align: center;
    user-select: none;
    line-height: 30px;
    font-family: "cascadia";
    font-size: large;
}
.mobile-page-button:active{
    background-position: 0% 100%;
    line-height: 50px;
    color: rgb(198, 201, 204);

}
#mobile-filter_AllCategories, #mobile-filter_AllMediums{
    background-image: url("/img/filterButtonAll.png");
}
.mobile-filter-button{
    height: 35px;
    width: 90%;
    margin-left:10px;
    background-image: url("/img/filterButton.png");
    background-size: 100% 300%;
    text-align: center;
    user-select: none;
    line-height: 30px;
    font-family: "cascadia";
    font-size: min(4cqw,4cqh);
}
.mobile-filter-button span{
    display: inline-block;
    white-space: preserve nowrap;
    transform: scale(0.9);
    user-select: none;
    pointer-events:none;
}
.mobile-filter-button.active{
    background-position: 0% 100%;
    line-height: 40px;
    color: rgb(198, 201, 204);

}
#mobile-navigation-drawer .row .col-6{
    gap:10px;
}