main {
display: block;
width: calc(100vw - 1rem);
max-width: 720px;
padding: calc(var(--button-shadow-offset) * 2);
}

header {
min-height: 30vh;
text-align: center;
inset: auto;
background: rgb(0 135 209);
color: rgb(255 255 255);
padding-bottom: 1rem;
}

#headline {
height: 360px;
background-image: image-set("../img/bg_index.avif" type("image/avif"), "../img/bg_index.webp" type("image/webp"), "../img/bg_index.jpeg" type("image/jpeg"));
background-color:rgba(0,0,0,0.25);
background-blend-mode:darken;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
grid-template-rows: 15% auto 25%;
font-feature-settings: "palt";
margin-bottom: 1rem;
}

#headline h1 {
grid-row-start: 2;
}

#headline h2 {
grid-row-start: 1;
font-weight: bold;
color: rgb(255 255 255);
font-size: 1rem;
letter-spacing: 0.25rem;
text-shadow: 1px 1px 9px rgb(0 0 0);
margin: auto;
}

#headline p {
grid-row-start: 3;
margin: auto;
text-shadow: 1px 1px 9px rgb(0 0 0);
}

.problem {
font-family: serif;
font-weight: bold;
font-size: 1rem;
font-feature-settings: "palt";
line-height: 200%;
margin-bottom: 1rem;
}

.application {
display: block;
background: rgb(252 200 0);
text-align: center;
font-weight: bold;
font-size: 1.75rem;
font-feature-settings: "palt";
padding: 0 1.5rem;
border-radius: 0.5rem;
line-height: 4rem;
color: rgb(0 135 209);
height: 4rem;
width: 90vw;
max-width: 21rem;
text-decoration: none;
box-shadow: var(--button-shadow-offset) var(--button-shadow-offset) var(--button-shadow-blur) 0px var(--button-shadow-color);
margin: 1rem auto;
-webkit-user-select: none;
user-select: none;
}

.application:hover {
background: rgb(255 240 0);
}

.application:active {
transform: scale(0.9);
box-shadow: 1px 1px 2px 0px var(--active-button-shadow-color);
}

.index h1 svg {
margin: auto;
width: 90vw;
max-height: 36vh;
filter: drop-shadow(0 0 0.75rem rgb(0 0 0));
}

h1 svg use {
fill: rgb(255 255 255);
}

.index h2 {
letter-spacing: 0.5rem;
text-align: center;
margin: 2rem auto;
}

.feature h3 {
font-size: 1.75rem;
line-height: 125%;
color: rgb(0 135 209);
}

p + h3 {
margin-top: 2rem;
}

.feature p {
line-height: 150%;
margin-bottom: 0.5rem;
}

.annotation {
font-size: 0.75rem;
}

.message {
background: rgb(250 250 250);
padding: 0.75rem 1.25rem 1.25rem;
margin: 2rem auto;
border-radius: 1rem;
}

.message p {
font-family: serif;
line-height: 200%;
}

.message p + p {
margin-top: 1rem;
}

#profile {
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr 1fr;
margin-bottom: 2rem;
}

#profile section {
background: rgb(250 250 250);
border-radius: 1rem;
padding: 0.75rem;
display: grid;
grid-template-rows: 4rem min(36vw, 240px) 2.5rem 2rem auto;
}

#profile h2 {
letter-spacing: 0.25rem;
grid-row-start: 1;
margin: 1rem auto;
text-align: center;
}

#profile h3 {
font-size: 1.25rem;
grid-row-start: 3;
text-align: center;
margin: auto;
}

#profile .title {
grid-row-start: 4;
font-size: 0.75rem;
line-height: 1rem;
font-weight: bold;
color: rgb(112 112 112);
text-align: center;
margin: auto;
}

.profile-photo {
grid-row-start: 2;
margin: auto;
}

.profile-photo img {
margin: 0 auto;
border-radius: 50%;
height: 36vw;
width: 36vw;
max-height: 240px;
max-width: 240px;
}

#profile details {
font-family: serif;
font-weight: bold;
margin: 0.5rem auto 0;
width: 100%;
}

#profile details p {
font-family: serif;
font-weight: normal;
font-size: 0.75rem;
line-height: 200%;
}

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

h1 {
margin: auto;
text-align: center;
}

h2 {
margin: 1.25rem auto 0;
font-size: 1.25rem;
font-weight: normal;
font-feature-settings: "palt";
}

h3 {
margin: 0.5rem auto 0.25rem;
font-size: 1rem;
font-feature-settings: "palt";
}

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

#link-for-release-notes {
width: calc(100vw - 1rem);
max-width: 720px;
margin: 1rem auto;
}

@media screen and (min-width: 480px) {
.small-screen-only {
display: none;
}

#headline h2 {
font-size: 1.5rem;
letter-spacing: 0.25rem;
}

#headline p {
font-size: 1.5rem;
}

}