html,
select,
.patch input,
.slider::-webkit-slider-thumb,
button,
form input,
canvas {
    background: var(--color-background);
    color: #eee;
    line-height: 1;

}

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

@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 */
}

: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;

}

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

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

@keyframes textflicker {
    from {
        text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
    }

    to {
        text-shadow: 2px 0.4px 2px #ea36af, -1px -0.4px 2px #75fa69;
    }
}

.grid {
    display: grid;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

h1 {
    text-align: center;
    color: var(--color-background);

    background-color: var(--color-accent-1);
    line-height: 100%;
    margin: 0;
}

h2 {
    text-align: center;
    color: var(--color-background);
    background: var(--color-accent-1);
    line-height: 100%;
    margin: 0;
}

select {
    font-size: var(--size-std);
    width: 100%;
    font-family: 'pixelFont', monospace;
    font-weight: 600;
    border: 3px solid var(--color-main);
    background: var(--color-background);
    color: var(--color-accent-3);
}
#selectIn {
    font-size: var(--size-std);
    width: 300px;
    font-family: 'pixelFont', monospace;
    font-weight: 600;
    border: 3px solid var(--color-main);
    background: var(--color-background);
    color: var(--color-accent-3);
}

body {
    /* 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; */

}

canvas {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    padding: 0px;
    color: var(--color-accent-3);
}

.wave1 {
    color: var(--color-accent-1);
}


.wave2 {
    color: var(--color-accent-2);
}

.wave3 {
    color: var(--color-accent-3);
}

div {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.slidecontainer {
    width: 100%;
    margin: 0px;
    padding: 0px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.slider {
    appearance: none;
    width: 98%;
    height: var(--size-std);
    background: var(--color-background);
    outline: none;
    border: 4px solid var(--color-main);
    border-radius: 0px;
    margin: 0px;
}

.slider-split {
    appearance: none;
    width: 98%;
    height: var(--size-std);
    background: var(--color-background);
    outline: none;
    border: 4px solid var(--color-main);
    border-radius: 0px;
    margin: 0;
    background: linear-gradient(var(--color-main), var(--color-main)) no-repeat center/3px 100%;
}


/* for chrome/safari */
.slider::-webkit-slider-thumb {
    appearance: none;
    margin: 0;
    width: var(--size-std-minus);
    height: var(--size-std-minus);
    background: var(--color-accent-3);
    cursor: pointer;
}

/* for chrome/safari */
.slider-split::-webkit-slider-thumb {
    appearance: none;
    margin: 0;
    width: var(--size-std-minus);
    height: var(--size-std-minus);
    background: var(--color-accent-3);
    cursor: pointer;
}



/* .patch input {
    border: 2px solid var(--color-main);
    font-size: var(--size-std);
    font-family: 'pixelFont', monospace;
    font-weight: 800;
    width: auto;
    height: 100%;
    appearance: none;
    outline: none;
    cursor: pointer;
    padding: 4px 10px;
    background: var(--color-background);
    color: var(--color-accent-2);
}

.patch input:checked {
    font-size: var(--size-std);
    font-family: 'pixelFont', monospace;
    font-weight: 800;
    color: var(--color-background);
    background: var(--color-accent-3);
}

.patch input:before {
    content: attr(label);
    display: inline-block;
    text-align: center;
} */

input[type="radio"] {
    border: 2px solid var(--color-main);
    font-size: var(--size-std);
    font-family: 'pixelFont', monospace;
    appearance: none;
    outline: none;
    cursor: pointer;
    padding: 4px 10px;
    background: var(--color-background);
    color: var(--color-accent-2);

}

input[type="radio"]:before {
    content: attr(label);
    display: inline-block;
    text-align: center;
}

input[type="radio"]:checked {
    font-size: var(--size-std);
    font-family: 'pixelFont', monospace;
    font-weight: 800;
    color: var(--color-background);
    background: var(--color-accent-3);
}

.checkbox-wrapper {
    display: inline-block !important; /* Display the wrapper inline */
}

.vfx-checkbox {
    border: 2px solid var(--color-main) !important;
    font-size: var(--size-std) !important;
    font-family: 'pixelFont', monospace !important;
    appearance: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 4px 10px !important;
    background: var(--color-background) !important;
    color: var(--color-accent-2) !important;
    display: inline-block !important; /* Display the checkbox inline */
    vertical-align: middle !important; /* Align vertically with label */
}

.vfx-checkbox:before {
    content: attr(label) !important;
    display: inline-block !important; /* Display the label inline */
    text-align: center !important;
}

.vfx-checkbox:checked {
    font-size: var(--size-std) !important;
    font-family: 'pixelFont', monospace !important;
    font-weight: 800 !important;
    color: var(--color-background) !important;
    background: var(--color-accent-3) !important;
}

input[type="checkbox"]:not(.vfx-checkbox) {
    display: none;
}

input.hidden-input:not(.vfx-checkbox) {
    display: none;
}

input[type="checkbox"]:checked:not(.vfx-checkbox) {
    display: none;
}

.check-with-label:checked+.label-for-check {
    font-size: var(--size-std);
    color: var(--color-background);
    background: var(--color-accent-3);
}

.label-for-check {
    border: 2px solid var(--color-main);
    padding: 2px;
}


.checkbox-wrapper {
    display: flex; /* Align items inline */
    align-items: center; /* Center items vertically */
    justify-content: start; /* Align items to the start of the container */
}

.vfx-checkbox {
    margin-right: 8px; /* Space between the checkbox and the label */
}


.ascii {
    font-size: 6px;
    color: var(--color-main)
}

.screen {
    border: 4px solid var(--color-main);
    padding: 4px;
    /* min-width: 750px; */
    /* max-width: 1200px; */
}

.warning{
    background-color: black;
    color: red;

}

.version {
    border: 4px solid black;
    padding: 4px;
    width: auto;
    height: 240px;
    font-size: 24px;
    background-color: red;
    color: black;
    display: none;
    text-align: center;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999999999;
    margin: auto;
}

.device {
    border: 4px solid var(--color-main);
    text-align: center;
    /* float: top; */
    padding: 4px;
    /* min-width: 400px; */
    box-sizing: border-box;
}


.patch {
    float: top;
    /* border-bottom: 4px solid var(--color-main);
    border-left: 4px solid var(--color-main);
    border-right: 4px solid var(--color-main); */
    text-align: center;
    padding: 4px;
    /* min-width: 400px; */
    box-sizing: border-box;
}

#pname {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: hidden;
    border: 2px solid var(--color-main);
    margin-top: 2px;
    width: 180px;
    background: var(--color-background);
    color: var(--color-accent-3);
    font-size: var(--size-std);
    font-family: 'pixelFont', monospace;
    /* border-bottom-style: groove; */
}

#pname:focus {
    outline: var(--color-accent-2);
    border-color: var(--color-accent-3);
}

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;
    min-width: 10px;
    margin-top: 4px;
}

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-width: 10px;
    margin-top: 4px;
}

.master {
    grid-row: 1;
    grid-column: 2;
}

.osc1 {
    grid-row: 2/4;
    grid-column: 1;
}

.add {
    grid-row: 2/4;
    grid-column: 3;
}

.filter1 {
    grid-row: 3;
    grid-column: 4;
}

.waveform {
    height:100%;
    width: 100%;
    grid-row: 1;
    grid-column: 3;
}
.waveform-content {
    justify-content: center;
    align-items: center;
    height: 100%; /* Make sure this div takes up the full height */
    position: relative; /* Ensure it's positioned relative for absolute positioning of its children */
}
#buttonWrapper {
    height: 100px;
    position: absolute;
    width: 100%; /* Full width to center the button correctly */
    display: flex;
    justify-content: center;
    align-items: center;
}
#startButton {
    height: 24px;
}


#canvasWrapper {
    height: 500px;
    width: 100%; /* Adjust based on your design */
    height: auto; /* Adjust height to maintain aspect ratio or set a fixed height */
}



.osc2 {
    grid-row: 2/4;
    grid-column: 2;
}

.filter2 {
    grid-row: 3;
    grid-column: 5;
}

.global {
    grid-row: 1;
    grid-column: 1;
}

.attack1 {
    grid-row: 2;
    grid-column: 4;
}
.attack2 {
    grid-row: 2;
    grid-column: 5;
}

.lfo-a {
    grid-row: 1;
    grid-column: 4;
}

.lfo-b {
    grid-row: 1;
    grid-column: 5;
}









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

}


.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%;
    }
}