html{
            font-size: 10vmin;
        }        
        body {
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #D8D1C8;
        }
        #imageArea {
            position: absolute;
            background-color: #ffffff;
            border: 2px solid black;
            top:50%;
            left:75%;
            transform:translate(-50%, -50%);
            display:none;

        }

        #canvasContainer{
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            transition: 1s;
        }

        #reference {
            position:absolute;
            background-color: #ffffff;
            border: 2px solid black;
            top:50%;
            left:25%;
            transform:translate(-50%, -50%);
            display:none;
        }

        #fileOpener{
            position:absolute;
            width:100%;
            height:100%;
            left:0%;
            top:0%;
            z-index: 100;
            transition: 1s;
        }

        
        #file1{
            position:fixed;
            top:50%;
            left:25%;
            transform:translate(-50%, -50%);
            height: 50%;
            width: 35%;
            background-color:#333333;
            border-radius:35px;
            corner-shape: squircle;
            content: '';
            overflow:hidden;
            z-index:101;
            box-shadow: 0px 0px 1px 1px #abdf901a;
            cursor:default;
        }
        #file1:hover{
            cursor: pointer;
        }

        #file2{
            position:fixed;
            top:50%;
            left:75%;
            transform:translate(-50%, -50%);
            height: 50%;
            width: 35%;            
            background-color:#333333;
            border-radius:35px;
            corner-shape: squircle;
            content: '';
            overflow:hidden;
            z-index: 101;
            box-shadow: 0px 0px 1px 1px #abdf901a;
            cursor:default;
        }
        #file2:hover{
            cursor:pointer;
        }


        .pulse{
            animation: pulsify 2s linear infinite;
        }
        .showImage{
            background-size: cover;
            background-position: center;
            opacity: 0.2;
            color:black;
        }
        #wordsInside1{
           pointer-events:none;
             pointer-events:none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin:0;
            padding:0;
            width:100%;
            text-align:center;
            color:white;
            font-size: 0.5rem;
        }
        #wordsInside2{
            pointer-events:none;
             pointer-events:none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin:0;
            padding:0;
            width:100%;
            text-align:center;
            color:white;
            font-size: 0.5rem;
        }

        @keyframes pulsify{
            0% {
                box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
            }
            100% {
                box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
            }
        }


        #preview1{
            position:absolute;
            pointer-events:none;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            width:100%;
            height:100%;
            margin: 0;

        }
        #preview2{
            position:absolute;
            pointer-events:none;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            width:100%;
            height:100%;
            margin:0;

        }

        #cancel1{
            background:none;
            color:red;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            height:100%;
            width:100%;
            z-index: 9999;
            margin: 0;
            font-size: 5rem;

        }
        #cancel2{
            background:none;
            color:red;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            height:100%;
            width:100%;
            z-index:9999;
            margin:0;
            font-size:5rem;

        }

        .cancelButtonInactive{
            opacity: 0;
            pointer-events:none;
        }
        .cancelButtonActive{
            pointer-events: auto;
            opacity: 0;
            transition: 1s;
        }
        .cancelButtonActive:hover{
            opacity:1;
            transition:1s;
        }

        
        #startImages{
            position:absolute;
            top:50%;
            left: 30%;
            transform:translate(-50%, -50%);
            z-index: 300;
            width: 20%;
            margin:0;
            height:100%;
            background:none;
            color:white;
            border: solid;
            border-color:white;
            border-width: 0px 1px 0px 1px;
            font-size: 0.3rem;
        }

         #downloadButton{
            position:absolute;
            top:50%;
            left: 70%;
            transform:translate(-50%, -50%);
            z-index: 300;
            width: 20%;
            margin:0;
            height:100%;
            background:none;
            color:white;
            border: solid;
            border-color:white;
            border-width: 0px 1px 0px 1px;
            font-size: 0.3rem;
        }

        #openFileDropper{
            position:absolute;
            top:50%;
            left: 10%;
            transform: translate(-50%, -50%);
            z-index: 300;
            width: 20%;
            margin:0;
            height:100%;
            border-radius:15px 0px 0px 0px;
            background:none;
            color:white;
            border: solid;
            border-color:white;
            border-width: 0px 1px 0px 1px;
            font-size: 0.3rem;
        }

        #runAnimation{
            position:absolute;
            top:50%;
            left: 50%;
            transform:translate(-50%, -50%);
            z-index: 300;
            width:20%;
            height:100%;
            background:none;
            margin:0;
            color:white;
            border: solid;
            border-color:white;
            border-width: 0px 1px 0px 1px;
            padding: 0;
            font-size: 0.3rem;
        }

        #restart{
            position:absolute;
            top:50%;
            left: 90%;
            transform:translate(-50%, -50%);
            z-index: 300;
            width: 20%;
            margin:0;
            height:100%;
            border-radius: 0px 15px 0px 0px;
            background:none;
            color:white;
            border: solid;
            border-color:white;
            border-width: 0px 1px 0px 1px;
            font-size: 0.3rem;
        }

        #controlPanel{
            position:fixed;
            top:92.5%;
            left:50%;
            transform:translate(-50%, -50%);
            width:100%;
            height:15%;
            margin:0;
            border-radius: 15px 15px 0px 0px;
            background-color:#333333;
            z-index: 200;
            padding:0;
        }

        #controlPanelTitle{
            position: absolute;
            left:50%;
            top: -15%;
            transform:translate(-50%, -50%);
            height: 25%;
            width:25%;
            background-color: #333333;
            border-radius: 15px 15px 0px 0px;
            color:white;
            padding:0;
            text-align: center;
            font-size: 0.2rem;

        }

        #noClick1{
            position:absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
            width:100%;
            height: 100%;
            z-index:400;
            border-radius: 15px 0px 0px 0px;
        }
        
        #noClick2{
            position:absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
            width:100%;
            height: 100%;
            z-index:500;
        }

        #noClick3{
            position:absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
            width:100%;
            height: 100%;
            z-index:400;
        }
        #noClick4{
            position:absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
            width:100%;
            height: 100%;
            z-index:400;
        }
        #noClick5{
            position:absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
            width:100%;
            height: 100%;
            z-index:400;
            border-radius: 0px 15px 0px 0px;
        }

        .clicked{
            background-color: black;
            opacity: 0.4;
            cursor: default;
        }
        .noClicked{
            z-index: 200;
            background-color:none;
            opacity: 0;
            cursor: pointer;
        }

        #show1{
            position:absolute;
            content: '';
            z-index:400;
            left: 90%;
            top: 20%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        #show2{
            position:absolute;
            content: '';
            z-index:400;
            left: 80%;
            top: 20%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }

        #loadBar{
            position:absolute;

            top: 20%;
            left: 50%;

            transform:translate(-50%, -50%);

            height: 10%;
            width: 75%;

            border-radius: 15px;

            background-color: gray;

            z-index: 300;

            overflow:hidden;

        }

        #loadBarGreen{
            position:absolute;
            content: '';
            
            height: 100%;
            width: 100%;

            top:50%;
            left: -50%;

            border-radius: 15px;

            transform:translate(-50%, -50%);
            background-color: green;
            padding: 0;

            font-size: 0.17rem;


        }

        #mainContainer{
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            padding: 0;
            margin: 0;
            transition: 1s;
        }

        #startingScreen{
            left: 0;
            top: 0%;
            height: 100%;
            width: 100%;
            position: fixed;
            transition: 1s;
            margin: 0;
            padding: 0;
        }

        #welcomeTitle{
            left: 50%;
            transform: translate(-50%);
            top: 40%;
            width: 100%;
            height: 10%;
            text-align: center;
            padding: 0;
            margin: 0;
            position: absolute;
            color: white;
            font-size:1rem;
        }

        #placeHolderText{
            position: absolute;
        }

        #name{
            position: absolute;
            width: 30%;               
            height: 10%;  
            text-align:center;
            border: 2px solid white;
            border-radius: 15px;
            text-align: left;
            margin: 0;
            padding: 2px;
            background: none;       /* relative to #startingScreen's 5vw, scales consistently with welcomeTitle */
            color: white;
            z-index: 300;
            transition: 1s;
            font-size: 1rem;
            left: 50%;
            transform:translateX(-50%);
            top: 45%;

        }
        #placeHolderText{
            position:absolute;
            width: 30%;
            height: 10%;
            top: 45%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1rem;
            color: white;
            opacity: 0.5;
            text-align: left;
            border:none;
            padding: 0;
            margin: 0;
            z-index: 200;
            transition: 1s;
            background-color:#D8D1C8;
            display: flex;
            align-items: center;
            pointer-events:none;
        }

        #text2 {
            position: fixed;
            left: 93%;
            top: 2%;
            color: red;
            height: 5%;
            width: 10%;
            font-size: 0.1rem;
        }

        #name:focus{
            outline: none;
            border: 2px solid white;
            transition: 1s;
        }

        #choices{

            position: fixed;
            top: 37.5%;
            left: 12.5%;
            height: 25%;
            width: 75%;
            background-color: #333333;
            border-radius: 35px;
            transition: 1s;
        }

        #work{
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translate(-50%, -50%);
            height: 50%;
            width: 20%;
            border-radius: 35px;
            border: none;
            background-color: #D8D1C8;
            font-size: 0.5rem;

        }

        #anotherPage{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 50%;
            width: 20%;
            border-radius: 35px;
            border:none;
            background-color:#D8D1C8;
            font-size: 0.5rem;
            
        }

        #code{

            position:absolute;
            top: 50%;
            left: 75%;
            transform:translate(-50%, -50%);
            height: 50%;
            width: 20%;
            border-radius: 35px;
            border: none;
            background-color: #D8D1C8;
            font-size: 0.5rem;

        }

        #goAway{
            position:fixed;
            color:white;
            border:none;
            background-color: #333333;
            top: 5%;
            left:5%;
            height: 5%;
            width: 15%;
    
            border-radius: 35px;
            z-index: 500;
            transition: 1s;
            font-size: 0.25rem;
        }

        /* This is the move animation */
        .move{
            transform: translateX(150%);
        }
        .moveTitleScreen{
            transform: translateY(-40%);
        }
        .moveOut{
            transform: translateX(-150%);
        }

        #howItWork{
            position: fixed;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border:none;
            background: none;
            transition: 1s;
        }
        #justabackground{
            position: absolute;
            top: 20%;
            left: 0%;

            width: 100%;
            height: 80%;

            background-color: #D8D1C8;

            border:none;
            padding: 0px;

            overflow: auto;
            border-radius: 35px;
            transition: 1s;
        }

        button:hover{
            cursor: pointer;
        }
        button{
            cursor: default;
        }


        #codeContainer{
            position:fixed;
            top:15%;
            left:0%;
            width: 100%;
            height: 85%;
            transition: 1s;
        }

        #gitHub{
            position:absolute;
            left: 15%;
            top: 5%;
            height: 5%;
            width: 10%;
            transform: translate(-50%, -50%);
            color: white;
            border-radius: 35px;
            background-color: #333333;
            text-align: center;
            margin: 0;
            padding: 0;
            border:none;
            font-size: 0.2rem;

        }

        #tabs{
            position: absolute;
            top: -5%;
            height: 5%;
            left: 25%;
            width: 50%;
            border-radius: 35px 35px 0px 0px;
            background-color:#333333;
        }

        #html{
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            width: 25%;
            border-radius: 35px 0px 0px 0px;
            background: none;
            border-color: white;
            border-width: 0 1px 0px 0px;
            transition: 1s;
            font-size: 0.2rem;
        }

        #css{
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translateY(-50%);
            height: 100%;
            width: 25%;
            border-radius: 0px 0px 0px 0px;
            background: none;
            border-color: white;
            border-width: 0 1px 0px 1px;
            transition: 1s;
            font-size: 0.2rem;
        }
        #js1{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%);
            height: 100%;
            width: 25%;
            border-radius: 0px 0px 0px 0px;
            background: none;
            border-color: white;
            border-width: 0px 1px 0px 1px;
            transition: 1s;
            font-size: 0.2rem;
        }
        #js2{
            position: absolute;
            top: 50%;
            left: 75%;
            transform: translateY(-50%);
            height: 100%;
            width: 25%;
            border-radius: 0px 35px 0px 0px;
            background: none;
            border-width: 0px 0px 0px 1px;
            border-color: white;
            color: white;
            transition: 1s;
            font-size: 0.2rem;
        }

        #transitioner{
            position: absolute;
            background-color: #CCCCCC;
            opacity: 0.2;
            border-radius: 15px;
            top: 5%;
            height: 90%;
            left: 5%;
            width: 15%;
            z-index: 9999;
            transition: 1s;

        }

        #codeBase{
            position:absolute;
            top: 10%;
            border-radius: 35px 35px 35px 35px;
            height: 90%;
            width: 98%;
            left: 50%;
            transform:translateX(-50%);
            background-color:#333333;
            padding: 0;
            margin: 0;

        }

        #actualCode{
            background-color:#002b36;
            position: absolute;
            border-radius: 15px;
            top: 2.5%;
            left: 2%;
            height: 95%;
            width: 96%;
            margin: 0;
            overflow: auto; /* changed from hidden — allow scrolling if content is long */
            white-space: pre-wrap; /* preserves line breaks/indentation, wraps long lines */
            color: white; /* make sure text color is visible against the dark background */
            font-family: monospace;
            padding: 10px;
            box-sizing: border-box;
            transition:1s;
            font-size: 0.2rem;
        }

        #textTitle{
           position: absolute;
           margin: 0;
           padding: 0;
           width: 100%;
           height: 20%;
           top: 0%;
           left: 0%;
           font-size: 1.5rem; 
           text-align: center;
        }

        #actualText1{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 100%;
            top: 35%;
            left: 7.5%;
            text-align: left;
            font-size: 0.4rem;
        }
        #actualText2{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 100%;
            top: 135%;
            left: 57.5%;
            text-align: left;
            font-size: 0.4rem;
        }

        #actualText3{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 100%;
            top: 235%;
            left: 7.5%;
            text-align: left;
            font-size: 0.4rem;
        }

        #image1{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 60%;
            top: 55%;
            left: 57.5%;
            background-size: cover;
            background-position: center;
        }

        #image2{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 60%;
            top: 155%;
            left: 7.5%;
            background-size: cover;
            background-position: center;
        }

        #image3{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 60%;
            top: 255%;
            left: 57.5%;
            background-size: cover;
            background-position: center;
        }