@import 'vars.css';

button{
	font: 1.1rem / 1.4 'Fira Sans', Tahoma, Verdana, sans-serif;
	overflow-x: hidden;
}

input, textarea{
	margin: 0 var(--padding) var(--padding) 0;
	padding: var(--offset); flex: 1;
}
button{border: 0;}
small, .small {font-size: 14px;}
.big {font-size: 18px;}
.bold {font-weight: bold;}
.hide {display: none;}
.nowrap{white-space: nowrap;}
.center{text-align: center;}


grey, .grey {color: var(--grey);}
.red{color: var(--red);}
.blue{color: var(--blue);}
.blue-bg{background-color: var(--blue-light);}
.rose{color: var(--rose);}
.white{color: var(--white);}
.green{color: var(--green);}
.orange{color: var(--orange);}
.name{color: var(--blue); text-transform: uppercase;}
.pointer, button{cursor: pointer;}

h2 {font-weight: 500; text-transform: uppercase; font-size: 1.4rem;}

a, a:visited, a:link {color: var(--orange); text-decoration: none;}
a:hover {text-decoration: underline;}
a:any-link.blue {color: var(--blue);}

button{
	position: relative; 
	background: var(--grey-bg);
	padding: var(--padding); 
	padding-right: 50px;
	/* font-size: 0.9rem; */
}
button::after {
    content: "»";
    position: absolute;
    right: 24px; top: 50%;
    transform: translateY(-58%) scale(2);
}
@keyframes knock {
    0% { transform: translateY(-58%) translateX(0) scale(2); }
    25% { transform: translateY(-58%) translateX(-4px) scale(2); }
    50% { transform: translateY(-58%) translateX(0) scale(2); }
    65% { transform: translateY(-58%) translateX(-2px) scale(2); }
    100% { transform: translateY(-58%) translateX(0) scale(2); } 
}

button:hover::after { animation: knock 0.8s ease-in-out; }