:root {
  --cards-gap: 25px;
}

* {
  box-sizing: border-box;
}

main {
  display: block;
}

.far,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing : antialiased;
  display                : inline-block;
  font-style             : normal;
  font-variant           : normal;
  text-rendering         : auto;
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style : normal;
  font-weight: 900;
  src        : url("fonts/fa-solid-900.woff2") format("woff2"), url("fonts/fa-solid-900.woff") format("woff"), url("fonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style : normal;
  font-weight: 400;
  src        : url("fonts/fa-regular-400.woff2") format("woff2"), url("fonts/fa-regular-400.woff") format("woff"), url("fonts/fa-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style : normal;
  font-weight: normal;
  src        : url("fonts/fa-brands-400.woff2") format("woff2"), url("fonts/fa-brands-400.woff") format("woff"), url("fonts/fa-brands-400.ttf") format("truetype");
}

.fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.far {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

.fab {
  font-family: "Font Awesome 5 Brands";
}

/* far */
.fa-lightbulb:before {
  content: "\f0eb";
}

/* fas */
.fa-network-wired:before {
  content: "\f6ff";
}

/* fas */
.fa-landmark:before {
  content: "\f66f";
}

/* fas */
.fa-futbol:before {
  content: "\f1e3";
}

/* fas */
.fa-cube:before {
  content: "\f1b2";
}

/* fas */
.fa-cubes:before {
  content: "\f1b3";
}

/* far */
.fa-smile:before {
  content: "\f118";
}

/* fab */
.fa-windows:before {
  content: "\f17a";
}

/* fab */
.fa-github:before {
  content: "\f09b";
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

.topbar {
  width           : 100%;
  background-color: #fbfbf9;
  display         : flex;
  justify-content : center;
  box-shadow      : 0 1px 2px rgba(0, 0, 0, 0.25);
}

.topnav {
  display        : flex;
  justify-content: flex-end;
  line-height    : 2.5em;
  margin-right   : 5px;
  flex-wrap      : wrap;
  font-size      : smaller;
}

.toplink {
  padding: 4px 8px;
}

.icon {
  padding: 0 5px;
}

.selectnone {
  user-select: none;
}

.cards {
  margin        : 0 auto;
  display       : flex;
  flex-direction: column;
  gap           : var(--cards-gap);
}

.card {
  background   : white;
  padding      : 0 16px;
  box-shadow   : 0 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.cardlink {
  padding: 10px 4px;
}

.hoverlink {
  display        : inline-block;
  color          : #0073d8;
  text-decoration: none;
  position       : relative;
  z-index        : 1;
  transition     : all .2s ease-in-out;
  border-radius  : 4px;
}

.hoverlink::before {
  content      : '';
  position     : absolute;
  background   : #ffff80;
  left         : 0;
  bottom       : 0;
  width        : 100%;
  height       : 0;
  z-index      : -1;
  transition   : all .3s ease-in-out;
  border-radius: 4px;
}

.hoverlink:hover::before {
  bottom: 0;
  height: 100%;
}

.profileimg_container {
  float  : left;
  margin : 0;
  padding: 10px 10px 10px 0;
}

.profileimg {
  margin : 0;
  padding: 0;
  display: inline-block;
}

#profile_img {
  cursor: help;
}

.width {
  width: min(640px, 100%);
}

@font-face {
  font-family  : "fix-biz-underline";
  src          : local("Hiragino Sans"), local("Hiragino-Sans"), local("游ゴシック体"), local("YuGothic"), local("Meiryo"), local("Meiryo UI"), local("メイリオ");
  unicode-range: U+005F, U+FF3F;
}

body {
  margin          : 0;
  background-color: #eeeeee;
  font-family     : fix-biz-underline, BIZ UDPGothic, -apple-system, BlinkMacSystemFont, Segoe UI, Consolas, sans-serif;
  display         : grid;
  color           : #000000d9;
  display         : grid;
  grid-template-areas:
    'nav'
    'main';
  grid-template-columns: 1fr;
  grid-template-rows   : auto 1fr;
  line-height          : 1.7;
}

body>header {
  grid-area: nav;
}

main {
  grid-area: main;
  padding  : var(--cards-gap) 0;
}

.hidden {
  position: absolute;
  top     : -9999px;
  left    : -9999px;
}

@media screen and (max-width: 640px) {

  .profileimg_container {
    width: 40%;
  }

  .profileimg {
    width : 100%;
    height: auto;
  }

  .cards {
    margin: 0;
  }

  .card {
    padding: 0 5px;
  }
}

@media screen and (max-width: 300px) {
  * {
    word-break: break-all;
  }
}

.profileimg:hover {
  animation                : shake .7s ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(1deg);
  }

  10% {
    transform: translate(-1px, 2px) rotate(-2deg);
  }

  20% {
    transform: translate(2px, 3px) rotate(-1deg);
  }

  30% {
    transform: translate(-3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(0px, 1px) rotate(-2deg);
  }

  50% {
    transform: translate(-2px, 0px) rotate(1deg);
  }

  60% {
    transform: translate(-2px, 2px) rotate(-1deg);
  }

  70% {
    transform: translate(2px, -1px) rotate(0deg);
  }

  80% {
    transform: translate(0px, 1px) rotate(2deg);
  }

  90% {
    transform: translate(-2px, 0px) rotate(-1deg);
  }

  100% {
    transform: translate(-1px, 2px) rotate(0deg);
  }
}