@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");
 body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 2px;
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    .container-fluid {
        display: flex;
        justify-content: space-evenly;
        /*height: calc(95vh - 100px);*/
        gap: 3px;
		padding: 5px;		
    }
    .left-panel, .middle-panel, .right-panel {
        width: 33%;
        background-color: #2a2a2a;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.3);
        border: 1px solid;
        border-image: linear-gradient(45deg, #ff00ff, #00ffff) 1;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .tree {
        height: 90%;
        overflow-y: auto;
        overflow-x: auto;
    }
    .tree ul {
        list-style-type: none;
        padding-left: 20px;
        position: relative;
    }
    .tree li {
        margin: 5px 0;
        position: relative;
    }
    .tree li::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -15px;
        border-left: 1px dotted #e0e0e0;
        height: calc(100% + 10px);
        width: 1px;
    }
    .tree li:last-child::before {
        height: 15px;
    }
    .tree li::after {
        content: '';
        position: absolute;
        top: 10px;
        left: -15px;
        width: 10px;
        height: 1px;
        border-top: 1px dotted #e0e0e0;
    }
    .tree span {
        cursor: pointer;
        color: #e0e0e0;
        transition: all 0.3s ease;
        padding: 2px 5px;
        border-radius: 3px;
        display: inline-block;
    }
    .tree span:hover {
        color: #00ffff;
		width:90%;
        background-color: rgba(0, 255, 255, 0.2);
    }
    .tree .folder::before,
    .tree .file::before {
        margin-right: 5px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }
    .tree .folder::before {
        content: "\f07b";
        color: #ffd700;
    }
    .tree .folder.open::before {
        content: "\f07c";
    }
    .tree .file::before {
        content: "\f15b";
        color: #4caf50;
    }
    .hidden {
        display: none;
    }
    pre {
        background-color: #333;
        border: 1px solid #444;
        border-radius: 5px;
        padding: 10px;
        overflow-x: auto;
        color: #e0e0e0;
        min-height: 300px;
        max-height: 400px;
        overflow-y: auto;
    }
    #fileInput, #jsonTextarea {
        margin-bottom: 20px;
        background-color: #333;
        color: #e0e0e0;
        border: 1px solid #444;
        padding: 10px;
        border-radius: 5px;		
        width: calc(100% - 22px);
    }
    #jsonTextarea {
        height: 500px;
        resize: vertical;		
    }
    .app-heading {
        background: linear-gradient(45deg, #ff00ff, #00ffff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
		font-size:1em;
    }
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    ::-webkit-scrollbar-track {
        background: #1a1a1a;
    }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(45deg, #ff00ff, #00ffff);
        border-radius: 6px;
    }
    .gradient-title {
       font-size: 2em;
        font-weight: bold;
        text-align: center;       
        background: #bfffff;
		background: linear-gradient(to left, #ff00ff 0%, #99ffff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-text-fill-color: transparent;
        color: transparent;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
	.gradient-text {
       font-size: 1em;
        font-weight: bold;
        text-align: center;       
        background: #bfffff;
		background: linear-gradient(to left, #ff00ff 0%, #99ffff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-text-fill-color: transparent;
        color: transparent;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    .parse-btn {
        background: linear-gradient(45deg, #ff00ff, #00ffff);
        border: none;
        color: #1a1a1a;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-bottom: 20px;
        width: 96%;
    }
	#phpCode{height:auto}
	#phpOutput{height:auto}
	.header{
		 display: flex;
        justify-content: space-evenly;
	       text-align:center;
	}
	.footer{font-size:0.8em;}
	
	.svg-container {
	 width: 100%;
	 height: 250px;
	 resize: none;
	 overflow: hidden;	 
	}

	#headerBox{width:100%;margin-top:2px;}
	#jsonBox{width:100%;margin-top:-50px;}


	svg {
		height: auto;
		 width: 95%;
		height: 95%;
	    font-family: "Russo One", sans-serif;	
	}
	svg text {
		animation: stroke 5s infinite alternate;
		stroke-width: 0.2;
		stroke: #bfefff;
		font-size: 2em;
	}
	.wrapper{background:transparent;}


@keyframes stroke {
	0%   {
		fill: rgba(204,51,199,0); stroke: rgba(79,255,255,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 0.5;
	}
	70%  {fill: rgba(204,51,199,0); stroke: rgba(79,255,255,1); }
	80%  {fill: rgba(204,51,199,0); stroke: rgba(79,255,255,1); stroke-width: 0.5; }
	100% {
		fill: rgba(204,51,199,1); stroke: rgba(79,255,255,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}




@media only screen and (max-width: 600px){
	h2{font-size:14px; text-align:left;}	
	svg text{font-size:18px;}
	.gradient-text{font-size:12px;margin-top:-80px!important;}
	.animated-text{font-size:14px;}
	.victor-txt{margin-top:-100px!important;}
	.container-fluid{display:block;}
	.left-panel, .middle-panel, .right-panel{width:100%;float:none;}
	.svg-container {
	 padding:30px 0;
	 width: 100%;
	 height: 90px;
	 resize: none;
	 overflow: hidden;
	 margin:0 auto;	
	}
	svg {
		margin-top:10px;
		height: auto;
		 width: 95%;
		height: 95%;
	    font-family: "Russo One", sans-serif;	
	}
	#jsonBox{margin-top:10px;}
	
}
@media (min-width:480px)  { 
h2{font-size:14px; text-align:left;}	
	svg text{font-size:18px;}
	.gradient-text{font-size:12px;margin-top:-80px!important;}
	.animated-text{font-size:14px;}
	.victor-txt{margin-top:-100px!important;}
	.container-fluid{display:block;}
	.left-panel, .middle-panel, .right-panel{width:100%;float:none;}
	.svg-container {
	 padding:30px 0;
	 width: 100%;
	 height: 90px;
	 resize: none;
	 overflow: hidden;
	 margin:0 auto;	
	}
	svg {
		margin-top:10px;
		height: auto;
		 width: 95%;
		height: 95%;
	    font-family: "Russo One", sans-serif;	
	}
	#jsonBox{margin-top:10px;}
	.container-fluid{height:auto!important;}
 }
@media (min-width:600px)  { 
svg text{font-size:18px;}
	.gradient-text{font-size:12px;margin-top:-80px!important;}
	.animated-text{font-size:14px;}
	.victor-txt{margin-top:-100px!important;}
	.container-fluid{display:block;}
	.left-panel, .middle-panel, .right-panel{width:100%;float:none;}
	
	#jsonBox{margin-top:10px;}
	.container-fluid{height:auto!important;}
 }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) {
	.left-panel, .middle-panel, .right-panel{width:33%;}
	svg {
		height: auto;
		 width: 95%;
		height: 95%;
	    font-family: "Russo One", sans-serif;	
	}
	svg text {
		animation: stroke 5s infinite alternate;
		stroke-width: 0.2;
		stroke: #bfefff;
		font-size: 2em;
	}
	
	}
@media (min-width:1281px) {
	.container-fluid{display:flex;} .left-panel, .middle-panel, .right-panel{width:33%;}
	svg {
		height: auto;
		 width: 95%;
		height: 95%;
	    font-family: "Russo One", sans-serif;	
	}
	svg text {
		animation: stroke 5s infinite alternate;
		stroke-width: 0.2;
		stroke: #bfefff;
		font-size: 2em;
	}
}