@font-face {
    font-family: "main";
    src: url(../assets/MedodicaRegular.otf);
}

:root{
    --bgc: black;
    --fgc: rgb(0, 255, 255);
    --active: rgb(0, 255, 100);
    --pholder: rgb(61, 89, 92);
    --activePholder: rgb(61, 92, 62);
    --footer: rgb(50, 123, 123);
    --back: orangered;
	--alt: #7169aa;

	--fail: orangered;
	--accept: #45d545;

	--overlaycolor: var(--accept);
}

body{
    font-family: "main", sans-serif;
    background-color: var(--bgc);
    color: var(--fgc);
    text-align: center;
}

audio{
    display: none;
}

form.branches {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

form.branches input[type="text"], form.branches input[type="password"] {
	font-family: "main";
	font-size: 1.2rem;
	color: var(--fgc);
	background-color: rgba(0,0,0,0);
	border: none;
	border-bottom: 2px solid var(--fgc);
	text-align: center;
	width: 412px;
	max-width: 92vw;

	/* hide for focus */
	outline: none;
}

form.branches input[type="text"]:hover, form.branches input[type="password"]:hover{
    color: var(--active);
    border-color: var(--active);
}

form.branches label {
	width: 412px;
	max-width: 92vw;
	text-align: right;
	font-size: 1rem;
	margin-bottom: 3ch;
	color: var(--fgc);
}

form.branches label:hover {
	color: var(--active);
}

form.branches input::placeholder{
    color: var(--pholder)
}

form.branches input:hover::placeholder{
    color: var(--activePholder)
}

.btn {
	color: var(--fgc);
	background: var(--bgc);
	padding: 1ch 0ch;
	font-family: "main";
	font-size: 1.2rem;
	border: solid var(--fgc) 2px;
	position: relative;
	width: 340px;
	max-width: 92vw;
	margin-top: 2ch;
	letter-spacing: 0.5ch;
	display: inline-block;
	text-decoration: none;
}

#extend:hover, #extend:focus{
    border-color: var(--active);
    color: var(--active);
	outline: none;
}

::-webkit-scrollbar {
    width: 4px;
    background-color: #000000;
}

::-webkit-scrollbar-thumb {
    color: var(--empc);
    background-color: var(--empc);
}

footer{
    bottom: 0;
    margin-bottom: 0px;
    margin-top: 100px;
    color: var(--footer);
}

.incorrect{
    animation: shake 1s linear normal;
}

.hiddencon * {
	opacity: 0;
	pointer-events: none;
}

.treelight {
	pointer-events: all;
    width: 600px;
    height: 480px;
    transform: translateY(8%)
}

.hiddencon .treelight {
	opacity: 1;
	transform: translateY(18%);
	cursor: pointer;
}

#con * {
	transition: all 2s ease-in-out;
	transition-property: opacity, transform;
}

@keyframes shake {
    0% {
		transform: translate(-1%);
    }
    16% {
        transform: translate(1%);
    }
    33% {
        transform: translate(-2%);
    }
    50% {
        transform: translate(1%);
    }
    66% {
        transform: translate(-1%);
    }
    83% {
       transform: translate(1%);
    }
    100% {
        transform: translate(0%);
    }
} 


/* no wworkie on foxie (was said by omni) */
.acc::after {
    content: '';
    background: var(--overlaycolor);
    width: 101vw;
    height: 101vh;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: darken;
    /* opacity: 0.5; */
}


/* override some of the other vars in this state for better colours */
.acc {
	--active: var(--fgc);
	--focus: var(--fgc);
}



/* fuck firefox all my homies hate firefox */
@-moz-document url-prefix() {

	.acc {
		--fgc: var(--overlaycolor);
		--active: var(--overlaycolor);
		--focus: var(--overlaycolor);
		--focusalt: var(--overlaycolor);
		--back: var(--overlaycolor);
		--alt: var(--overlaycolor);
	}

	.acc::after {
		background-color: transparent;
	}


	.acc #con .portal {
		filter: sepia(1) saturate(1000) hue-rotate(59.8deg);
	  }

	.fire #con .portal {
		filter: sepia(1) hue-rotate(-46deg) saturate(700) brightness(0.9);
	}

  }