main {
width: calc(100vw - 1rem);
}

.index h1 svg {
margin: 1rem auto;
width: 60vw;
max-height: 16vh;
}

.index h2 {
font-size: 0.75rem;
letter-spacing: 0.5rem;
text-align: center;
margin: 1rem auto;
}

.index ul {
list-style: none;
font-weight: bold;
width: calc(100% - 9px);
max-width: calc(480px + var(--button-shadow-offset) * 2 + var(--button-shadow-blur) * 2);
margin: 0 auto;
padding: 0;
border-radius: 1rem;
background-color: rgb(255 255 255 / 0.75);
box-shadow: 0px 0px 9px 0px rgba(0 0 0 / 0.25);
}

.index ul a {
display: block;
text-align: center;
margin: 0 auto;
padding-top: 1rem;
width: calc(100% - 4rem);
font-size: 1rem;
letter-spacing: 0.25rem;
color: rgb(64 64 64 / 0.75);
transition: 0.2s;
text-decoration: none;
}

.index ul .version {
display: block;
text-align: center;
margin: 0 auto 1rem;
padding-bottom: 1rem;
font-size: 0.75rem;
color: rgb(128 128 128);
font-weight: normal;
}

footer {
border-top: solid 1px rgba(192 192 192);
position: static;
transform: none;
overflow: hidden;
text-align: left;
width: calc(100vw - 1rem);
max-width: calc(480px + var(--button-shadow-offset) * 2 + var(--button-shadow-blur) * 2);
margin: 1rem auto;
padding: 1rem 0 0;
background: transparent;
box-shadow: none;
border-radius: 0;
backdrop-filter: none;
opacity: 1;
visibility: visible;
transition: none;
}

h1 {
margin: 1rem auto;
width: 60vw;
max-height: 16vh;
font-size: 1rem;
text-align: center;
}

h2 {
margin: 1.25rem auto 0;
font-size: 1.25rem;
font-weight: normal;
}

article {
margin-top: 1.5rem;
}

article+article {
border-top: solid 1px rgba(192 192 192);
}

.release-notes .release-date {
font-size: 0.75rem;
color: rgb(128 128 128);
margin: 0 auto;
}

h3 {
margin: 0.25rem auto 0;
font-size: 1rem;
}

.release-notes p {
margin: 0.25rem auto 0;
}

.release-notes ul {
list-style: circle;
}

.release-notes li {
margin-left: 1.5rem;
}

#link-for-release-notes {
width: calc(100vw - 1rem);
max-width: calc(480px + var(--button-shadow-offset) * 2 + var(--button-shadow-blur) * 2);
margin: 1rem auto;
}