@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

@media screen and (width < 600px) {
   :root {
      font-size: 0.5rem;
   }
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   width: 100%;
   margin: 0;

   background-color: #007fff;
   background-image: linear-gradient(140deg, #0af, #68f);

   font-family: "DotGothic16", sans-serif;
   font-weight: 400;
   font-style: normal;

   color: #333;
}

main {
   display: flex;
   flex-direction: column;
   align-items: center;

   padding: 2em;
   width: 40em;
   max-width: 100%;
   box-sizing: border-box;
}

header {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;

   background-color: #ffffffcc;

   width: 100%;

   box-sizing: border-box;
   padding: 1em;

   border-radius: 1.5em;

   font-size: small;

   .amamy_icon {
      background-color: black;
      background: no-repeat center/100% url("../image/amamy_icon.png");
      width: 8em;
      height: 8em;
      border-radius: 100%;
      box-shadow: 0 4px 16px 1px #024;

      margin: .5em 0 1.5em 0;
   }

   .name {
      font-size: x-large;
   }

   rt {
      font-size: .4em;
   }

   .description {
      margin: 1em 0 .5em 0;
      font-size: 0.75rem;
      text-align: center;
   }

   .share-icon {
      position: absolute;
      right: .5em;
      top: .5em;
      cursor: pointer;
   }
}

article {
   display: flex;
   flex-direction: column;
   align-items: center;

   background-color: #ffffffcc;

   width: 100%;

   box-sizing: border-box;
   margin: 1em;
   padding: 2em;

   border-radius: 1.5em;


   font-family: "Noto Sans JP", sans-serif;

   .table {
      display: flex;
      flex-direction: row;
      align-items: center;

      >.column {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: .5em 1em;
      }
   }

   >div {
      display: flex;
      flex-direction: column;
      align-items: center;

      width: 100%;
      text-align: center;
      margin: .5em 0;
   }

   >div:not(:last-child) {
      padding-bottom: 1em;
      border-bottom: 1px #0008 solid;
   }

   .sns {
      flex-direction: row;

      width: 100%;
      margin: 0;

      a {
         display: flex;
         flex-direction: column;
         align-items: center;
         border-radius: .25em;
         margin: .25em;
         padding: 1em;
         box-shadow: 0 0 4px #0248;
         color: inherit;
         text-decoration: none;
         flex: 1;

         svg,
         img {
            max-width: 100%;
            height: 1.2em;
            padding: 1em;
            margin: 0 .25em;

            fill: white;
         }
      }

      .x {
         background-color: black;
         color: white;
      }

      .youtube {
         background-color: red;
         color: white;

         svg {
            transform: scale(1);
         }

      }

      .niconico {
         background-color: #fafafa;

         img {
            transform: scale(2.5);
         }
      }

      .pixiv {
         background-color: #0096fa;
         color: white;

         svg {
            transform: scale(2);
         }
      }
   }

   .tag-info {
      .table {
         font-size: 1rem;

         a {
            color: #1D9bf0;
            font-weight: bolder;
            text-decoration: none;

            padding: .5em 1em;
         }
      }
   }

   .group {
      margin: .5em 0;

      >div {
         display: flex;
         flex-direction: row;
         align-items: stretch;

         margin: .5em 0;
         width: 100%;

         >div,
         >a {
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: .25em;
            margin: .25em;
            padding: 1em;
            box-shadow: 0 0 4px #0248;
            color: inherit;
            text-decoration: none;
            flex: 1;
            text-align: center;

            color: white;

            .description {
               font-size: .5rem;
            }
         }

         .leanurs {
            background-color: #a0a;
         }

         .vidrops {
            background-color: #0bf;
         }

         .paletta {
            background-color: #f6c;
         }
      }
   }

   .credit {

      .table {
         font-size: .75rem;

         span,
         a {
            text-decoration: none;
            padding: .25em 0;
         }

         a {
            font-weight: bolder;
            color: #1D9bf0;
         }
      }
   }
}

footer {
   color: white;
}

dialog {
   position: relative;
   width: 100%;

   .close {
      cursor: pointer;
      position: absolute;
      right: .5em;
      top: .5em;
   }
}