@font-face {
    font-family: "IBMPlexSansCondensed";
    src: url("IBMPlexSans_Condensed-Medium.ttf") format("truetype");
    font-style: normal;
}




@media (min-width: 1025px) {

    body {
        margin: 0;
        padding: 0;
        display: flex;
        box-sizing: border-box;
        /* Ensure padding doesn't add to the width */

        background-color: rgb(14, 10, 39);
        font-family: monospace;
        overflow: hidden;
        width: 100%;
        height: 100%;
        -webkit-user-select: none;
        /* Safari */
        -ms-user-select: none;
        /* IE 10 and IE 11 */
        user-select: none;
        /* Standard syntax */
    }

    header {
        width: 100%;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.404), rgba(0, 0, 0, 0.027));
        z-index: 2;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: solid rgba(255, 255, 255, 0.062) 1px;
        height: 60px;

    }

    .headerClass {
        width: 33%;
        display: flex;
        justify-content: center;
        gap: 12px;
        align-items: center; 
    }


    .generalButton {

        z-index: 2;
        background-color: transparent;
        color: white;
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    .generalButton:hover {
        background-color: rgb(255, 200, 0);
        transition: .3s;
        color: black;
    }


    #titleContainer {
        max-width: 33%;
        display: flex;
        gap: 60px;
        justify-content: flex-start;
        margin-left: 10px;
    }



    #layoutContainer {
        display: flex;
        flex-direction: column;
        color: rgb(97, 97, 97);
        max-width: 33%;
        justify-content: center;
        align-items: center;
        height: 90px;
        gap: 10px;
        font-size: 15px;

    }


    #pcTitle {
        font-size: 18px;

        background: linear-gradient(to right, #ffdb3b, #5e05ec);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: left;
        cursor: pointer;
        transition: .3s;
        z-index: 2;
        align-items: center;

        text-align: center;
        justify-content: center;

        display: flex;
        text-wrap: nowrap;

    }

    #pcTitle:hover {
        transition: .3s;
        background: linear-gradient(to right, #5e05ec, #ffdb3b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: left;
        transition: .3s;
    }


    .layoutButton {


        border: none;
        background-color: #f0f0f02a;
        color: white;
        cursor: pointer;
        border-radius: 6px;
        aspect-ratio: 1;
        width: 40px;
        border-radius: 20px;
        transition: .3s;
        font-size: 25px;
        overflow: hidden;
        line-height: 1;
    }

    .layoutButton:hover {
        transition: .3s;
        background-color: rgb(255, 200, 0);
        color: black;
    }

    /* Highlighted button */
    .layoutButton.active {
        background-color: rgb(255, 200, 0);
        color: black;

    }

#styleControls{
    gap: 40px; 
    color:white; 
    transform: translate(50%,0);
              position: absolute;
              top: 85px;
              right:50%;   
              z-index: 2; 
              display: none; 
              align-items: center; 
              justify-content: center;
}

    #surveyForm {
        overflow: hidden;
        width: 60%;
        height: 90%;
        border-radius: 20px;
        background-image: linear-gradient(to top, rgb(65, 52, 52), rgb(0, 0, 0));
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-45%, -50%);
        z-index: 1200;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #creditInfo {
        display: flex;
        position: absolute;
        width: 100%;
        left: 0%;
        bottom: 4px;
        transform: translate(0%, 0%);
        color: white;
        font-size: 12px;
        text-align: center;
        align-items: center;
        justify-content: center;

        z-index: 2;
        mix-blend-mode: difference;
        opacity: .2;

    }

    #inspirationContainer {
        position: absolute;
        display: flex;
        flex-direction: column;

        gap: 10px;
        align-items: center;
        width: calc(80%);
        max-height: calc(80%);
        background: linear-gradient(to top, rgb(0, 0, 0), rgb(39, 39, 39));
        top: 90px;
        right: 5%;
        transform: translate(0%, -5%);
        z-index: 4;
        border-radius: 40px;
        padding: 40px;
        font-size: 16px;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        display: none;
    }
 
    #exampleContainer{
    position: absolute;
    width: 200px;
    height: 80%;
overflow: hidden;
    z-index: 3;
    background-color:black;
    right:  10px;
    top:60px;
 
    color: white; 
    border-radius: 10px;
 justify-content: space-between;
    text-align: center;
    flex-direction: column;
    align-items: center;
 display: none;
padding: 10px;
}
#animationGallery {
    height: auto;
    overflow-y: auto;

    /* For Firefox */
    scrollbar-width: thin;           /* makes it thinner */
    scrollbar-color: #505050 transparent; /* thumb color + track color */
}

/* For WebKit browsers (Chrome, Edge, Safari) */
#animationGallery::-webkit-scrollbar {
    width: 6px;  
}

#animationGallery::-webkit-scrollbar-track {
    background: transparent;  
}

#animationGallery::-webkit-scrollbar-thumb {
    background-color: #5f5f5f;  
    border-radius: 3px;    
}

    .animationGrid{
        display:flex;
        flex-direction: column;
     overflow-y: auto;
     height: 100%; 
    }
    .animCard{
        width: 100%;
        justify-content: center;
        align-items: center; 
        
        display: flex;
        flex-direction: column;
    }
.animThumb {
 
    width: 90%;
    cursor: pointer;
    transition: .3s;
    border-radius: 10px;
    border: solid transparent 3px; /* keep border space reserved */
}

.animThumb:hover {
    border-color:rgb(255, 200, 0);
}

.animCaption{
    padding: 5px;
    color: grey;
    font-size: 13px;
    display: none;
}

    .inspTitle {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        padding-bottom: 10px;
        text-align: center;
        width: 95%;
 
    }


    .inspTitle h2 {
        font-size: 30px;
        color: orange;
        line-height: 1;
    }


    .inspTitle span {
        font-size: 16px;
        color: rgb(255, 255, 255);

    }


    #inspireGallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 10px;
        padding: 20px;
        overflow-y: auto;
        max-height: 55vh;
        background: linear-gradient(to top, rgb(65, 64, 64), rgb(17, 11, 0));
        border-radius: 40px;
        border: none;
    }

    .gallery-item {
        text-align: center;
        font-size: 12px;
    }

    .gallery-img {
        width: 100%;
        height: auto;
        cursor: pointer;
        transition: transform 0.3s ease;
        border-radius: 25px;
        transition: .3s;
    }


    .gallery-img:hover {

        box-shadow: rgb(0, 58, 124) 0 0 60px;
        transition: .3s;
    }

    #topBar {


        right: 30px;
        top: 30px;
        gap: 5px;
        display: flex;
        position: absolute;
        min-width: 100px;
    }

    #bottomBar {


        right: 30px;
        bottom: 30px;
        gap: 5px;
        display: flex;
        position: absolute;
        min-width: 100px;
    }

    #animationContainer {
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translate(-50%, 0);

        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-radius: 12px;
        padding: 10px;
        max-width: 50%;
        background-color: rgba(0, 0, 0, 0.13);
        backdrop-filter: blur(1px);

    }

    #animationDisplay {
        display: flex;
        flex-direction: column;
        display: none;
        gap: 10px;
    }

    #timeline {
        width: 90%;
    }

    #playerControls {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        gap: 30px;
    }

    #animationSelector {
        color: white;
        display: flex;
       
        justify-content: center;
        align-items: center;
       gap:10px;
       font-size: 12px; 
     }

    #animationControls {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 30px;
        color: white;
    }

    .playerButton {
        width: 30px;
        height: 30px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border: none;
        font-size: 16px;
        border-radius: 50%;
        cursor: pointer;
        transition: .3s;
    }

    .playerButton:hover {
        transition: .3s;
        background-color: blue;
        color: white;


    }

    .Rec {
        color: red;
    }

    .Rec:hover {
        transition: .3s;
        background-color: red;
        color: white;


    }

    .Active {
        background-color: red;
        color: white;
        animation: recording 1s infinite;
    }

    .expanded {
        position: fixed;
        bottom: 0%;
        left: 0%;
        /* transform: translate(-50%, -50%) scale(1); */
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        z-index: 1000;
        background-color: #5e05ec;
        padding: 0px;
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    body.no-scroll {
        overflow: hidden;
    }

    .expanded-caption {
        position: fixed;
        bottom: 5%;
        right: 0%;
        width: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 1.2em;
        background: rgba(0, 0, 0, 0);
        padding: 5px 10px;
        border-radius: 5px;
        z-index: 1001;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 40px;

        mix-blend-mode: difference;

    }

    .hidden {
        display: none;
    }






    #inspireButton {}

    #sidebar {
        position: absolute;
        left: 0;
        top: 0;
        width: 220px;
        height: calc(100% - 40px);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        color: white;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 2;
        background-color: rgba(32, 32, 32, 0.2);

        /* Move scrollbar to left */
        direction: rtl;
    }

    /* Fix text direction back to normal */
    #sidebar>* {
        direction: ltr;
    }

    /* Style the scrollbar */
    #sidebar::-webkit-scrollbar {
        width: 6px;
    }

    #sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    #sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 220, 124, 0.63);
        border-radius: 3px;
    }

    #sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    #tabContainer {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 7px;
        color: white;
    }

    .tabTitle {
        width: 100%;
        border-bottom: solid rgba(255, 255, 255, 0.2) 1px;
        font-size: 14px;
        font-weight: bold;
        padding: 10px 0 10px 10px;
        margin-bottom: 10px;

        transition: .3s;
    }

    .tabTitle:hover {
        background-color: rgba(0, 0, 0, 0.63);
        color: orange;
        transition: .3s;
    }

    .tabButton {
        width: 100%;
        height: 45px;
        padding: 5px;
        color: white;
        background-color: black;
        font-size: 14px;
        border: solid rgb(75, 75, 75) 1px;
        transition: .3s;
    }

    .tabButton:hover {
        color: black;
        background-color: orange;

        transition: .3s;
    }

    .tabButton.highlighted {
        background-color: orange;
        color: black;
    }





    #brushContainer {
        position: absolute;
        top: 70px;
        left: 10px;

        display: flex;
        flex-direction: row;
        gap: 1px;
        z-index: 2;
    }

    #brushCollection {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #brushControls {
        justify-content: flex-start;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        color: white; 

    }


    .inspButton {

        position: relative;
        padding: 10px;
        width: 100%;
        background: linear-gradient(to top right, rgba(184, 136, 74, 0.527), rgb(77, 64, 45));
        color: rgb(255, 215, 140);
        font-size: 14px;

        border-radius: 20px;
        border: none;
        text-align: center;
        cursor: pointer;
        transition: .3s;
    }

    .inspButton.submit {
        padding: 10px;
        width: 30%;
    }

    .inspButton:hover {
        background-color: #ff933b;
        transition: .3s;
        color: black;
    }



    .brushButton {
        padding: 10px;
        cursor: pointer;
        border: none;
        background: rgba(30, 30, 30);
        color: white;
        transition: 0.3s;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        aspect-ratio: 1;
        font-size: 15px;
        line-height: 1.2;
        text-align: center;
        justify-content: center;
        display: flex;
        -webkit-appearance: none;
    }

    .brushButton:hover {
        background: rgb(255, 200, 0);
        color: black;
    }

    .brushButton.activeBrush {
        background: rgb(255, 200, 0);
        color: black;
    }

    .brushButton.close {


        /* position: absolute;
    right: 50%;
    bottom: 40px;
    transform: translate(-50%,50%); */
    }

   #controlPanel{
          position: absolute;
        left:10px;
        bottom:   20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 250px; 
 
 top: unset;
  
    }

    #colorContainer {
        gap: 15px;
        display: flex;
        flex-direction: column;
        color: white;
        z-index: 2;
   
        background-color: rgba(0, 0, 0, 0.13);
        backdrop-filter: blur(1px);

        height: 120px;
        padding: 10px;
        border-radius: 8px;

    }

 

    #controllerContainer {
 
        gap: 5px;
        display: flex;
        flex-direction: column;

        color: white;
        background-color: rgba(0, 0, 0, 0.13);
        backdrop-filter: blur(1px);
        
        padding: 10px;
        border-radius: 8px;
    }



    #backgroundColorSetup {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #shapeColorContainer {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;


    }

    #bezierControls {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;

    }

    #textBrushContainer {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;

    }

    #specialCharDropdown {
        margin-left: 8px;

    }


    /* Style color pickers and checkboxes */
    input[type="color"] {
        width: 30px;
        height: 30px;
        border: 2px solid #333;
        /* Thin border */
        border-radius: 4px;
        /* Slight rounding for aesthetics */
        padding: 0;
        cursor: pointer;
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border: 1px solid #333;
        /* Thin border */
        border-radius: 4px;
        /* Slight rounding for aesthetics */
        padding: 0;
        cursor: pointer;
    }


    input[type="range"] {

        width: 100px;

    }

    .checkBox {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.521);
        gap: 6px;
    }

    #colorTab {
        display: flex;
        align-items: center;

        justify-content: space-between
    }

    #otherContainer {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        z-index: 2;
        position: absolute;
        right: 10px;
        top: 70px;
        gap: 10px;
    }

    .pickerContainer {
        display: flex;
        flex-direction: row;
        gap: 20px;

    }

    .sliderContainer {
  
        display: flex;
        flex-direction: row;
        gap: 5px;
        justify-content: space-around;
        align-items: center;


    }

    #canvas-container {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;

    }

    .controls {
        display: flex;
        gap: 15px;
        margin-top: 10px;
        align-items: center;
        color: white;
    }

    .controls input[type="color"] {
        width: 40px;
        height: 30px;
        border: none;
    }


    .save-options {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        border-radius: 30px;
        font-size: 20px;
        width: 400px;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-color: transparent;

        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        border: solid rgba(255, 255, 255, 0.41) 1px;
    }

    .save-options label {
        width: 200px;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
    }

    .save-options input[type=number] {
        width: 80px;
        height: 20px;
        font-size: 16px;
        text-align: center;
        border: solid rgba(0, 0, 0, 0.543) 1px;
    }

    .save-options input[type=text] {
        width: 200px;
        height: 20px;
        font-size: 16px;
        text-align: center;

        border: solid rgba(0, 0, 0, 0.543) 1px;
    }


    .save-options select {
        padding: 5px;
        width: 80px;
        border: solid rgba(0, 0, 0, 0.543) 1px;

    }




    .save-options.show {
        display: block;
    }


    .control-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 5px 0;
    }

    .control-row label {
        width: 100px;
    }

    .control-row input[type="range"] {
        width: 150px;
    }

    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        background-color: rgba(0, 0, 0, 0.717);
        color: white;
        padding: 20px;
        border: none;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        text-align: center;
        border-radius: 10px;
        font-size: 20px;
        width: 400px;

    }

    .popupButton {
        margin: 10px;
        padding: 8px 16px;
        border: none;
        cursor: pointer;
        background-color: rgb(0, 0, 0);
        color: white;
        border-radius: 5px;
        transition: .3s;
        font-size: 18px;
        border: solid .5px rgba(255, 255, 255, 0.4);
    }

    .popupButton:hover {
        transition: .3s;
        background-color: orange;
        color: black;
    }

    #mobileButtonBlock {
        display: none;
    }

    #mobileTitle {
        display: none;
    }
#mobileResetButton{
    display: none;
}

    #undoContainer {
        display: flex;

        gap: 5px;
        position: absolute;
        bottom: 20px;
        right: 160px;
        z-index: 2;
    }

        #mobileResetBlock{
        display: none;
    }

    .undoButton {
        width: 40px;
        border-radius: 50%;
        aspect-ratio: 1;
        background-color: rgba(0, 0, 0, 0.13);
        border: solid rgba(255, 255, 255, 0.15) 1px;
        line-height: 1;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        transition: .3s;
        color: white;
    }

    .undoButton:hover {
        background: rgb(255, 200, 0);
        color: black;

    }


    #layerCollection {
        display: flex;
        flex-direction: column;
    }


    #layerContainer {

        padding: 2px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.212);
        position: absolute;
        right: 10px;
        bottom: 20px;
        z-index: 2;
        width: 100px;
        font-size: 10px;
    }

    .layer-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        border-bottom: 1px solid #595858;
        cursor: grab;
    }

    .layer-item:active {
        cursor: grabbing;
        opacity: 0.6;
        /* Visual feedback when dragging */
    }

    .layer-item.selected {
        background-color: rgba(255, 255, 255, 0.2);
        /* Light blue background */

        border-radius: 5px;
    }

    .layer-item.drag-over {
        border: 2px dashed #007bff;
        /* Highlight drop target */
    }

    .layer-item button {
        margin-left: 5px;
        cursor: pointer;
        background: none;
        border: none;
        font-size: 14px;
    }

    .selectClass {
        background-color: transparent;
        /* Make the background transparent */
        font-size: 14px;
        /* Adjust the font size */
        color: #ffffff;
        /* Set the text color */
        border: 1px solid #545454;
        /* Add a subtle border */
        padding: 5px;
        /* Add some padding for better usability */
        border-radius: 5px;
        /* Add rounded corners */
        max-width: 100%;
    }

    .selectClass:focus {
        border-color: red;
        /* Highlight border on focus */
        box-shadow: 0 0 5px red;
        /* Add a subtle shadow on focus */
    }

    .selectClass option {
        background-color: #333;
        /* Background color for dropdown options */
        color: #fff;
        /* Text color for dropdown options */
    }

    #loadingScreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
   
        background: radial-gradient(circle, rgb(43, 30, 179), rgb(8, 28, 90));

        /* background: radial-gradient(circle, white, rgb(255, 243, 221)); */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s;


    }

    .loading-flower {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .loading-text {
        font-size: 1.3em;
        color: rgb(255, 200, 0);
        letter-spacing: 2px;
        margin-top: 10px;
        animation: fadeIn 1.2s infinite alternate;

        font-size: 50px;

    }

    #introButton {
        aspect-ratio: 1;
        width: 80px;
        border-radius: 50%;
        border: none;
        font-size: 17px;
        background-color: red;
        color: white;
        cursor: pointer;
                transition: .3s;

          transform: scale(1);
    }
    #introButton:hover {
        background-color: red;
        color: white;
        border: red solid 1px;
        transition: .3s;
        transform: scale(1.2);
        box-shadow: 0 0 120px red;
    }

    #updateContainer {
        display: flex;
        gap: 30px;
 padding: 20px;
 margin-bottom: 40px;
        font-size: 14px;
        animation: fadeIn 3s ease-in-out;
    }

    /* What's New modal styles */
    .modal.hidden {
        display: none;
    }

    .modal {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        
        background: linear-gradient(to top right, rgb(255, 243, 221), white);
        z-index: 9000;
        padding: 20px;
    }

    #updateContainer h3 {
        color: red;
        font-size: 24px;
    }

    .modal-inner {
        position: relative;
        /* enable absolute placement for the close button */
        width: 60%;
 height: 80%;
        overflow: auto;
        font-size: 24px;
        border-radius: 10px;
        padding: 18px; 
        text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

        color: #111;
    }
 

  
.sliderNumber {
 width: 40px;
 padding: 5px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.103);
  background: rgba(255, 255, 255, 0.034);
  text-align: center;
 
  color: white;
}

    
 

    /* ...existing code... */
}

@media (max-width: 1024px) {
  .sliderNumber { 
     width: 25px;

    background-color: transparent; 
      border: 1px solid rgba(255, 255, 255, 0.103);
      color: white;
      padding: 2px;
    font-size: 12px; }

    body {
        margin: 0;
        padding: 0;
        display: flex;
        box-sizing: border-box;
        /* Ensure padding doesn't add to the width */

        background-color: rgb(0, 0, 0);
        font-family: monospace;
        overflow: hidden;
        width: 100%;
        height: 100%;
        -webkit-user-select: none;
        /* Safari */
        -ms-user-select: none;
        /* IE 10 and IE 11 */
        user-select: none;
        /* Standard syntax */
        position: fixed;
    }

    #canvas-container {
     
      

    }

    
    #loadingScreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
   
        background: radial-gradient(circle, rgb(43, 30, 179), rgb(8, 28, 90));

        /* background: radial-gradient(circle, white, rgb(255, 243, 221)); */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s;


    }

    .loading-flower {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .loading-text {
        font-size: 1.3em;
        color: rgb(255, 200, 0);
        letter-spacing: 2px;
        margin-top: 10px;
        animation: fadeIn 1.2s infinite alternate;

        font-size: 50px;

    }


    .modal {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
 
        background: linear-gradient(to top right, rgb(255, 243, 221), white);
        z-index: 9000;
      
      
    }

    

    .modal-inner {
        position: relative; 
        width: 90%;
 height: 100%;
        overflow: auto;
        font-size: 18px;
        border-radius: 10px;
        padding: 0px; 
        text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; 
        color: #111;

        gap: 20px;
    }
 


    #styleControls{
        background-color: black;
    gap: 40px; 
    padding: 5px 0 5px 0px;
    color:white; 
    transform: translate(50%,0);
    width: 100%;
              position: absolute;
              top: -20px;
              right:50%;   
              z-index: 2; 
              display: none; 
              align-items: center; 
              justify-content: center;
}




   
    #introButton {
        aspect-ratio: 1;
        width: 80px;
        border-radius: 50%;
        border: none;
        font-size: 17px;
        background-color: red;
        color: white;
        cursor: pointer;
                transition: .3s;

          transform: scale(1);
    }
    #introButton:hover {
        background-color: red;
        color: white;
        border: red solid 1px;
        transition: .3s;
        transform: scale(1.2);
        box-shadow: 0 0 120px red;
    }

    #updateContainer {
        display: flex;
        flex-direction: column; 
         font-size: 14px;
        animation: expandAnimation 3s ease-in-out;
 
    }

  
   
#updateContainer h3 {
        color: red;
        font-size: 20px;
    }
    /* What's New modal styles */
    .modal.hidden {
        display: none;
    } 

    #surveyForm {


        overflow: hidden;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-image: linear-gradient(to top, rgb(65, 52, 52), rgb(0, 0, 0));
        display: none;
        position: absolute;
        left: 0%;
        top: 0%;
        transform: unset;
        z-index: 1200;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }

    .generalButton {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        line-height: 1;
        aspect-ratio: 1;
        -webkit-appearance: none;
        z-index: 2;
        background-color: rgb(51, 35, 83);
        color: white;
        border: none;
    }

    .generalButton:hover {
        background-color: rgb(255, 200, 0);
        transition: .3s;
        color: black;
    }



    #sidebar {
        display: none;
    }

    .sliderContainer {
        font-size: 12px;
        color: white;
 
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 5px; 
    }

    #mobileHeader {
        width: 100%;
        height: 50px;
        position: absolute;
        left: 0;
        top: 0;
        color: white;
        display: flex;
        flex-direction: space-between;

        z-index: 2;
        
    }

    .mHeaderBlock {
        width: 100%;
        height: 100%;

        align-items: center;
        justify-content: center;
        display: flex;
 
    }

    #generalButtonBlock{

    /* mix-blend-mode: difference !important; */

}

    .mHeaderBlock button {
 
        aspect-ratio: 1;
      height: 40px;
        border: none;
background-color: transparent;
        transition: .3s;
        font-size: 10px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 5px;
         color: rgb(155, 155, 155);
        background-color: rgba(0, 0, 0, 0.02);
        mix-blend-mode: difference !important;
    }
    .mHeaderBlock span {
 
        font-size: 16px;
        mix-blend-mode: difference !important;
    }
 
    #animationContainer {
        position: relative;


        align-items: center;
        display: flex; 
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        border-radius: 12px;
        padding: 10px;
        width: 100%;
         backdrop-filter: blur(1px);

    }

    #animationDisplay {
        width: 100%;
        display: flex;
        flex-direction: column;
        display: none;
        gap: 10px;
    }

    #animationSelector {
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0px;
        font-size: 16px;
   

    }
    #animateTitle{
        display: none;
    }

    #animationControls {
 overflow-x: auto;
 
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0px;
        color: white;

    }


    
    #playerControls {
        position: absolute;
        left: 5%;
        top:50px;
        width: 90%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 25px;
        padding: 10px 0 10px 0;
        gap: 20px;
    }



    .playerButton {
        width: 30px;
        height: 30px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border: none;
        font-size: 16px;
        border-radius: 50%;
        cursor: pointer;
        transition: .3s;
    }

    .playerButton:hover {
        transition: .3s;
        background-color: blue;
        color: white;


    }

    .Rec {
        color: red;
    }

    .Rec:hover {
        transition: .3s;
        background-color: red;
        color: white;


    }

    .Active {
        background-color: red;
        color: white;
        animation: recording 1s infinite;
    }




    #mobileTitle {
        display: flex;

        font-size: 20px;
        background: linear-gradient(to right, #e68c06, #5e05ec);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: .3s;

    }

    #mobileTitle:hover {
        transition: .3s;
        background: linear-gradient(to right, #5e05ec, #ffdb3b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: left;

    }

    #pcTitle {
        display: none;
    }

    #titleContainer {
        display: none;
    }

    header {
        display: none;
    }





    #layoutContainer {
        display: flex;
        flex-direction: row;
        color: rgb(97, 97, 97);
        max-width: 100%;
        justify-content: center;
        align-items: center;
        height: unset;
        gap: 10px;
        font-size: 15px;
    }

    #compositionContainer {
        flex-direction: row;
        align-items: top;
        justify-content: center;
        display: flex;
        padding: 10px 0 10px 0;
        gap: 10px;  
        width: 100%; 
      
    }

    #composeTitle {
        display: none;
    }


    .layoutButton {


        border: none;
        background-color: #f0f0f02a;
        color: white;
        cursor: pointer;
        border-radius: 6px;
        aspect-ratio: 1;
        width: 30px;
        border-radius: 15px;
        transition: .3s;
        font-size: 15px;
        overflow: hidden;
        line-height: 1;
    }

    .layoutButton:hover {
        transition: .3s;
        background-color: rgb(255, 200, 0);
        color: black;
    }

    .layoutButton.active {
        background-color: rgb(255, 200, 0);
        color: black;

    }



    #mobileControllerBlock {
        width: 100%;

        background-color: rgba(0, 0, 0, 0.8);

        position: absolute;
        left: 0;
        bottom: 0px;
        z-index: 2;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: bottom;
    }

    #specialCharDropdown {
        margin-left: unset;
    }

    #mobileButtonBlock {
        width: 100%;
        display: flex;

        overflow-x: auto;
        z-index: 2;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 0px 10px 0px;
    }
#mobileButtonBlock .tabButton {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    min-width: 58px;
    box-sizing: border-box;
    text-align: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
 
    border: solid rgba(255, 255, 255, 0.055) 1px;
}

 

   #mobileButtonBlock .tabButton:hover {
        color: black;
         border: solid orange 1px; 
border-radius: 5px;
        transition: .3s;
    }

    #mobileButtonBlock .tabButton.highlighted {
                border: solid orange 1px; 
                border-radius: 5px;
        color: black;
    }


    #colorContainer {
        display: flex;
        flex-direction: row;
        justify-content: top;
        align-items: center;
        width: 100%;
        height: 100%;
 
    }

    #brushContainer {

        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 5px;
        padding: 10px;
        flex-direction: column-reverse;
    }

    #brushCollection {
        display: flex;
        flex-direction: row;
        gap: 4px;
    }

    #brushControls {
        display: flex;
        justify-content: center;
        align-items: center;

        display: flex;
        flex-direction: row;
    }

    #bezierControls {
        margin-top: unset;
        display: flex;
        flex-direction: row;
        gap: unset;
    }

    #backgroundColorSetup {

        padding: 10px;
    }


    #shapeColorContainer {
        display: flex;
        flex-direction: row-reverse;

        justify-content: space-around;

        padding: 0px 10px 0px 10px;

    }

    #shapeColorPickers {
        display: flex;
        flex-direction: row;
        gap: 5px;
        padding: 10px;
    }

    .brushButton {
        width: 32px;
        height: 32px;
        background-color: rgb(50, 50, 50);
        font-size: 14px;
        border-radius: 50%;
        aspect-ratio: 1;
        border: none;
        color: white;
        -webkit-appearance: none;
    }

    .brushButton:hover {
        background: rgb(255, 200, 0);
        color: black;
    }

    .brushButton.activeBrush {
        background: rgb(255, 200, 0);
        color: black;
    }

    input[type="range"] {

        width: 60%;

    }

    #colorTab {

        color: white;
        display: flex;

        justify-content: space-between;
        align-items: top;
        padding: 5px 5px 5px 10px;
        gap: 10px;

    }

    .pickerContainer {
        display: flex;
        flex-direction: row;
        gap: 5px;
        height: 100%;

    }

    .checkBox {
        display: flex;
        flex-direction: column;
        gap: 5px;
        color: grey;
        font-size: 10px;
        justify-content: center;
        align-items: center;

    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border: 1px solid #333;
        /* Thin border */
        border-radius: 4px;
        /* Slight rounding for aesthetics */
        padding: 0;
        cursor: pointer;
    }


    /* Style color pickers and checkboxes */
    input[type="color"] {
        height: 26px;
        width: 26px;
        aspect-ratio: 1;
        border: none;
        outline: none;

        padding: 0;
        cursor: pointer;

        /* Remove browser-specific styles */
        -webkit-appearance: none;
        /* For Safari/Chrome */
        -moz-appearance: none;
        /* For Firefox */
        appearance: none;
        /* Standard */
        box-shadow: none;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
#mobileResetButton{
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
color: white;
border: none;
    font-size: 10px;
}

   

     .tabIcon {

    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    pointer-events: none; /* icon should not intercept clicks */
}
 .tabLabel{
    font-size: 10px;
    font-weight: bold;
    color:white;
 }

    .save-options {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        border-radius: 30px;
        font-size: 20px;

        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;

        width: 70%;
        ;
        background-color: rgba(0, 0, 0, 0.717);
        color: rgb(114, 114, 114);
        border: solid rgba(255, 255, 255, 0.233) 1px;
    }



    .save-options h3 {
        font-size: 15px;
        color: white;
    }

    .save-options input[type=number] {
        width: 50%;
        height: 20px;
        font-size: 14px;
        text-align: center;
        background-color: rgba(77, 77, 77, 0.4);
        border: solid rgba(255, 255, 255, 0.193) 1px;
        border-radius: 3px;
        color: #ff933b;
    }


    .save-options input[type=text] {
        height: 20px;
        font-size: 14px;
        text-align: center;

        border: solid rgba(0, 0, 0, 0.543) 1px;
    }


    .save-options label {
        width: 100%;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    .save-options select {
        height: 22px;
        width: 50%;
        font-size: 14px;
        padding: 2px;
        background-color: rgba(77, 77, 77, 0.4);
        border: solid rgba(255, 255, 255, 0.193) 1px;
        border-radius: 3px;
        color: #ff933b;

    }

    .saveBlock {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 90%;
    }

    /* 
    #whDiv {
        width: 100%;
        display: flex; 
    }

    #formatDiv {
         width: 100%;
        display: flex;
      justify-content: space-between;
    } */

    .popup {

        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 40px;
        border: none;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
        width: 60%;

    }

    .popupButton {

        font-size: 16px;
        border-radius: 10px;
        border: none;
        margin: 10px;
        padding: 12px 18px;
    }

    .export {
        background: orange
    }

    .cancel {
        background-color: rgba(138, 138, 138, 0.385);
        color: rgb(162, 162, 162);
    }

    #saveContainer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    #undoContainer {
        display: flex;
        flex-direction: column;



        gap: 20px;
        position: absolute;
        bottom: 240px;
        left: 5px;
        z-index: 2;


    }
    #undoBlock{
        display: flex;
        flex-direction: column;
        gap: 5px;
        color: rgba(255, 255, 255, 0.801);
        font-size: 9px;
        align-items: center;
    }
#mobileResetBlock{
    display: flex;
    flex-direction: column;
align-items: center;
        gap:5px;
}

    #pcFullscreenButton{
        display: none;
    }
    .undoButton {
        width: 30px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: solid rgba(43, 43, 43, 0.418) 1px;
        line-height: 0;
        background-color: #9696963f;
        font-size: 15px;
        color: rgb(255, 255, 255);
        line-height: 0;
        mix-blend-mode: difference;
    }

    .undoButton:hover {
        background: rgb(255, 200, 0);
        color: black;

    }

    #creditInfo {
        display: flex;
        position: absolute;
        width: unset;
        left: 50%;
        bottom: 110px;
        transform: translate(-50%, 0%);
        color: rgba(255, 255, 255, 0.578);
        font-size: 10px;
        text-align: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        mix-blend-mode: difference;
        opacity: .4;
    }


    #otherContainer {
        position: absolute;
        left: 5px;
        bottom: 140px;
        gap: 2px;
        display: flex;
        flex-direction: column;
        align-items: left;
        flex-direction: column-reverse;
        justify-content: space-between;
    }


    #inspirationContainer {
        position: absolute;
        display: none;
        flex-direction: column;

        gap: 10px;
        align-items: center;
        width: 85%;
        height: 75%;
        background: linear-gradient(to top, rgb(0, 0, 0), rgb(39, 39, 39));
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1200;
        border-radius: 20px;
        padding: 20px;
        font-size: 12px;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }

    .inspTitle {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        padding-bottom: 10px;
        text-align: center;
        width: 95%;
    }


    .inspTitle h2 {
        font-size: 18px;
        color: orange;
        line-height: 1;
    }


    .inspTitle span {
        font-size: 10px;
        color: rgb(255, 255, 255);

    }


    #inspireGallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 10px;
        padding: 20px;
        overflow-y: auto;
        max-height: 55vh;

        background: linear-gradient(to top, rgb(65, 64, 64), rgb(17, 11, 0));
        border-radius: 40px;
        border: none;
    }




    /* .inspButton {
        width: 50%;
        background: linear-gradient(to top right, rgba(184, 136, 74, 0.527), rgb(77, 64, 45));
        color: rgb(255, 215, 140);
        font-size: 14px;
        padding: 5px;
        border-radius: 20px;
        border: none;
        cursor: pointer;
        transition: .3s;
    }

    .inspButton:hover {
        background-color: #ff933b;
        transition: .3s;
        color: black;
    } */

    .inspButton.submit {
        width: 50%;
        background: linear-gradient(to top right, rgba(184, 136, 74, 0.527), rgb(77, 64, 45));
        color: rgb(255, 215, 140);
        font-size: 12px;
        padding: 5px;
        border-radius: 20px;
        border: none;
        cursor: pointer;
        transition: .3s;
    }

    .gallery-item {
        text-align: center;
        font-size: 12px;
    }

    .gallery-img {
        width: 100%;
        height: auto;
        cursor: pointer;
        transition: transform 0.3s ease;
        border-radius: 25px;
        transition: .3s;
    }


    .gallery-img:hover {

        box-shadow: rgb(0, 58, 124) 0 0 60px;
        transition: .3s;
    }


    .expanded {
        position: fixed;
        bottom: 0%;
        left: 0%;
        /* transform: translate(-50%, -50%) scale(1); */
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        z-index: 1000;
        background-color: #5e05ec;
        padding: 0px;
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    body.no-scroll {
        overflow: hidden;
    }

    .expanded-caption {
        position: fixed;
        bottom: 5%;
        right: 0%;
        width: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 1.2em;
        background: rgba(0, 0, 0, 0);
        padding: 5px 10px;
        border-radius: 5px;
        z-index: 1001;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 40px;

    }

    .hidden {
        display: none;
    }




    #layerContainer {

        padding: 2px;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }

    #layerCollection {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;

    }


    .layer-item {
        font-size: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        border-bottom: 1px solid #cccccc00;
        cursor: grab;
        color: white;
        background-color: rgba(65, 64, 64, 0.2);
        border-radius: 8px;
    }

    .layer-item:active {
        cursor: grabbing;
        opacity: 0.6;
        /* Visual feedback when dragging */
    }

    .layer-item.drag-over {
        border: 2px dashed #007bff;
        /* Highlight drop target */
    }

    .layer-item button {
        margin-left: 5px;
        cursor: pointer;
        background: none;
        border: none;
        font-size: 14px;
    }


    .selectClass {
        background-color: transparent;
        /* Make the background transparent */
        font-size: 14px;
        /* Adjust the font size */
        color: #ffffff;
        /* Set the text color */
        border: 1px solid #545454;
        /* Add a subtle border */
        padding: 5px;
        /* Add some padding for better usability */
        border-radius: 5px;
        /* Add rounded corners */

    }

    .selectClass:focus {
        border-color: #007BFF;
        /* Highlight border on focus */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        /* Add a subtle shadow on focus */
    }

    .selectClass option {
        background-color: #333;
        /* Background color for dropdown options */
        color: #fff;
        /* Text color for dropdown options */
    }

    #layerButtonPc {
        display: none;
    }


       #exampleContainer{

    position: unset;
    width: 85%;
    height: 40px;
 position: absolute;
 left: calc(7.5% - 10px);
 top: 50px;
    z-index: 3;
    background-color: black;
 
    color: white;  
 justify-content: space-between;
    text-align: center;
    flex-direction: row;
    align-items: center;
 
padding: 10px;
border-radius: 30px;
overflow-y: hidden;
overflow-x: auto;
border: solid rgba(255, 255, 255, 0.1) 1px;;
}
 .animationGrid{
    width: 100%;
        display:flex;
        flex-direction: row;
     overflow-x: auto;
     height: 100%; 
    }
    .animCard{
        width: 100%;
        justify-content: center;
        align-items: center; 
        
        display: flex;
        flex-direction: row;
    }
.animThumb {
 
    height: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: .3s; 
    border: solid transparent 3px; /* keep border space reserved */
}
.animCaption{
    padding: 5px;
    color: grey;
    font-size: 10px;
    display: none;
}
#exampleHeader{
    font-size: 14px;
     padding: 0 10px 0 10px;
     display: none;
}
#exampleCloseBtn{
    position: fixed;
    right: 30px;
    top:65px;
}

   #controlPanel{
   
    display: none;
}
}

@keyframes recording {

    0%,
    100% {
        transform: scale(1);
        background-color: red;
        color: white;
    }

    50% {
        transform: scale(1.1);
        background-color: white;
        color: red;


    }
}

@keyframes fadeIn {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes expandAnimation {
    0% {
        max-height: 0;
        opacity: 0;
        overflow-y: hidden;
    }

    100% {
        max-height: 100%;
        opacity:1;
        overflow-y: hidden;
    }
}