* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-image: repeating-linear-gradient(-45deg, #220 3.3vmin, #202 3.3vmin, #200 3.3vmin, #022 3.3vmin, #020 3.3vmin, #022 3.3vmin);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.bsod{
    position: absolute;
    width: 100vmin;
    height: 100vmin;
    top: 0;
    left: 0;
    display: none;
    background-image: url('./../img/deadJPG.png'),radial-gradient(#003A, #030A, #033A, #300A, #303A, #300A);
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    background-position: center center, center center;
    backdrop-filter: blur(2.5px);
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}
.died-continue-button{
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.bsod.toggled{
    display: block;
}
glitch-canvas {
    display: block;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    height: 100%;
}

glitch-canvas canvas {
    object-fit: contain;
    max-height: 100%;
    display: block;
}

.app-area {
    position: relative;
    display: grid;
    grid-template-areas: "render interface" "controls controls";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    height: 100vmin;
    width: 100vmin;
    background-color: black;
    margin: 0 auto;
}

.nomap.app-area {
    grid-template-areas: "render" "controls";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}

.interface {
    grid-area: interface;
    overflow: hidden;
}

.nomap .interface {
    display: none;
}

.render-area {
    grid-area: render;
    overflow: hidden;
}

.target-img {
    width: 1px;
    height: 1px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.display-canvas {
    width: 100%;
}

.loading {
    opacity: 0.5;
}

.maps-area {
    display: flex;
    width: 100%;
    --visibleMap: "2";
}

.map-container {
    background-color: gold;
    position: relative;
    width: 100%;
    display: none;
}

.map-container.visible {
    display: block;
}

.mapcanvas {
    display: block;
    object-fit: contain;
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 100%;
    background-color: transparent;
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.mapcanvas-glitchers {
    position: absolute;
    top: 0;
    left: 0;
}

.SOI,
.SOF0,
.SOF2,
.DHT,
.DQT,
.DRI,
.SOS,
.RSTn,
.APPn,
.COM,
.EOI {}

.map-value {
    width: 3em;
    font-size: 0.75em;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.control-bar {
    grid-area: controls;
    background-color: #ffffffAA;
    font-size: max(13px, 2vmin);
}

.control-bar .controls-button {
    margin: 0;
    padding: 0.2em;
    min-width: 2em;
    color: black;
    border: none;
    border-radius: 0.1em;
    box-shadow: 1px 1px 1px #00000033, 1px 2px 2px #00000033;
    background-color: #ffffff33;
    font-size: inherit;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.control-bar .controls-button:disabled,
.control-bar .controls-button:active:hover {
    box-shadow: inset 1px 1px 1px #00000033, inset 1px 2px 2px #00000033;
    background-color: #00000033;
}

.control-bar .disable-toggled.controls-button:disabled {
    display: none;
}

.control-bar .controls-spacer {
    text-align: center;
    width: 1.25em;
    color: #00000033;
}

.control-bar .controls-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    text-align: center;
    width: 100%;
    gap: 0.6em;
    padding: 0.1em;
    background-color: #00000033;
    border: dotted 2px #00000033;
}


.glitchers-info {
    position: absolute;
    width: 100vmin;
    height: 100vmin;
    top: 0;
    left: 0;
    background-image: radial-gradient(#003A, #030A, #033A, #300A, #303A, #300A);
    background-repeat: no-repeat;
    backdrop-filter: blur(0.5px);
    font-size: 3vmin;
    padding: 3vmin;   
    gap: 3px;  
    grid-template-rows: auto  auto 1fr;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    display: none;
}

.glitchers-info[data-toggled] {
    display: grid;
}

.glitchers-info p {
    display: block;
    margin: 1em 0;
}
.glitchers-info strong{
font-weight: 600;
}
.image-info{
    font-style: italic;
}
.glitchers-info hr {
    margin: 1em 0;
    height: 2px;
    background-color: #fff;
    border: none;
}


.glitchers-list-table-header {   
    border-bottom: dashed 1px #ffffff;
    padding: 0.5em;
}

.glitchers-info .glitchers-list {
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
    display: block;      
}

.glitchers-list-table-header,
.glitchers-list-item {
    display: grid;
    gap: 0.1em;
    grid-template-columns: auto 1fr auto;
}
.glitchers-list-item {
    padding: 2px 0;
    border-bottom: dashed 1px #fff;
    align-items: center;
}
.parasites-info-container {
    display: grid;
    grid-template-rows: auto auto 1fr;
    overflow: hidden;
}

.glitchers-info .glitchers-list .info-table-header {
    font-style: italic;
}

.glitchers-info .glitchers-list .glitcher-image {
    width: 2em;
    border-width: 3px;
}

.glitchers-info-button {
  
    background-color: #333333aa;
    border: solid 3px #ffffffaa;
    color: #ffffffaa;
    margin: 0.2em;
    box-shadow: 1px 1px 4px 0px #00000033;
    z-index: 3;
    padding: 0 0.75em;
    font-size: 0.75em;
    line-height: 1.5;
    border-radius: 1em;
    cursor: pointer;
}

.glitchers-info-button:hover,
.glitchers-info-button:active,
.glitchers-info-button:focus-visible {
    background-color: #ccccccAA;
    border: solid 3px #ffffffAA;
    box-shadow: inset 1px 1px 2px 0px #00000022;
    color: #333333AA;
}

.glitchers-pedia {
    position: absolute;
    width: 100vmin;
    height: 100vmin;
    max-height: 100vmin;
    overflow: hidden;
    top: 0;
    left: 0;
    background-image: radial-gradient(#ffde, #fdfe, #fdde, #dffe, #dfde, #dffe);
    background-repeat: no-repeat;
    backdrop-filter: blur(0.5px);
    font-size: 3vmin;
    
    display: grid;
    gap: 3px;
    grid-template-areas: "header" "picture" "description";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

glitchers-pedia[data-page=''] {
    display: none;
}

.glitchers-pedia-header {
    grid-area: header;
    font-size: 5vmin;
    padding: 2vmin;
    background-color: #ffffff66;
    border: solid 1px #ffffff99;
}

.glitchers-pedia-classification {   
    font-size: 3vmin;
    font-style: italic;
    font-weight: 200;  
}
.glitchers-pedia-picture-container{
    grid-area: picture;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.glitchers-pedia-picture {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

.glitchers-pedia-data {
    grid-area: data;
    /*  background-color: #ffffff33;
    border: solid 1px #ffffff99;*/
}

.glitchers-pedia-data2 {
    grid-area: data2;
    /*background-color: #ffffff33;
    border: solid 1px #ffffff99;*/
}

.glitchers-pedia-description {
    grid-area: description;
    padding: 2vmin;
    background-color: #ffffff33;
    border: solid 1px #ffffff99;
}

.glitchers-pedia-button {
    background-color: #ffffffAA;
    border: solid 3px #99999900;
    margin: 0.2em;
    box-shadow: 1px 1px 4px 0px #00000033;
    z-index: 3;
    padding: 0 0.75em;
    font-size: 0.75em;
    line-height: 1.5;
    border-radius: 1em;
    cursor: pointer;
}

.glitchers-pedia-button:hover,
.glitchers-pedia-button:active,
.glitchers-pedia-button:focus-visible {
    background-color: #ccccccAA;
    border: solid 3px #ffffffAA;
    box-shadow: inset 1px 1px 2px 0px #00000022;

}

.glitchers-pedia-close-button {
    position: absolute;
    top: 0;
    right: 0;

}

.glitchers-pedia-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-size: 1.6em;
    border-radius: 0 1em 0 1em;
}

.glitchers-pedia-nav-button[data-direction="-1"] {
    right: unset;
    left: 0;
    border-radius: 1em 0 1em 0;
}