body {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    background-color: rgb(243 244 246);
}
a {
    cursor: pointer;
    color: rgb(147 51 234);
}
a:focus, a:hover {
    color: rgb(75 85 99);
}
div.progress-bar {
    display: block;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 50;
    height: 0.25rem;
    background-color: rgb(67 56 202);
    transition:
        width 300ms ease-out,
        opacity 150ms 150ms ease-in;
    transform: translate3d(0, 0, 0);
}
.viewport {
    position: relative;
}
.viewport .header {
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.content .content-text {
    border-radius: 0.25rem;
    background-color: rgb(255 255 255);
    padding-top: 2rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.content .item-list {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}
.viewport .footer {
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(156 163 175);
}
.footer .nav {
    width: 50%;
    text-align: left;
}
.footer .copyright {
    width: 50%;
    text-align: right;
}

@media (min-width: 512px) {
    body {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
    }
    .content .content-text {
	padding-top: 3rem;
	padding-bottom: 2rem;
	padding-left: 2rem;
	padding-right: 2rem;
    }
}
@media (min-width: 720px) {
    body {
	margin-left: 1rem;
	margin-right: 1rem;
    }
}
@media (min-width: 1024px) {
    html {
	font-size: 18px;
    }
    .viewport {
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
    }
}