:root {
     --font-color: #cecfd0;
     --link-color: #9cbbda;
     overscroll-behavior: none;
}

body {
     font-family: "Hiragino Kaku Gothic ProN", sans-serif;
     background-image: url("https://keishispl.github.io/img/wallpaper/self_drawn.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center center;
     backdrop-filter: blur(10px);
     margin: 0;
     color: var(--font-color);
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     white-space: pre;
}

main {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     text-align: center;
     margin: 0;
     padding: 0;
     width: 100vw;
}

footer {
     text-align: center;
     margin: 0;
     padding: 0;
     width: 100vw;

     a {
          color: var(--link-color);
          text-decoration: none;
     }

     a:hover {
          filter: brightness(105%);
          text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
          transition: filter 0.1s ease, text-shadow 0.1s ease;
     }
}

#title {
     font-size: 40px;
     letter-spacing: 5px;
     padding: 50px 0;
     margin: 0;
     line-height: 1em;
     text-align: center;
}

.component {
     margin: 20px;
     padding: 50px 20px;
     background: rgba(0, 0, 0, 0.2);
     box-shadow: 0px 0px 7.5px rgba(227, 228, 237, .2);
     border: 2px solid rgba(255, 255, 255, .2);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     height: fit-content;
     cursor: pointer;
     flex-basis: calc(50% - 84px);
     transition: box-shadow 0.15s, background-color 0.15s, border 0.15s, transform 0.15s;

     &:hover {
          box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
          background-color: rgba(65, 65, 65, 0.15);
          border: 2px solid rgba(255, 255, 255, 0.25);
          transform: translateY(-5px);
     }

     h1 {
          display: block;
          font-size: 40px;
          letter-spacing: 10px;
          margin: 0;
          transition: font-size 0.15s ease, letter-spacing 0.15s ease;

          a {
               font-size: 20px;
               line-height: 20px;
               margin: 0;
               font-weight: normal;
               display: inline-block;
               transition: font-size 0.15s ease, line-height 0.15s ease;

               &.mid {
                    transform: translateY(-10px);
                    transition: transform 0.15s ease;
               }
          }
     }

     p {
          font-size: 20px;
          margin: 10px 0 0 0;
          transition: font-size 0.15s ease;
     }
}

.full-cell {
     flex-basis: calc(100% - 80px);
}

@media screen and (max-width: 1080px) {
     .component {
          flex-basis: calc(100% - 80px);
     }
}

@media screen and (max-width: 800px) {
     .component {
          max-width: calc(100% - 80px);

          &:hover {
               transform: translateY(-4px);
          }

          h1 {
               letter-spacing: 10px;
               font-size: 35px;

               a {
                    font-size: 17.5px;
                    line-height: 17.5px;

                    &.mid {
                         transform: translateY(-7.5px);
                    }
               }
          }

          p {
               font-size: 17.5px;
          }
     }
}

@media screen and (max-width: 650px) {
     .component {
          &:hover {
               transform: translateY(-3px);
          }

          h1 {
               letter-spacing: 5px;
               font-size: 30px;

               a {
                    font-size: 15px;
                    line-height: 15px;

                    &.mid {
                         transform: translateY(-7.5px);
                    }
               }
          }

          p {
               font-size: 15px;
          }
     }
}

@media screen and (max-width: 500px) {
     .component {
          padding: 30px 20px;

          h1 {
               letter-spacing: 5px;
               font-size: 25px;

               a {
                    font-size: 12px;
                    line-height: 15px;
                    letter-spacing: 2.5px;

                    &.mid {
                         transform: translateY(-5px);
                    }
               }
          }

          p {
               font-size: 12px;
               margin: 5px 0 0 0;
          }
     }
}

select {
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     background: transparent;
     box-shadow: 2px 2px 5px rgba(227, 228, 237, .2);
     border: 2px solid rgba(255, 255, 255, .2);
     backdrop-filter: blur(10px);
     border-radius: 5px;
     font-family: "Hiragino Kaku Gothic ProN", sans-serif;
     font-size: 16px;
     color: var(--font-color);
     line-height: 38px;
     margin: .5em;
     padding: 10px 15px;
     letter-spacing: 2px;
     text-align: center;
     text-decoration: none;
     box-sizing: border-box;
     display: inline-block;
     cursor: pointer;
     transition: .1s box-shadow ease, .1s background-color ease, .1s border ease;

     &:hover {
          box-shadow: 2px 2px 7.5px rgba(227, 228, 237, .5);
          background-color: rgba(255, 255, 255, .1);
          border: 2px solid rgba(255, 255, 255, .3);
     }
}