@font-face {
    font-family: 'cagliostroregular';
    src: url('font/cagliostro-regular.eot');
    src: url('font/cagliostro-regular.eot?#iefix') format('embedded-opentype'),
         url('font/cagliostro-regular.woff2') format('woff2'),
         url('font/cagliostro-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
	--main-font: 'cagliostroregular', sans-serif;
    --font-color: #2C2C67;
    --background-color: #E1E1E9;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.hidden, .screen-reader-text, dl.description dt {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
body {
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	font-family: var(--main-font);
	font-size: 1.5em;
	background-color: var(--background-color);
    color: var(--font-color);
	align-items: start;
	justify-items: center;
	overflow-y: scroll;
    padding: 0 1rem;
}
header {
    align-items: center;
    text-align: center;
    margin: 2rem 0 5rem;
    width: 40ch;
    display: flex;
    flex-flow: column wrap;
}
main {
    width: 50ch;
}
footer {
    font-size: small;
    margin-bottom: 0.2rem;
    margin-top: 5rem;
}
h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}
dl div:not(:last-child) {
    margin-bottom: 3rem;
}
dl div:not(:last-child)::after {
    content: "";
    display: block;
    margin: 0 auto;
    padding-top: 3rem;
    width: 95%;
    border-bottom: 1px solid var(--font-color);
    opacity: 0.3;
    clear: both;
  }
dl dt {
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
dl dd.description {
    font-size: larger;
    margin-bottom: 1rem;
}
dl dd.price {
    text-align: right;
    font-size: larger;
}
dd.buy {
    text-align: center;
    width: 100%;
    margin-top: 1rem;
}
dd.buy a {
    background-color: var(--font-color);
    color: var(--background-color);
    padding: 5px;
    text-decoration: none;
    display: inline-block;
}
dd.buy a:hover {
    background-color: var(--background-color);
    color: var(--font-color);
    text-decoration: underline;
}
img {
	max-width: 100%;
	height: auto;
}
header img {
    order: -1;
    margin-bottom: 1rem;
}