: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: interreg;
  src: url(/interreg.ttf);
    }

.ani {  
        position: relative;
        animation: nav .5s infinite;
        animation-direction: alternate;
        animation-delay: 0s;
}

body {
        margin: 0;
		background-color: var(--bg);
		color: var(--txt);
		font-family: interreg, arial, helvetica, verdana;
		overflow-x: hidden;
		-webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	}

.title {
        color: green;
        font-size: 1vw;
		font-weight: bold;
        text-transform: uppercase;
	}
	
div[class*='hide'] {
        font-size: 1vw;
        font-weight: bold;
        position: relative;
        padding-left: 1vw;
        visibility: hidden;
        transition: opacity 1.5s ease-in-out;
        animation: nav .5s infinite;
        animation-direction: alternate;
        animation-delay: 0s;
        margin-top: -1vh;
        background-color: --var(bg);
    }

div[class*='show'] {
        font-size: 3vw;
        font-weight: bold;
        text-transform: uppercase;
        visibility: visible;
        padding-left: 1vw;
    } 

div[class*='show']:hover + div[class*='hide'] {
        visibility: visible;
    }
        
@keyframes nav {
        0% {left: 0px;}
        5% {opacity: .4;}
        35% {left: 5px;}
        40% {bottom: 3px; }
        50% {opacity: .15;}
        85% {bottom: 1px;}
        87% {opacity: .6;}
        20% {right: -3px;}
        80% {right: 2px;}
        83% {right: 6px;}
        75% {opacity: .25;}
        15% {bottom: 1px;}
        25% {opacity: .7;}
        95% {opacity: .75;}
        90% {bottom: 4px;}
        100% {opacity: .7;}
/*                35% {color: var(--txt);}
                30% {color: var(--green);}
                37% {color: var(--red);}
                39% {color: var(--txt);}
                40% {color: var(--txt);}
                80% {color: var(--green);}
                65% {color: var(--red);}
*/
    }

a:link, a:active, a:visited {
    	color: var(--red);
		text-decoration: none;
		transition: color 1.6s ease-in-out;
	}
	
a:hover {
        color: var(--green);
		transition: color .2s ease-in-out;
	}

.dirlink:link::before, .dirlink:active::before, .dirlink:visited::before {
    	color: var(--bgl);
		transition: color .6s ease-in-out;
		text-decoration: none;
        content: "//";
}

.dirlink:hover::before {
        color: var(--txt);
		transition: color .6s ease-in-out;
		content: "//";
}
    
    
/*
a:link, a:active, a:visited {
		text-decoration: none;
		color: #ffffff;
		display: block;
		padding-right: 5px;
		text-transform: uppercase;
		box-shadow: inset 0 0 0 0 #ffffff;
		transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
	}
	
a:hover {
		color: #ffffff;
		color: rgba(0, 0, 0, 0.0);
		box-shadow: inset -300px 0 0 0 #ffffff, 5px 0 0 #222126, 100px 0 0 #ff0067, 105px 0 0 #222126, 110px 0 0 #ffffff;
	}
	
*/