@font-face {
font-family: 'Windows 95';
src: url('./fonts/ms-sans-serif.ttf');
font-weight: normal;
font-style: normal;
}

@keyframes neonFlash {
    0% { background-color: #ff00ff; } /* Hot Pink */
    14.28% { background-color: #00ffff; } /* Cyan */
    28.56% { background-color: #00ff00; } /* Lime Green */
    42.84% { background-color: #ffff00; } /* Yellow */
    57.12% { background-color: #ff00ff; } /* Magenta */
    71.4% { background-color: #00bfff; } /* Electric Blue */
    85.68% { background-color: #ff6600; } /* Orange */
    100% { background-color: #ff00ff; } /* Hot Pink */
}

body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    background-color: #ff00ff;
    min-height: 100vh;
    animation: neonFlash 3s ease-in-out infinite;
}

#container {
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    gap: 0;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1;
}

.card-header {
    background: linear-gradient(to right, #00007b, #7bb2c3) !important;
}

.cardTitle {
    font-size: 0.9rem;
    padding: 1px 0 1px -2px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f3ef1b;
}

.cardTitle-icon {
    height: 2em;
    width: auto;
    vertical-align: middle;
}

.titleContainer {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.title {
    text-align: center;
    font-size: 1.5rem;
}

#canvas-container {
    position: relative;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

canvas {
    display: block;
    background-color: #f0f0f0;
    border: 1px solid #333;
}

.fileUpload {
    margin-bottom: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
}

#controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-bottom: 20px;
}

#controls button:hover {
    color: #f3ef1b;
    background-color: #b0b0b0 !important;
    cursor: pointer;
}

.addContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 4px;
    margin-top: 10px;
}

.addContainer button:hover {
    color: #f3ef1b;
    background-color: #b0b0b0 !important;
    cursor: pointer;
}

.buttonGroup button:hover {
    color: #f3ef1b;
    background-color: #b0b0b0 !important;
    cursor: pointer;
}

button, input[type="file"] {
    cursor: pointer;
}

#rotation-slider-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.rotateText {
    font-size: 0.7rem;
    font-weight: 800;
}

#rotation-slider {
    width: 200px;
    accent-color: #0200a5;
}

.overlayContainer {
    box-sizing: border-box;
    width: 100%;
    border-top: 2px solid white;
    border-left: none !important;
    border-right: 2px solid #393939;
    border-bottom: 2px solid #393939;
    border-radius: 0;
    background-color: #C0C0C0;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
}

.card {
    box-shadow: none !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.col-12 {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#overlayList {
    padding-top: 10px;
    border-top: 2px solid #BDBDBD;
    border-left: 3px solid #BDBDBD;
    border-right: 3px solid #BDBDBD;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    overflow-y: scroll;
    overflow-x: hidden;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

#overlayList img {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 2px solid transparent;
}

#overlayList img.selected {
    border-color: black;
    border-style: dotted;
}

.resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: rgb(227, 25, 25);
    cursor: pointer;
}

.btn-text {
    font-family: 'Windows 95' !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-text i {
    vertical-align: middle;
}

.inputText {
    font-family: 'Windows 95' !important;
    font-size: 0.6rem;
}

.inputText:hover {
    color: #f3ef1b;
}

input[type="file"] {
    position: relative;
}

input[type="file"]::file-selector-button {
    color: transparent;
}

/* Faked label styles and icon */
input[type="file"]::before {
    position: absolute;
    pointer-events: none;
    top: 7px;
    left: 10px;
    height: 20px;
    width: 20px;
    margin-left: 5px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b2b2b'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}

input[type="file"]::after {
    position: absolute;
    pointer-events: none;
    top: 10px;
    left: 40px;
    color: #000;
    content: "Upload File";
}

/* file upload button */
input[type="file"]::file-selector-button {
    cursor: pointer;
    margin-right: 10px;
    background-color: #c0c0c0;
    border-color: #a0a0a0;
    transition: all 0.2s ease;
    letter-spacing: 0.025em;
    font-size: .6rem;
    border-radius: 0.125rem;
    padding: .6rem 2rem;
    max-height: 37px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #858585;
    border-bottom: 2px solid #858585;
    transition: background-color 200ms;
}

input[type="file"]::file-selector-button:active {
    background-color: #d6d6d6;
    transition: all 0.2s ease;
    transition: background-color 200ms;
}

input[type="file"]::file-selector-button:hover {
    background-color: #b0b0b0 !important;
    transition: all 0.2s ease;
    transition: background-color 200ms;
}

.instructionContainer {
    margin-top: 30px;
    padding: 15px;
    background-color: #f8f9fa;
    width: fit-content;
    max-width: 100%;
    border: 1px solid #333;
    margin-left: auto;
    margin-right: auto;
}

.instructions {
    font-size: 0.7rem;
    font-weight: 800;
}

.instructionParagraph {
    font-size: 0.6rem;
}

.backButtonContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

.backButtonContainer button {
    width: auto;
}

.footerLinks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footerLinks ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footerLinks ul li a {
    color: #0200a5;
}

.footerLinks ul li a:hover {
    color: #f3ef1b;
}

.generator-footer {
    width: 100%;
    padding: 15px;
    background-color: #C0C0C0;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #393939;
    border-bottom: 2px solid #393939;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
}

.footer-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.footer-left button:hover {
    color: #f3ef1b;
    background-color: #b0b0b0 !important;
    cursor: pointer;
}

.generator-footer .footerLinks {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 1199px) {
    #container {
        flex-direction: column !important;
        width: 100%;
        max-width: 100%;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .col-12 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .overlayContainer {
        width: 100% !important;
        max-width: 100% !important;
        border-left: 2px solid white !important;
    }
}

@media screen and (max-width: 768px) {
    .overlayContainer {
        min-height: 400px !important;
        box-sizing: border-box;
    }

    #overlayList {
        min-height: 400px !important;
        padding-top: 2px;
        gap: 5px;
        width: 100%;
        overflow-x: hidden;
    }
}

@media screen and (max-width:768px) {
    #container {
        width: 100%;
        max-width: 100%;
    }

    .card {
        width: 100% !important;
        max-width: 150% !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .cardTitle {
        font-size: 0.7rem;
    }

    .col-12 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .fileUpload {
        width: 100%;
        max-width: 100%;
        justify-content: center !important;
    }

    #canvas-container {
        width: 100%;
        max-width: 100%;
    }

    #overlayList img {
        width: 50px;
        height: 50px;
        cursor: pointer;
        border: 2px solid transparent;
    }

    .overlayContainer {
        min-height: 400px !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    #overlayList {
        min-height: 400px !important;
        padding-top: 5px;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 20px;
        overflow-x: hidden;
    }

    .generator-footer {
        flex-direction: column;
        gap: 15px;
    }

    .generator-footer .footerLinks {
        position: static;
        transform: none;
        order: 1;
    }

    .footerLinks ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 15px;
        list-style: none;
        padding: 0;
    }

    .footerLinks ul li a {
        font-size: 0.6rem;
    }

    .footer-left {
        order: 2;
        justify-content: center;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    #container {
        padding-top: 0;
        position: relative;
        display: flex;
        gap: 0;
        justify-content: flex-start;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        min-width: 800px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .col-12 {
        flex: 1;
        min-width: 0;
        display: flex;
    }

    .card, .card-body {
        min-height: 900px !important;
    }
    
    
    .overlayContainer {
        min-height: 900px !important;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    
    #overlayList {
        flex: 1;
        min-height: 0;
    }
    
    .generator-footer {
        min-width: 800px;
        max-width: 1200px;
        margin: 0 auto;
    }
}