@charset "utf-8";
body{
display: grid;
grid-template-areas:
"head main"
"head foot";
grid-template-columns: 1fr 100fr}
@media (min-width: 1100px){
body{
background-image: var(--attached-image);
background-repeat: no-repeat;
background-position: bottom right}
}
header{grid-area: head}
main{grid-area: main}
footer{grid-area: foot}
header{
width: 28ch;
max-width: 30vw}
#nav{
display: block;
position: sticky;
top: 0;
border-right: 1px solid silver;
border-image: linear-gradient(to bottom, silver, transparent) 1}
#nav a[rel="home"]{
font-size: 2em;
display: block}
#menu-toggle{
display: none}
#nav ul{
position: initial;
grid-template-columns: initial;
transform: initial;
width: initial;
background: initial;
border: initial;
justify-content: initial;
font-size: 1em;
padding-top: 4em}
#nav li{
margin: .7em 1em}
#nav li.icon{
margin: 3em 1em 1em 1em;
width: 3em}
#nav li.icon + .icon{
margin-left: .1em !important;
width: 2em}
main{
padding: 3em}
footer{
position: fixed;
right: -8ch;
bottom: 8ch;
transform: rotate(-90deg)}
#gallery:target{
column-count: 3;
aaa-transform: translateY(50%)}
#gallery:target *{margin: 0}
#gallery:target > *{
aaa-transform: translateY(-50%)}
blockquote{
display: inline-block;
width: 25%;
vertical-align: middle}