body{
    /* Other styles */
    animation-duration: 0.1s;
    animation-name: textflicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

#vfx-button, #prev-step, #next-step {
    /* Other styles */
    animation-duration: 0.1s;
    animation-name: textflicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes textflicker {
    from {
        text-shadow: 0.5px -0.3px 2px #ea36af, 0.6px 0.3px 2px #75fa69;
    }

    to {
        text-shadow: -0.6px -0.3px 2px #ea36af, -0.5px -0.3px 2px #75fa69;
    }
}


.animation-none {
    animation-name: none !important;
}


::selection {
    background: var(--color-accent-2);
    /* WebKit/Blink Browsers */
    color: var(--color-background);
    /* WebKit/Blink Browsers */
}


select {
    font-size: var(--size-std);
    width: 165px;
    font-family: 'pixelFont', monospace;
    /* font-weight: 600; */
    /* padding: 2px; */
    border: 2px solid var(--color-main);
    background: var(--color-background);
    color: var(--color-accent-3);

    /* text-align: center; */

}

:root {


    /* --red-cmyk: #E00000ff;
    --sgbus-green: #00E000ff;
    --fluorescent-cyan: #00E0E0ff;
    --pear: #E0E000ff;
    --steel-pink: #E000E0ff; */

    /* minty green #04fc9c */
    /* --color-background:#202020; */

    /*CMI*/
    --color-background: #000000;
    --color-main: #04fc9c;
    --color-accent-1: #04fc9c;
    --color-accent-2: #04fc9c;
    --color-accent-3: #04fc9c;

    /*GRN*/
    /* --color-background: #081820;
    --color-main: #346856;
    --color-accent-1: #88c070;
    --color-accent-2: #e0f8d0;
    --color-accent-3: #e0f8d0; */

    /*DMG*/
    /* --color-background:#0f380f;
    --color-main:	#306230;
    --color-accent-1:	#8bac0f;
    --color-accent-2:#9bbc0f;
    --color-accent-3:#9bbc0f; */

    /*HIT*/
    /* --color-background: #d1cdc2;
    --color-main: #5179AEff;
    --color-accent-1: #E86B79ff;
    --color-accent-2: #02A8A5ff;
    --color-accent-3: #D0AE28ff; */

    /*ZED*/
    /* --color-background: #00E0E0ff;
    --color-main: #00E000ff;
    --color-accent-1: #E000E0ff;
    --color-accent-2: #E0E000ff;
    --color-accent-3: rgb(224, 0, 0); */

    /*DX7*/
    /* --color-background: #262628ff;
    --color-main: #857F82ff;
    --color-accent-1: rgb(23, 216, 219);
    --color-accent-2: rgb(149, 158, 221);
    --color-accent-3: rgb(208, 174, 40); */

    /*IDK*/
    /* --color-background: #EEE8A9;
    --color-main: #444655;
    --color-accent-1: #006464;
    --color-accent-2: #A8535A;
    --color-accent-3: #9753a8; */

    --size-std: 18px;
    --size-std-minus: 10px;

}

#volume-container {

    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    appearance: none;
    width: 98%;
    height: 20px;
    background: var(--color-background);
    border: 2px solid var(--color-main);
    border-radius: 0px;
    margin-left: 8px;
    margin-right: 8px;
}


table {
    border-collapse: collapse;
    width: 1024px;
    height: 100px;
}

table,
th,
td {
    user-select: text;
    border: 2px solid var(--color-main);
    /* Adjust width and color as needed */
}

.copyable {
    user-select: text;
}

td {
    padding: 2px;
    /* Adjust padding as needed */
    text-align: left;

}

th {
    background: var(--color-main);
    color: var(--color-background);
    padding: 2px;
    /* Adjust padding as needed */
    text-align: center;
}


#download-bom-button {
    font-family: 'pixelFont', monospace;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    text-decoration: none;
    color: var(--color-accent-2);
    /* Text color */
    background-color: var(--color-background);
    /* Background color */
    color: var(--color-main);
    /* Background color */
    /* display: inline-block; */
    padding: 5px 10px;
    /* Adjust padding as needed */
    border: 2px solid var(--color-main);
    /* Border */
    cursor: pointer;
    font-weight: bold;
    margin-top: 0px;
    /* Add margin to match your design */
    margin-bottom: 0px;
    /* Add margin to match your design */
}

#download-bom-button:hover {
    font-family: 'pixelFont', monospace;
    color: var(--color-background);
    /* Background color */
    background-color: var(--color-accent-3);
    /* Background color on hover */
}

/* Volume Slider */
#volume-slider {
    -webkit-appearance: none;
    width: 100%;
    /* Make the slider take up the full width of its container */
    height: 8px;
    /* Set the height of the slider as needed */
    background: var(--color-background);
    outline: none;
    opacity: 0.7;
    /* Adjust opacity as needed */
    -webkit-transition: .2s;
    transition: opacity .2s;
    cursor: pointer;
}

/* Volume Slider Thumb */
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--size-std-minus);
    height: var(--size-std-minus);
    background: var(--color-accent-3);
    cursor: pointer;
}

/* Volume Slider Thumb on Hover */
#volume-slider:hover::-webkit-slider-thumb {
    background: var(--color-accent-2);
    /* Change color on hover */
}

/* Volume Slider Thumb on Active (Click) */
#volume-slider:active::-webkit-slider-thumb {
    background: var(--color-accent-1);
    /* Change color when clicked */
}

@font-face {
    font-family: pixelFontBold;
    src: url(slkscrb.ttf);
}

@font-face {
    font-family: pixelFont;
    src: url(slkscre.ttf);
}



body {
    /* transform: scale(1.2); */
    /* height: 100%; */
    zoom: 100%;
    background: var(--color-background);

    /* text-shadow: 0 0 px rgba(157, 202, 153, 0.801); */
    color: var(--color-accent-2);
    font-family: 'pixelFont';
    font-size: var(--size-std);
    user-select: none;
    /* display: flex; */
    justify-content: center;
    /* font: 1.3rem Inconsolata, monospace; */

}

html,
body,
select,
.patch input,
.slider::-webkit-slider-thumb,
.strip-label,
button,
form input,
canvas,
table,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    /* Set the font-family to 'pixelFont' for all elements */
    font-family: 'pixelFont', monospace;
}

.content-text {
    font-family: 'pixelFont', monospace;
}

#result {
    font-size: inherit;
    color: inherit;
    /* Add any other styling as needed */
}


#gif-container {
    min-width: 720px;
    min-height: 540px;
    display: flex;
    justify-content: center;
    max-width: 720px;
    align-items: center;
    border: 2px solid var(--color-main);
    padding: 4px;
    margin: 4px;
    /* Adjust margin as needed */
}

#text-container {
    height: 180px;
    /* Set your desired fixed height here */
    overflow-y: auto;
    border: 2px solid var(--color-main);
    display: flex;
    max-width: 720px;
    /* justify-content: center; */
    /* align-items: center; */
    /* border: 2px solid var(--color-main); */
    padding: 4px;
    margin: 4px;
    /* Adjust margin as needed */
}

#buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 4px; */
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 4px;
    /* Adjust margin as needed */
    text-align: center;
}

#prev-step,
#next-step {
    width: 180px;
    padding: 0px 0px;
    /* Add padding for better button appearance */
}

.screen {
    /* border: 2px solid var(--color-main); */
    padding: 8px;
    /* max-width: px; */
    /* width: 80%; */
    margin: 0 auto;
    /* Center horizontally */
}

/* Sidebar Title Style */
/* Sidebar Title Style */
.sidebar-title {
    text-align: center;
    color: var(--color-background);
    /* Text color */
    background-color: var(--color-main);
    /* Background color */
    padding: 5px;
    font-weight: bold;
}

/* Styles for sidebar container */
.sidebar {
    max-width: 160px;
    /* Adjust width as needed */
    min-width: 160px;
    /* Adjust width as needed */
    background: var(--color-background);
    margin: 4px;
    color: var(--color-accent-2);
    font-family: 'pixelFont', monospace;
}

#vfx-button {
    margin-top: 7px;
    min-width: 160px;
    max-width: 160px;
    min-height: 24px;
    max-height: 24px;
    padding: 0px;
}

/* Styles for left sidebar */
#sidebar-left {
    flex: 1;
    text-align: center;
    background: var(--color-background);
    border: 2px solid var(--color-main);
    min-height: 516px;
    max-height: 516px;
    color: var(--color-accent-2);
    font-family: 'pixelFont', monospace;
}

#step-list {
    list-style-type: none;
    padding: 0;
}

.step-link {
    text-decoration: none;
    color: var(--color-accent-2);
}

/* Styles for right sidebar */
#sidebar-right {
    flex: 1;
    min-height: 516px;
    max-height: 516px;
    background: var(--color-background);
    border: 2px solid var(--color-main);
    text-align: center;
    color: var(--color-accent-2);
    font-family: 'pixelFont', monospace;
}

#sidebar-right h2 {
    font-size: 20px;
    /* Adjust font size as needed */
    margin-bottom: 10px;
}

#sidebar-right ul {
    list-style-type: none;
    padding: 0;
}

#sidebar-right li {
    margin-bottom: 5px;
}

#sidebar-right a {
    text-decoration: none;
    color: var(--color-accent-2);
}


button {
    background: var(--color-background);
    color: var(--color-accent-2);
    font-size: var(--size-std);
    font-family: 'pixelFont', monospace;
    border: 2px solid var(--color-main);
    text-align: center;
}

button:active {

    color: var(--color-background);
    background: var(--color-accent-3);
    font-size: var(--size-std);
    font-family: 'pixelFont', monospace;
    border: 2px solid var(--color-main);
    text-align: center;
}

.min_button {
    z-index: 4;
    grid-row: 3;
    grid-column: 2;
    opacity: 60%;
}

#min-button {
    margin: 0 0;
    font-size: 10px;
    /* background: var(--color-main); */
    size: 2px;
}


.scanlines {
    position: relative;
    display: flex;
    height: 1024px;
    /* Example of a fixed width that might be too large */
    /* zoom: 140%; */
    /* align-items: center; */

}

@media (min-width: 800px) {
    .scanlines {
        justify-content: center;
        /* Center content on screens wider than 600px */
    }
}

.scanlines:before,
.scanlines:after {
    pointer-events: none;
    content: '';
    position: absolute;
}

.display-block:before,
.display-block:after {
    display: block;
}

.display-none:before,
.display-none:after {
    display: none;
}

.scanlines:before {
    width: 100%;
    height: 4px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, .33);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}

.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .23) 95%);
    background-size: 100% 6px;
    animation: scanlines 1s steps(60) infinite;
}

/* ANIMATE UNIQUE SCANLINE */
/* @keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
} */

@keyframes scanlines {
    0% {
        background-position: 0 50%;
    }
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    overflow-y: auto;
    /* Enable scrolling within the popup content if it overflows */
    overflow-x: auto;
    /* Enable scrolling within the popup content if it overflows */
}

.popup-text {
    text-align: center;
    margin-bottom: 8px;
    padding: 8px;
    /* Center align the text */
}

.popup-content {
    position: absolute;
    /* overflow-y: auto; */
    /* Enable scrolling within the popup content if it overflows */
    /* overflow-x: auto; */
    /* Enable scrolling within the popup content if it overflows */
    top: 50%;
    /* adjust this value as needed */
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-background);
    padding: 0px;
    border: 2px solid var(--color-main);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popup img {
    max-width: none;
    /* Remove the max-width property */
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

.popup-close {
    z-index: 1002;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}


/* Container for list and grid */
.patch-container {
    display: flex;
    justify-content: space-between;
    /* Place items side by side */
    align-items: flex-start;
    /* Align items at the top */
    margin-top: 0px;
    /* Adjust margin as needed */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

/* Style the individual lists */
.narrow-list {
    flex: 1;
    /* Distribute space evenly between the list and grid */
    padding: 10px;
    /* Adjust padding as needed */
    box-sizing: border-box;
    /* Include padding in the width */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center text horizontally */
}

/* Style the specific grid */
/* Style the specific grid */
.patch-grid {
    flex: 2;
    /* Distribute space evenly between the list and grid */
    padding: 10px;
    /* Adjust padding as needed */
    box-sizing: border-box;
    /* Include padding in the width */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Create 4 columns */
    grid-gap: 10px;
    /* Adjust gap between grid items as needed */
}

/* Style the individual grid items */
.narrow-list a {
    padding: 5px;
    /* Adjust padding as needed */
    width: 140px;
    border: 1px solid var(--color-main);
    /* Add a 1px border to each grid item */
    text-align: center;
    /* Center text horizontally */
    text-decoration: none;
    /* Remove underline from links */
    color: var(--color-text);
    /* Text color for grid items */
    background-color: var(--color-background);
    /* Background color for grid items */
    display: block;
    /* Make grid items block-level for spacing */
}

/* Style the individual grid items */
.patch-grid a {
    padding: 5px;
    /* Adjust padding as needed */
    width: 140px;
    border: 1px solid var(--color-main);
    /* Add a 1px border to each grid item */
    text-align: center;
    /* Center text horizontally */
    text-decoration: none;
    /* Remove underline from links */
    color: var(--color-text);
    /* Text color for grid items */
    background-color: var(--color-background);
    /* Background color for grid items */
    display: block;
    /* Make grid items block-level for spacing */
}

/* Hover effect for grid items */
.narrow-list a:hover {
    background-color: var(--color-main);
    /* Change background color on hover */
    color: var(--color-background);
    /* Change background color on hover */
}

/* Hover effect for grid items */
.patch-grid a:hover {
    background-color: var(--color-main);
    /* Change background color on hover */
    color: var(--color-background);
    /* Change background color on hover */
}

/* Style the titles */
.list-title {
    width: 100%;
    /* Span 100% of the width */
    text-align: center;
    /* Center text horizontally */
    background-color: var(--color-main);
    /* Background color for titles */
    color: var(--color-background);
    /* Text color for titles */
    padding: 5px;
    /* Adjust padding as needed */
    font-weight: bold;
}