<!doctype html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<style>
body {
background-color: #333;
color: #fff;
}
table {
text-align: center;
vertical-align: middle;
border-collapse: collapse;
thead th {
background-color: #252525;
}
tbody tr:hover {
background-color: #4f4f4f;
}
& tr,
th,
td {
border: 1px solid #fff;
padding: 7px;
}
.charlist {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
.aqua {
color: #97c8ff;
}
.ventus {
color: #26ff62;
}
.terra {
color: #ff7400;
}
}
}
</style>
{% block head %}{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
</body>
</html>