* {
        margin: 0;
        padding: 0;

    }

    @font-face {
        font-family: "Rubik-Medium";
        src: url(assets/fonts/Rubik/Rubik-Medium.ttf);
    }

    @font-face {
        font-family: "Rubik-Regular";
        src: url(assets/fonts/Rubik/Rubik-Regular.ttf);
    }

    @font-face {
        font-family: "Orbit";
        src: url(assets/fonts/Orbit-Regular.woff2);
      }

    body,
    html {
        height: 100%;
        width: 100%;
        background-color: radial-gradient(circle, 
        rgba(255, 255, 255, 0.05) 10%, 
        rgba(250, 250, 250, 0.1) 25%, 
        rgba(245, 245, 245, 0.2) 40%, 
        rgba(240, 240, 240, 0.3) 70%, 
        rgba(235, 235, 235, 0.4) 100%);
        font-family: "Rubik-Regular";    
    }


    .controls-container {
        width: 15%;
        box-sizing: border-box;
        padding-right: 1vw;
        padding-left: 1vw;
        background: white;
        position: absolute;
        right:0;
       
    }

    #fontFileInput {
        width: 100%;
    }

    .checkbox-container {

        margin-bottom: 2vh;

    }

    .checkbox-container input {
        margin: 2%;
        transform: scale(1.5);

    }

    .checkbox-container input:checked {
        accent-color: black;
        /* Change checkbox color to black when checked */
    }


    .checkbox-column {
        display: flex;
        flex-direction: column;
        margin-right: 20px;
        /* Add space between columns */
    }

    .checkbox-container label {
        margin-bottom: 5px;
    }

    .back-btn {
        background-color: #000000;
        position: relative;
        display: flex;
        color: rgb(255, 255, 255);
        background: black;
        padding: 1vh 1vw;
        border-radius: 10px;
        text-align: center;
        align-self: center;
        font-weight: normal;
        margin: 0.5vh 0;
        text-decoration: none;
    }

    .back-btn:hover {
        background: linear-gradient(to left, 
        rgba(247, 42, 31, 0.05) 10%, 
        rgba(247, 86, 75, 0.1) 25%, 
        rgba(227, 112, 138, 0.15) 40%, 
        rgba(180, 151, 213, 0.2) 70%, 
        rgba(145, 152, 229, 0.25) 100%);
        color: rgb(0, 0, 0);
        transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

.instruct-button {

    padding: 1vh 1vw;
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
    text-decoration: none;
    color: white;
width: 100%;
font-family: "Rubik-Medium";
cursor: pointer;
font-weight: lighter;

}
    .pickers {
        margin-bottom: 2vh;
    }

    .preset-style {
        margin: 1vh 0 1vh 0;
        width: 100%;
        height: 5vh;
        font-family: "Rubik-Medium";
        background: black;
        color: white;
        border-radius: 10px;
        cursor: pointer;
    }
    

    input[type=text] {
        font-size: 1.5rem;
width: 100%;
    }

   

    .label-wrapper {
        margin: 0vh 0 2vh 0;
        border-radius: 10px;
        padding: 2vh 1vw;
        background-color: white;
        
    }
    .color-wrapper {
        border-radius:5px;
        box-shadow: 0 2px 12px rgba(0, 0, 12, 0.32), /* More pronounced bottom shadow */
        0 2px 2px rgba(0,0,10, 0.26),  /* Subtle all-around shadow */
        0 0 2px rgba(0, 0, 15, 0.22);   /* Light diffuse shadow */   
        
    }
    

    /* Dropdown Button */
    .dropbtn {
        background-color: rgb(15, 15, 16);
        color: white;
        font-size: 1rem;
    border: none;
        cursor: pointer;
    margin: 0 0;
    width: 100%;
        border-radius: 10px;
        font-family: inherit;
        padding: 1vh 0;
        margin-bottom: 0.5vh;
    }

    

    .dropdown {
        position: relative;
        display: inline-block;
        width: 100%;
        
    }


    .dropdown-content {
        display: none;
   margin-bottom: 1vh;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        border: 1px solid rgb(15, 15, 16);
        border-radius: 10px;
    }


    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }


    .dropdown-content a:hover {
        background-color: rgb(15, 15, 16);
        color: white;
        border-radius: 10px;
    }


    .dropdown:hover .dropdown-content {
        display: block;
    }


    .dropdown:hover .dropbtn {
        background-color: rgb(15, 15, 16);
    }



    .font-upload-container {
        padding: 2vh 0;
    }


    #textInputX {
        margin-bottom: 0.5vh;
    }

    #textInputY {
        margin-top: 0.5vh;
        margin-bottom: 2vh;
    }

    #stretchContainer, #gradientDiffContainer {
        display: none;
    }

    .slider-container {
        margin: 1vh 0 1vh 0;
    }

    .canvas-container {
        width: 85%;

        background-color: rgb(0, 0, 0);
        position: fixed;
        /* Make it fixed */
        top: 0;
        /* Align to the top */
        left: 0;
        /* Align to the right */
        height: 100%;
        /* Full height */

    }

    canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    label {
        display: block;
font-size: 1rem;
    }

    .controls-label {
       
       
        padding: 0.5vh 0.5vw;
        text-align: center;
     background-color: rgb(15, 15, 16);
     color: white;
     border-radius: 5px 5px 0 0;
     text-transform: uppercase;
     margin-top: 2vh;
       
    }

    #recordButton {
        background-color: red;
        width: 100%;
        height: 10vh;
        color: white;
        font-family: "Rubik-Medium";
        font-size: 1.5rem;
        border: none;
        border-radius: 10px;
        margin: 2vh 0;
    }

 
    #shearFactor::-webkit-slider-thumb {
        width: calc(100%/3);
    }

    #typeShape::-webkit-slider-thumb, #patternFill::-webkit-slider-thumb, #contentFill::-webkit-slider-thumb  {
        width: calc(100%/2);
    }

    /* General slider styles */
    .sliders {
        -webkit-appearance: none;
        /* Override default CSS styles */
        appearance: none;
        width: 100%;
        height: 10px;
        /* Default height */
        background: #000000;
        /* Grey background */
        cursor: pointer;
        /* Mouse pointer on hover */
        border-radius: 5px;
        /* Rounded corners for the track */
        margin: 10px 0;
    }

    /* Webkit browsers (Chrome, Safari, etc.) */
    .sliders::-webkit-slider-runnable-track {
        background: #dbdbdb;
        height: 20px;
        cursor: pointer;
        border-radius: 5px;
    }

    .sliders::-webkit-slider-thumb {
        width: 20px;
      
     height: 100%;
        background: rgb(171, 170, 170);
        cursor: pointer;
        -webkit-appearance: none;
  
        border-radius: 5px;
      
    }


    .instructions-container {
        position: fixed;
        width:70vw;
        height: 70vh;
        left: 5vw;
        background: white;
        z-index: 999;
font-size: 2rem;
padding: 2vh 2vw;
border-radius: 10px;
display: none;
border: black solid 2px;

display: none;
            flex-direction: column; /* Arrange children in a column */
            justify-content: flex-end; /* Align children at the bottom */

    }

    .credits {
        font-size: 1rem;
      }

    .mobile-warning {
  
        text-align: center;
        height: 100vh;
        text-align: center;
        background: radial-gradient(farthest-corner at 40px 40px, 
        rgba(247, 42, 31, 0.05) 10%, 
        rgba(247, 86, 75, 0.1) 25%, 
        rgba(227, 112, 138, 0.15) 40%, 
        rgba(180, 151, 213, 0.2) 70%, 
        rgba(145, 152, 229, 0.25) 100%);
        position: fixed;
      font-family: "Rubik-Regular";
      font-size: 1.2rem;
      padding: 1vh 5vw;
        display: none;
        text-align: left;
        font-family: "Rubik-Medium";
      }
      
      
      
      @media (max-width: 768px) {
        .content {
            display: none; /* Hide existing content */
        }
      
        .mobile-warning {
            display: flex; /* Show warning message */
        }
      }


      /* For WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px;  /* Width of the scrollbar */
    height: 8px; /* Height of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #afafaf; /* Background of the scrollbar track */
    
}

::-webkit-scrollbar-thumb {
    background: #1f1f1f; /* Color of the scrollbar handle */
    border-radius: 10px; /* Rounded corners for the handle */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the scrollbar handle on hover */
}

/* For Firefox */
.scrollbar {
    scrollbar-width: thin; /* Makes the scrollbar thin */
    scrollbar-color: #888 #f1f1f1; /* thumb color and track color */
}