@import url(variables.css);
*{
    font-family: var(--font-family-ui);
}

/*Header*/
header > p {
	background-color: var(--secondary-color);
	padding: 10px 27px;
	font-size: var(--font-size-subtitle);
}
.title a{
    display: flex;
}
.sticky-header {
	background-color: var(--primary-color);
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.sticky-header h1 {
	padding: 26px 0 28px 26px;
	
}
.title{
    display: flex;
    font-size: var(--font-size-h3);
	color: white;
}
.logo{
    width: 99px;
    height: 74px;
    margin: 0 0 0 20px;
}
nav {
	background-color: var(--tertiary-color);
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
ul {
	display: flex;
	align-items: flex-end;
}
nav > ul li {
	list-style: none;
	padding: 0 20px;
	color: white;
	font-size: var(--font-size-p);
}
a:hover{
    color: var(--secondary-color);
}
/*Main*/

main {
	position: relative;
}
.cards-container {
	display: flex;
	justify-content: space-evenly;
	margin: 154px 0;
}

.card {
	background-color: var(--color-softwhite);
	border-radius: 16px 16px 0 0;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.back-batman {
	background-image: url(../img/back\ batman.png);
}

.back-harley {
	background-image: url(../img/back\ harley.png);
}

.card-top {
	width: 100%;
	height: 193px;
	background-size: cover;
	position: relative;
}

.fa-heart {
	position: absolute;
	color: var(--enhancement-color);
	left: 21px;
	top: 16px;
	font-size: var(--font-size-h3);
}

.card-profile {
	position: absolute;
	border-radius: 50%;
	top: 128px;
}

h3 {
	margin-top: 73px;
	font-size: var(--font-size-h3);
	color: black;
	text-align: center;
}

.batman h3 {
	text-transform: uppercase;
}

.card p {
	font-size: var(--font-size-p);
	margin: 10px 16px;
}

.card button {
	background-color: var(--primary-color);
	border: transparent;
	color: var(--color-softwhite);
	padding: 15px 37px;
	margin: 37px 0 19px 0;
	cursor: pointer;
}

.plus-btn {
	background-color: var(--primary-color);
	border-radius: 50%;
	width: 82px;
	height: 82px;
	border: none;
	font-size: 62px;
	color: white;
	cursor: pointer;
	position: absolute;
	bottom: 50%;
	right: 0;
	margin-right: 1%;
}

.plus-btn:hover,
.card button:hover, .add-btn:hover {
	background-color: var(--tertiary-color);
	cursor: pointer;
    color: white;
}
/*Footer*/
footer {
	background-color: var(--primary-color);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    position: relative;
    bottom: 0;
}
footer p {
	color: var(--text-light);
	font-size: var(--font-size-p);
	padding: 16px;
}