#pageFrame {
        width:670px;height:670px;
        position: absolute; left: 20px; top: 20px;  border: none;
    }
    #frameContainer {
        width:670px;height:670px; border: white dotted 0px;
        position: absolute; left: 300px; top: 300px;  z-index: 300; 
        transform: scale(0); transform-origin: 0 0;
        transition: .5s;
        box-shadow:inset 0px 0px 6px 4px rgba(1, 3, 2, 1),inset 0px 0px 14px 10px rgb(57, 191, 117),0px 0px 34px 14px rgba(0, 0, 0, 1),inset 0px 0px 22px 26px rgba(0, 0, 0, 1);
        border-radius:45px;
        padding:20px;
        background-color: #1f1f1f;
        cursor:move;
        transition: transform 0.5s; 
    }
    .frameCorners {
        position: absolute; z-index: 330;
    }
    .collapse {
        position: absolute; z-index: 330; cursor: url("../images/contract.png") 24 24, move;
    }
    #dragOverlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 320; /* Must be higher than the iframe's z-index */
        display: none; /* Initially hidden */
    }
    #pageHide {
        position: fixed; /* Fix to viewport */
        top: 0;
        left: 0;
        width: 100vw;   /* Full viewport width */
        height: 100vh;  /* Full viewport height */
        z-index: 290;   /* BELOW frameContainer (300) but ABOVE everything else (100) */
        background-color: #1f1f1f; /* Use the same color as frameContainer's background */
        display: none;
    }
    .columns {
        background-color: #242527; z-index: -1;
        width: 40px; height: 360px; position: absolute; top: 174px; 
        box-shadow:rgb(1, 3, 2) 0px 0px 15px 4px ,rgba(62, 148, 104, 1) 0px 0px 6px 0px ,rgb(57, 191, 117) -3px -5px 16px 3px inset ; 
        border-radius: 35% 0px 0% 35%;
    }
    .loading {
		position: relative; top: 50px;z-index: -1; font-size: 2em;
		text-align: center;	
	}