<h1>Dialog</h1>

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

</dialog>

/* 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() {
	dialog.removeAttribute('open');
});