@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

html {
    background-color: black;
    color: #26b050;
}

.synthwave {
    background-color: black; /* Black button background */
    color: #fff;
    border: 1px solid #00ff00; /* Green border */
    padding: 0px 0px;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Press Start 2P', sans-serif; /* Retro futuristic font */
    letter-spacing: 2px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), /* Green glow */
    0 0 25px rgba(0, 255, 0, 0.7),
    0 0 35px rgba(0, 255, 0, 0.6);
    transition: all 0.3s ease;
    border-radius: 1px;
    text-align: center;
}

.highlightable {
    background-color: black;
}
/* Highlight the element when it becomes the target */
.highlight-u {
    border: 1px solid #80ff00; /* Green border */
    padding: 0px 0px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(72, 255, 0, 0.8), /* Green glow */
    0 0 25px rgba(64, 255, 0, 0.7),
    0 0 35px rgb(17, 255, 0);
    transition: all 0.3s ease;
    border-radius: 1px;
    text-align: center;
}

/* Highlight the element when it becomes the target */
.highlight {
    border: 1px solid #ff0000; /* Green border */
    padding: 0px 0px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 0, 38, 0.8), /* Green glow */
    0 0 25px rgba(255, 0, 38, 0.7),
    0 0 35px rgb(255, 0, 0);
    transition: all 0.3s ease;
    border-radius: 1px;
    text-align: center;
}

.synthwave-btn {
    background-color: black; /* Black button background */
    color: #fff;
    border: 2px solid #00ff00; /* Green border */
    padding: 15px 30px;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Press Start 2P', sans-serif; /* Retro futuristic font */
    letter-spacing: 2px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), /* Green glow */
    0 0 25px rgba(0, 255, 0, 0.7),
    0 0 35px rgba(0, 255, 0, 0.6);
    transition: all 0.3s ease;
    border-radius: 8px;
    text-align: center;
}

/* Green Glowing Effect */
.synthwave-btn:hover {
    box-shadow: 0 0 25px rgba(0, 255, 0, 1), /* Stronger green glow on hover */
    0 0 35px rgba(0, 255, 0, 1),
    0 0 45px rgba(0, 255, 0, 1),
    0 0 55px rgba(0, 255, 0, 1);
    transform: scale(1.05); /* Slightly bigger on hover */
}

/* Animated Neon Border */
.synthwave-btn::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #00ff00, #00cc00, #00ff66, #00ffcc); /* Green gradient */
    z-index: -1;
    filter: blur(8px);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.center-wrapper {
    display: flex;
    justify-content: center; /* Horizontally centers the grid */
    align-items: center;     /* Vertically centers the grid */
    height: 100vh;           /* Full viewport height */
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 32px);
    /*grid-template-columns: repeat(3, 1fr);*/
    grid-auto-rows: minmax(0px, auto);
    background-color: black;
    grid-gap: 0; /* No gap between grid cells */
    padding: 0;  /* No padding inside the container */
    top: 0;
    margin: 0;   /* No margin for the container */
}

.grid-item {
    padding: 0;
    margin: 0;
    height: 32px;
    width: 32px;
    border: 1px solid #514f4f;
    font-size: 0; /* Removes extra spacing from inline elements */
}

.grid-item img, .grid-item span {
    display: block; /* Ensures no extra space is added */
}

body {
    font-family: "Press Start 2P", monospace;
    background-color: #111; /* Dark background for the body */
    color: #00FF00; /* Green text color */
}

.toolbar {
    background-color: #000; /* Black background for the toolbar */
    overflow: hidden; /* Clear floats */
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.toolbar div {
    float: left; /* Align buttons to the left */
    display: inline-block; /* Button display */
    color: #00FF00; /* Green text color */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underline */
    margin: 0; /* No margin */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 18px; /* Font size */
    background-color: transparent; /* Transparent background */
}

.toolbar div:hover {
    text-underline: #26b050;
}
h1:focus {
    outline: none;
}

a {
    color: white;
}
a:visited {
    color: white;
}
a:hover {
    color: cyan;
}

.container {
    display: flex;
}

.box {
    flex: 1; /* Optional: Adjusts the width equally */
    padding: 10px;
    background-color: lightblue;
    margin: 5px;
}


.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}