@font-face {
    font-family: "Montserrat";
    src: url("../src/font/Montserrat-VariableFont_wght.ttf");
}
:root{
    --ruby: #e0115f;
    --aqua: #7fffd4;
}
* {
    box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
}

body {
    height:100%;
    width: 100%;
    background-color: black;
    /*background: url("../img/placeholder_BG.jpg");*/
    padding: 0;
    margin: 0;
    font-family: "Montserrat",sans-serif;
    font-size: 16;
    font-weight: 400;
    color: #ffffff;
    color: var(--aqua);

}
body::after{
    visibility: inherit;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.5;
}

.main {
    height: 80%;
    width: 100%;
    padding: 0;
    margin: 0;
}
button {
    background-color: var(--ruby);
    color: var(--aqua);
    border: 3px solid var(--ruby);
    padding: 10px;
    font-family: "Montserrat";
    font-weight: 800;
    cursor: pointer;

}

button:hover{
    background-color: var(--aqua);
    color: var(--ruby);
    transition: 0.5s;
}

button:active{
    background-color: black;
    transition: 0.2s;
    color: white;
}

input[type='text'], input[type='password']{
	border: 3px solid var(--aqua);
	padding: 10px;
}

input[type='text']:active, input[type='password']:active,
input[type='text']:focus, input[type='password']:focus{
	border-color: var(--ruby);
	outline: none;
}

a.rubylink{
	color: var(--ruby);
}

footer{
    width: 100%;
    align: center;
    text-align: center;
    color: white;
    weight:600;
}