*{margin:0;padding:0;}
html,body,.ui{width:100%;height:100%;display:flex;flex-direction:column;}
.ui .main-1{flex:1;}
.ui .main-1 .header{padding:1.5%;border:1px solid;}
.ui .main-1 .header .isN{font-size:100%;}
.ui .main-1 .header .isD{font-size:90%;}
.ui .main-1 .content{padding:3.5%;}
.ui .main-1 .content .postWrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;}
.ui .main-1 .content .postWrapper .post-item .webWrapper{text-decoration: none; color: black;}
.ui .main-1 .content .postWrapper .post-item{padding:2%;border:1px solid;}
.ui .main-1 .content .postWrapper .post-item .post-info,.webWrapper .post-info{font-size:90%;}
.ui .main-2 .footer{border:1px solid;}
.ui .main-2 .footer .itemWrapper{display:grid;grid-template-areas:"item1" "item2" "item3";}
.ui .main-2 .footer .itemWrapper .item1,.item2,.item3{padding:2%;border:1px solid;}
.ui .main-2 .footer .itemWrapper .item1{grid-area:item1;}
.ui .main-2 .footer .itemWrapper .item2{grid-area:item2;}
.ui .main-2 .footer .itemWrapper .item3{grid-area:item3;}
.ui .main-2 .footer .itemWrapper .item1 .value{padding-top:0.3%;font-size:70%;}
.ui .main-2 .footer .itemWrapper .item2 .value{padding-top:0.3%;font-size:70%;}
.ui .main-2 .footer .itemWrapper .item3 .value{padding-top:0.3%;font-size:70%;}
.ui .main-2 .footer .attribution{display:flex;flex-direction:column;align-items:center;}
.ui .main-2 .footer .attribution .text{text-align:center;font-size:60%;padding:1%;}
@media screen and (min-width:400px){
   .ui .main-1 .content{padding:2.5%;}
   .ui .main-2 .footer .itemWrapper{grid-template-areas:"item1 item2" "item3 item3";}
   .ui .main-2 .footer .itemWrapper .item1 .value{font-size:80%;}
   .ui .main-2 .footer .itemWrapper .item2 .value{font-size:80%;}
   .ui .main-2 .footer .itemWrapper .item3 .value{font-size:80%;}
}
@media screen and (min-width:800px){
   .ui .main-1 .content{padding:1.5%;}
   .ui .main-2 .footer .itemWrapper{grid-template-areas:"item1 item2 item3";}
   .ui .main-2 .footer .attribution .text{padding:0.5%;}
}