@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@font-face {
  font-family: 'Press Start 2P';
  src: url('https://static.wikitide.net/jbcstudioswiki/8/80/PressStart2P.woff') format('woff')
}

/* item asylum kit */

.ia-kit-preview {
  width: 371px;
  height: 536px;
  background-size: cover;
  position: relative;
}
.ia-kit-container {
  position:relative;
  width:371px;
  height:536px
}

.ia-kit-title {
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  width:341px;
  height:96px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;
  text-shadow:1px 0 black,0 1px black,-1px 0 black,0 -1px black,1px 1px black,-1px 1px black,1px -1px black,-1px -1px black;
  font-family:"Press Start 2P",sans-serif;
  font-size:30px
}
.ia-kit-hp {
  position:absolute;
  top:120px;
  left:17px;
  font-size:42px;
  width:176px;
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-weight:400;
  color:white;
  text-shadow:1px 0 black,0 1px black,-1px 0 black,0 -1px black,1px 1px black,-1px 1px black,1px -1px black,-1px -1px black;
  font-family:"Roboto Mono",sans-serif
}
.ia-kit-stat-attack,
.ia-kit-stat-defense {
  position:absolute;
  top:30px
}
.ia-kit-stats-column-left,
.ia-kit-stats-column-right {
  position:absolute;
  top:107px;
  font-size:23px;
  font-weight:bold;
  color:white;
  text-shadow:1px 0 black,0 1px black,-1px 0 black,0 -1px black,1px 1px black,-1px 1px black,1px -1px black,-1px -1px black;
  font-family:"Roboto Mono",sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.ia-kit-stats-column-left {
  left:235px
}
.ia-kit-stats-column-right {
  right:21px
}
.ia-kit-stat-walkspeed,
.ia-kit-stat-attack,
.ia-kit-stat-jumppower,
.ia-kit-stat-defense {
  width:42px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:bold;
  color:white;
  text-shadow:1px 0 black,0 1px black,-1px 0 black,0 -1px black,1px 1px black,-1px 1px black,1px -1px black,-1px -1px black;
  font-family:"Roboto Mono",sans-serif
}

.ia-kit-item1-name,
.ia-kit-item2-name,
.ia-kit-item3-name {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-weight:400;
  color:white;
  text-shadow:1px 0 black,0 1px black,-1px 0 black,0 -1px black,1px 1px black,-1px 1px black,1px -1px black,-1px -1px black;
  font-family:"Roboto Mono",sans-serif;
  width:316px;
  height:83px;
  line-height:1.3
}
.ia-kit-item1-name {
  top:234px
}
.ia-kit-item2-name {
  top:341px
}
.ia-kit-item3-name {
  top:450px
}

body {
    background:#173f5f url(./images/ia-background.png);
    background-size:12.2%;
    animation:20s infinite linear ia-menu-background;
    font-family:'Roboto Mono',sans-serif;
    font-size:20px;
    font-weight:400;
  color:white;
  text-shadow:1px 0 black,0 1px black,-1px 0 black,0 -1px black,1px 1px black,-1px 1px black,1px -1px black,-1px -1px black;
  transition: background 0.5s ease

}

input {
  border-radius: 5px !important;;
  border: 2px solid #000 !important;;
  background:#0e2435;
  color: #fff !important;
  text-shadow: 1px 0 black, 0 1px black, -1px 0 black, 0 -1px black, 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
  font-family:"Roboto Mono", sans-serif
}

#ia-funnydownloadbuttonlolol {
  border-radius: 5px !important;
  border: 2px solid #000 !important;
  background:#0e2435;
  color: #fff !important;
  text-shadow: 1px 0 black, 0 1px black, -1px 0 black, 0 -1px black, 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
  font-family:"Roboto Mono", sans-serif;
  position: absolute;
  left: 35%;
  top: 50%;
}

select {
  border-radius: 5px !important;
  border: 2px solid #000 !important;
}

@keyframes ia-menu-background {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: calc(-100% / 3);
    }
}

.ia-footer {
  background:#0e2538;
  text-align: center;
  color: #fff;
  position: fixed; /* fixed to viewport */
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  z-index: 99999;
  display: block;
  font-size: 14px;
}
.ia-footer a {
  color:#fff
}