<h2>Ilvermorny fact file:</h2>
<button id="openBtn">Click to know more!</button>
<dialog id="dialog">
	<button id="closeBtn">close</button>
			<h4>WHERE IN THE WORLD</h4>
			<p>Mount Greylock, Massachusetts, North America</p>
			<p>School of witchcraft and wizardry</p>
			<p>Founded by Isolt Sayre, James Steward, Chadwick Boot and Webster Boot
			<p>Enchanted carvings of the four house beasts that react in the presence of new students</p>

/* Only for styling, not required for it to work */
body {
	background-color: blanchedalmond;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

h1 {
	font-size: 3rem;
	color: indianred;
	font-family: "Berkshire Swash", cursive;
	text-align: center;

h2 {
		font-size: 1.4rem;
	color: #333;
	font-family: "Berkshire Swash", cursive;
	text-align: center;

#openBtn, #closeBtn {
	border: none;
	background-color: hsl(0, 0%, 20%);
	color: #fff;
	border-radius: 3px;
	width: 200px;
	height: 40px;
	font-size: 1rem;
	font-family: sans-serif;
	cursor: pointer;

#closeBtn {
	width: 80px;
	height: 30px;
	font-size: 0.9rem;
	margin-bottom: 30px;

#openBtn:hover, #openBtn:focus,
#closeBtn:hover, #closeBtn:focus{
	background-color: hsl(0, 56%, 30%);

dialog {
	width: 80%;
	height: 80%;
	position: absolute;
	top: 30px;
	font-family: sans-serif;
	color: #555;

ul {
	list-style-type: none;
li {
	margin-bottom: 40px;

h4, p {
	margin: 0;

p {
	margin-top: 12px;
const dialog = document.getElementById('dialog');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');

openBtn.addEventListener('click', function() {
	dialog.setAttribute('open', true);

closeBtn.addEventListener('click', function() {

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.