* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Montserrat;
	font-size: 25px;
	text-align: center;
	transition: ease 0.6s;
}


body {
	min-height: 100vh;
	background: linear-gradient(130deg, #be93c5 0%, #7bc6cc 100%);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
		color: #000;
	}

	50% {
		background-position: 100% 50%;
		color: #333;
	}

	100% {
		background-position: 0% 50%;
		color: #000;
	}
}

header,
footer {
	padding: 2vh;
}

header {
	font-size: calc(20px + 3vw);
}

button {
	padding: 10px 15px;
	border-radius: 10px;
	border: none;
	outline: none;
	border: 2px solid transparent;
	border: 2px solid #444;
	background:inherit;
	cursor: pointer;
}

button:hover {
	background: #444;
	color: #fff;
}

section {

	padding: 10px;
	margin: auto;
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

img {
	height: 50vw;
	width: 50vw;
	max-height: 500px;
	max-width: 500px;
	border-radius: 20px;
}

div {
	margin: 20px auto;
}

.character {
	position: relative;
	height: 50vw;
	width: 50vw;
	max-height: 500px;
	max-width: 500px;
	margin: auto;
}

.character_name {
	position: absolute;
	bottom: 0;
	color: #fff;
	margin: auto;
	width: 100%;
	background: linear-gradient(90deg, #f85032 0%, #e73827 100%);
	padding: 20px;
	opacity: 0;
	border-radius: 10px;
}

@media (max-width:600px) {

	.character,
	img {
		height: 70vw;
		width: 70vw;
	}

	.character_name {
		padding: 15px;
	}
}

.character:hover .character_name {
	opacity: 1;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	font-size: 28px;
}