/* Default */
* { margin: 0; padding: 0; }
html, body { height: 100%; display: flex; flex-direction: column; }
.main-1 { flex: 1; }
.main-1, .main-2 { display: block; }
.web-message { display: none; }

/* header */
.main-1 .header {
   padding: 3%;
   border: 2px solid;
}
.main-1 .header .web-name {
   text-decoration: none;
   border: 1.5px solid;
   border-radius: 5px;
   font-size: 65%;
   padding: 1.2%;
   color: black;
}
.main-1 .header .web-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 3.5%;
   font-size: 60%;
}
.main-1 .info { padding:1.5%; }
.main-1 .info a { text-decoration: none; }


/**
   web-info & attribution
**/
/* web-info */
.main-2 .web-info {
   display: grid;; 
   grid-template-areas: 
   "info-2"
   "info-3";
}
.main-2 .web-info .info-1 { grid-area: info-1; }
.main-2 .web-info .info-2 { grid-area: info-2; }
.main-2 .web-info .info-3 { grid-area: info-3; }
.main-2 .web-info .info-1, .info-2, .info-3 {
   padding: 2%;
   border: 1px solid;
}

.main-2 .web-info .info-2 .info-value a {
   text-decoration: none;
}

/* web-info > info-3 > list */
.main-2 .web-info .info-3 .list {
   list-style-type: disc;
   padding-left: 15px;
   font-size: 45%;
   font-size: 4vw;
}
.main-2 .web-info .info-3 .list li a {
   text-decoration: none;
}

/* attribution */
.main-2 .attribution {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.main-2 .attribution .text {
   text-align: center;
}

@media screen and (min-width: 400px) {
   /* header */
   .main-1 .header {
      padding: 2%;
   }
   .main-1 .header .web-name {
      border-radius: 8px;
      padding: 0.8%;
   }
   .main-1 .header .web-box {
      padding-top: 2.2%;
      font-size: 90%;
   }

   /**
      web-info & attribution
   **/
   /* web-info */
   .main-2 .web-info {
      grid-template-areas:
      "info-2 info-2"
      "info-3 info-3";
   }
   /* web-info > info-3 > list */
   .main-2 .web-info .info-3 .list { font-size: 80%; }
}

@media screen and (min-width: 800px) {
   /** header **/
   .main-1 .header {
      padding: 1%;
   }
   .main-1 .header .web-name {
      border-radius: 10px;
      padding: 0.4%;
   }
   .main-1 .header .web-box {
      padding-top: 0.5%;
      font-size: 120%;
   }

   /**
      web-info & attribution
   **/
   /* web-info */
   .main-2 .web-info {
      grid-template-areas:
      "info-2 info-3"
   }
}