:root {
	--color-primary: white;
	--color-secondary: black;
	--background-color: white;
	--link-blue: #1e90ff;
}

.dark-mode{
	background-color: #121212;
	color: white;
    --color-primary: black;
    --color-secondary: white;
	--background-color: #121212;
}

body{
	font-family: sans-serif;
}

a{
	color: var(--link-blue);
}
.link{
	color: var(--link-blue);
	cursor: pointer;
}
.link:hover{
	text-decoration: underline;
}

input[type=text], input[type=number], input[type=time]{
	font-size: 16px;
    border-radius: 4px;
	padding: 4px;
    border: white 2px solid;
    margin: 8px auto 8px auto;
}
input[type=text]:focus-visible{
	outline-color: var(--link-blue);
}

.main-btn{
	background-color: var(--color-primary);
    color: var(--color-secondary);
	border: var(--color-secondary) solid 3px;
    border-radius: 5px;
    font-size: 20px;
    transition: .5s;
	cursor: pointer;
}
.main-btn:hover{
	padding-right: 20px;
    padding-left: 20px;
	background-color: var(--color-secondary);
    color: var(--color-primary);
}
.main-btn:disabled{
	background-color: #696969db;
    border-color: gray;
	color: var(--color-secondary);
}
.main-btn:disabled:hover{
	padding: revert;
	border-style: solid;
    background-color: #696969db !important;
	cursor: not-allowed;
}
.main-btn:disabled:active{
	border-style: solid;
    background-color: #696969db;
}
.main-btn:hover.red{
	background-color: #F44336;
	color: var(--color-secondary);
}
.main-btn:hover.green{
	background-color: #4CAF50;
	color: var(--color-secondary);
}
.main-btn:hover.blue{
	background-color: #1565C0;
	color: var(--color-secondary);
}
.main-btn:active{
	border-style: groove;
    background-color: lightgrey;
    transition: padding 0.5s;
}

.main-btn:hover.no-grow{
	padding: revert;
}