/*Variables*/
	body {
		--radius-2: 2rem;
		--radius-1: 1rem;
		--radius: 0.75rem;

		--navbar-height: 4rem;
		--navbar-font-size: 1.1rem;


		--color-bg: #000000;
		--color-nav: #111111;

		--color-inactive-light: #c4c4c4;
		--color-light-link: #fefefe;
		--color-navlink-visited: var(--color-light-link);
		--color-light-link-hovered: white;
		--duration-transition-hover: .3s;

		--color-text: white;

		--color-input-success: rgb(10, 224, 10);

		--color-input-fail: rgb(249, 29, 29);

	}
	@font-face {
		font-family: "Quicksand";
		src: url("/Quicksand.ttf") format("truetype");
	}

	@font-face {
		font-family: "Raleway";
		src: url("/Raleway.ttf") format("truetype");
	}

	body {
		margin: 0;
		padding: 0;
		font-family: 'Quicksand', 'Raleway';
		color: var(--color-text);
		background-color: var(--color-bg);
		font-weight: lighter;
	}
	*{
		font-weight: lighter;
	}

.mnml-form > a{
    cursor: pointer;
}

.mnml-input {
    border: none;
    border-bottom: 2px solid var(--color-inactive-light);
    background-color: transparent;
    color: #ffffffee;
    outline: none;
    margin: 0.3rem;
    padding: 0.4rem;
}

.mnml-input:focus {
    border: none;
    outline: 0;
    outline: none;
    border-bottom: 2px solid var(--color-light-link);
    color: white;
    transition: 0.3s;
    outline-style: none;
    box-shadow: none;
}

.mnml-input-success{
    border-bottom: 2px solid var(--color-input-success);
}
.mnml-input-fail{
    border-bottom: 2px solid var(--color-input-fail);
}
.mnml-input-success:focus{
    border-bottom: 2px solid var(--color-input-success);
}
.mnml-input-fail:focus{
    border-bottom: 2px solid var(--color-input-fail);
}

.mnml-form label {
    color: var(--color-inactive-light);
    transition: 0.3s;
    margin: 0.7rem 1rem;
}

.mnml-input:focus + label {
    color: var(--color-light-link);
    transition: 0.3s;
}

.mnml-form {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-2);
    flex: 1;
    text-align: left;
    margin: 5rem;
}
.mnml-form >*{
    margin: 1rem;
}

.mnml-separator{
    border: 1px solid white;
    margin:  5rem 0;
    height: 45vh;
}




/*scrollbar*/
body{
    --color-scrollbar: white;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: transparent;
}

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

a{
    color: white;
}