{% extends "layouts/base.html" %}
{% import "macros/kh2/macros.html" as macros %}

{% block title %}KH2 - Drops{% endblock %}

{% block head %}
	<style>
		.category {
			display: flex;
			align-items: center;
		}

		.enemies {
			display: flex;

			.drop {
				display: flex;
				flex-direction: column;
				text-align: center;
				margin-right: 8px;
				line-height: 30px;
				font-size: 18px;
				text-shadow: black 2px 2px;
				transition: all 0.2s ease;

				div {
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					width: 256px;
					height: 256px;
					background-size: 384px;
					transition: all 0.2s ease;
				}

				/* &:hover { */
				/* 	background-color: #333; */
				/* 	box-shadow: 0 0 10px 1px rgba(0, 255, 0, 0.5); */
				/* 	transform: scale(1.5); */
				/**/
				/* 	& > div { */
				/* 		padding: 32px; */
				/* 		margin: -32px; */
				/* 	} */
				/* } */
			}
		}
	</style>
{% endblock %}

{% block content %}

	{% for category in drops %}
		{% call macros::drop("shard") %}
		{% call macros::drop("stone") %}
		{% call macros::drop("gem") %}
		{% call macros::drop("crystal") %}
	{% endfor %}
{% endblock %}