/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html{
    background-color: #f6f6f6;
    font-size: 16px;
    line-height: 1.6;
}
@media only screen and (max-width: 550px){
    html{
        padding: 0 !important;
        margin: 1rem auto 7rem;
        width: 90%;
        font-size: 16px;
    }
    .grid-container{
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
    }
    .box .maintitle, .box .secondtitle, .box .left, .box .main, .box footer, .box nav, .box .photos, .box .photos figure{
        grid-column: 1 / 2 !important;
    }
    .box nav {
        grid-row: 1 / 2;
    }
    .box .maintitle{
        grid-row: 2 / 3;
    }
    .box .secondtitle{
        grid-row: 3 / 4;
    }
    h1,h2,h3{
        margin-bottom: auto !important;
    }
}
.box{
    margin: 2em auto;
    max-width: 60em;
    font-family: 'neutral', 'standard' ,sans-serif;
    color: #4e4e4e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.grid-container{
    display: grid;
    grid-auto-rows: minmax(2rem, auto);
    grid-template-columns: minmax(1rem, 1fr) minmax(auto, 34em) minmax(1rem, 1fr);
    grid-gap: 1rem;
}
.maintitle, .left{
    grid-column: 1 / 2;
}
.secondtitle, .main{
    grid-column: 2 / 3;
}
.maintitle, .secondtitle{
    grid-row: 1 / 2;
}
h1,h2,h3{
    font-family: 'neutral', 'standard' ,sans-serif;
    font-size: 1.18em;
    margin-bottom: 1.5em;
    font-weight: 700;
}
p{
    margin-bottom: 1.5rem;
}
ul li{
    margin-bottom: .5ch;
}
ul li a::before{
    content: '-';
}
ul li a::after{
    content: '-';
}
.mono{
    font-family: 'menlo', 'Consolas', monospace;
}
a{
    color: #f1211a;
    text-decoration: none;
}
.red{
    color: #f1211a;
}
.vbox{
    margin-top: 1em;
    background-color: #e34234;
    width: 300px;
    height: 300px;
    margin: auto;
}
hr{
    margin: 1em auto;
    border: none;
}
hr::before{
    content: '* * *';
    display: block;
    text-align: center;
}
blockquote{
    font-size: .95em;
    margin: 1em auto 1em 1.5em;
    line-height: 1.4;
}
img{
    width: auto;
    height: 100%;
}
.sbs{
    display: flex;
    width: 55ch;
    position: relative;
    left: 50%;
    right: 50%;
    margin: auto -50vw 1.5em;
}
figcaption{
    color: gray;
    font-size: .95em;
}
.photos{
    display: grid;
    margin-top: 1em;
}
.photos figure{
    margin-right: 2em;
    margin-bottom: 2em;
}
.twofig{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.me{
    font-size: 15px;
    font-family: 'Neutral';
    max-width: 200px;
    margin: 1em;
}
.me p{
    margin-bottom: auto;
}
.me code{
    font-size: 15px;
}