:root {
        --bg: #222126;
            --transbg: rgba(34, 33, 38, .50);
        --bgl: #88878C;
            --transbgl: rgba(136, 135, 140, .50);
                --zerobgl: rgba(136, 135, 140, 0);
        --bgd: #111015;
            --transbgd: rgba(17, 16, 21, .50);
                --zerobgd: rgba(17, 16, 21, 0);
        --txt: #e9e9e3;
            --transtxt: rgba(233, 233, 227, .50);
                --zerotxt: rgba(233, 233, 227, 0);
        --red: #ff0067;
            --transred: rgba(255, 0, 103, .50);
                --zerored: rgba(255, 0, 103, 0);
        --green: #00ffb7;
            --transgreen: rgba(0, 255, 183, .50);
                --zerogreen: rgba(0, 255, 183, 0);
    }

@font-face {
  font-family: fontsauce;
  src: url(/inc/opensauce.ttf);
    }

div[class*='hide'] {
        visibility: hidden;
}

div[class*='show'] {
}

div[class*='show']:hover + div[class*='hide'] {
        visibility: visible;
}

.filename {
        padding-top: 2px;
        padding-left: 5px;
        border: 0 solid;
        border-bottom: 1px solid;
        border-color: var(--bgd);
}


.fileinfo {
        padding-top: 2px;
        padding-left: 5px;
        color: var(--bgl);
        border: 0 solid;
        border-left: 3px solid;
        border-bottom: 1px solid;
        border-color: var(--bgd);
}

.viewport { 
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
		gap: 0;
		width: 40vw;
	}

.viewport {
        width: 45vw;
        display: grid;
        grid-template-columns: 60% 20% 20%;
        gap: 0;
        margin: auto;
        margin-top: 30px;
    }
    
.dsply, .dsply a, .dsply:visited, .dsply:active, .dsply a:hover, .dsply a:link {
        width: 100%;
        display: grid;
        grid-template-columns: 60% 20% 20%;
        grid-column: span 3;
        border-color: var(--bgd);
    }

    
.dsplyblock {
        display: grid;
        grid-template-columns: 60% 20% 20%;
        gap: 0;
        margin: auto;
}

.dsplyblock:hover {
        background-color: var(--red);
        color: var(--txt);
        transition: color .6s ease-in-out;
        transition: background-color .5s ease-in-out;
}

.dir { 
        color: var(--green);
        background-color: var(--bgd);
        font-size: 15px;
		column-span: all;
        padding-left: 5px;
        grid-column: span 3;
	}

.header {
        color: var(--red);
        font-weight: bold;
        border: 1px solid;
        border-color: var(--bgd);
        background-color: var(--transbgd);
        padding-left: 10px;
        padding-bottom: 3px;
        padding-top: 3px;
    }

body {
        margin: 0 auto;
		background-color: var(--bg);
		color: var(--txt);
		font-size: 8px;
		font-family: fontsauce, arial, helvetica, verdana;
		font-variant: small-caps;   
		text-transform: uppercase;
		overflow-x: hidden;
		justify-content: center;
		font-weight: bold;
	}

a:link, a:active, a:visited {
    	color: var(--txt);
		text-decoration: none;
		transition: color 1.5s ease-out;

	}
	
a:hover {
		color: var(--red);
		background-color: var(--green);
		transition: color 0s ease-in;
	}