@font-face {
    font-family: "Roboto Mono";
    src: url("../fonts/roboto-mono-medium.ttf");
}

/*Change font and colors*/
:root {
	--font: "Roboto Mono";
	--bgcolor: #262626;
	--titlecolor: #BBD9E3;
	--linkcolor: #F1B6A3;
}

/*-----------------------------------------------------------*/

body {
	background-image: url('../background/background.png');
	background-color: gray;
}

div .hvr-grow {
	background-color: var(--bgcolor);
	border: solid 4px rgba(255, 255, 255, 0.8);
	border-radius: 3px;
	margin-top: 4%;
	margin-bottom: 4%;
	display: inline-block;
	margin-left: 2%;
	margin-right: 1%;
	width: 140px;
	text-align: center;
}

form {
	float: right;
	margin-top: 4%;
	margin-left: 2%;
	margin-right: 2%;
}

input {
	border: solid 4px rgba(255, 255, 255, 0.8);
	padding: 10px;
	width: 160px;
	background-color: var(--bgcolor);
	color: white;
	font-family: var(--font);
}

h1 {
	font-family: var(--font);
	font-style: italic;
	color: var(--titlecolor);
	font-size: 1rem;
	text-align: center;
}

ul {
	padding-inline-start: 0;
	list-style: none;
}

a {
	display: block;
	line-height: 2em;
	font-family: var(--font);
	color: var(--linkcolor);
	font-size: 1rem;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: rgb(222, 222, 222);
}

/*Animation*/
.hvr-grow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.hvr-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}