@import url(https://fonts.googleapis.com/css?family=Chewy);

:root {
  --main-color: #A387FF;
  /*--alt-color: #8BBC6F;*/
  --alt-color: rgba(139,188,111,0.4);
  --alt2-color: #FFFFA3;
  /*--alt-color: #FFFFA3;*/
  /*--alt-color: #8BBC6F;*/
  --shadow-color: rgba(0,0,0,0.5);
  --card-offset: 4px;
  --card-inv-offset: -4px;
  /*--card-offset-open: 8px;
  --card-inv-offset-open: -8px;*/
  /*--card-offset-open: 2px;
  --card-inv-offset-open: -2px;*/
}

/*body {
  background: black;
}*/

* {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
}

.title {
  font-size: 4em;
  color: var(--main-color);
  text-align: center;
  padding-top: 16px;
  -webkit-text-stroke: 3px white;
}
.category {
  font-size: 2em;
  color: var(--main-color);
  background: white;
  text-align: center;
  /*line-height: 64px;
  height: 64px;*/
  padding: 16px;
}
.text {
  padding-bottom: 8px;
  font-size: 1.5em;
  color: white;
  text-align: center;
}

.container > a {
  flex: 1 1 0px;
}

body {
  background: repeating-linear-gradient(
  45deg,
  white,
  white 50px,
  var(--alt-color) 50px,
  var(--alt-color) 100px),
    repeating-linear-gradient(
  -45deg,
  white,
  white 50px,
  var(--alt-color) 50px,
  var(--alt-color) 100px);
  background-blend-mode: multiply;
}

.center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  margin-bottom: -32px;
}

#main {
  background-color: var(--main-color);
  border: 16px solid white;
  border-radius: 25px;
  font-family: "Chewy";
  max-width: 960px;
  margin: 64px auto;
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;*/
  /*box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;*/
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.container {
  /*background-color: #C9C9FF;*/
  /*background-color: var(--main-color);
  border-radius: 25px;*/
  gap: 32px;
  padding: 32px;
  /*padding-left: 16px;
  padding-top: 16px;*/
  display: flex;
  align-items: center;
}

.shrine-item {
  /*max-height: 200px;*/
  /*flex: 1 1 0px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*height: 200px;*/
  height: 160px;
  border-radius: 25px;
  overflow: clip;
  transition: all 0.5s ease-out;
  /*padding: 32px;*/
  padding: 5%;
  border: 8px solid white;
  transform: translate(var(--card-inv-offset), var(--card-inv-offset));
  box-shadow: calc(var(--card-offset) * 2) calc(var(--card-offset) * 2) var(--shadow-color);
  /*box-shadow: 16px 16px var(--alt-color);*/
  position: relative;
}
.shrine-item:hover {
  /*transform: translate(-8px, -8px);
  box-shadow: 32px 32px var(--alt-color);*/
  transform: translate(var(--card-inv-offset-open), var(--card-inv-offset-open));
  box-shadow: calc(var(--card-offset-open) * 2) calc(var(--card-offset-open) * 2) var(--shadow-color);
}

.shrine-item > img {
  /*width: calc(100% - 256px);*/
  transition: all 0.3s ease-out;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.shrine-item:hover > img {
  transform: scale(1.1);
}

.shrine-item.inactive {
  filter: saturate(0%);
  opacity: 0.8;
}
.shrine-item.inactive:hover > img {
  transform: none;
}
.shrine-item.inactive:hover {
  transform: translate(var(--card-inv-offset), var(--card-inv-offset));
  box-shadow: calc(var(--card-offset) * 2) calc(var(--card-offset) * 2) var(--shadow-color);
}

#nso {
  background: url(../index/wallpaper.png);
}

#fe14 {
  background: url(fe14bg.png);
  background-size: cover;
}

#fe14 > img {
  /*margin-top: -20%;
  margin-bottom: -20%;*/
  max-height: 70%;
}

#omori {
  background: url(https://steamuserimages-a.akamaihd.net/ugc/1881958792148162325/EB8A358B9A82BC037F375D86E28E115AA8EE13DE/?imw=512&&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false);
  background-size: cover;
  /*image-rendering: pixelated;*/
}
#omori > img {
  transform: translate(0, -8px);
}

#mc {
  background: url(mcbg.png);
  background-size: 160px;
  image-rendering: pixelated;
}

#mp100 {
  background: url(../../pbs.twimg.com/media/D3OQt59WsAIlWrB.jpg);
  background-size: cover;
}

#bocchi {
  background: url(a/bocchi/bocchi_stage.png);
  background-size: cover;
  background-position: bottom;
}
/*#bocchi > img {
filter: 
  drop-shadow( 3px  0px 0px white) 
  drop-shadow(-3px  0px 0px white)
  drop-shadow( 0px  3px 0px white) 
  drop-shadow( 0px -3px 0px white);
}*/

#onimai {
  /*https://preview.redd.it/onimai-background-that-i-put-together-from-the-opening-v0-cyz3ga3ekzua1.png?width=1080&crop=smart&auto=webp&s=8f63777003fc4adbb23eb841a1d31edae2fa3210*/
  background: url(../../preview.redd.it/onimai-background-that-i-put-together-from-the-opening-v0-cyz3ga3ekzua1eef3.png?width=1080&crop=smart&auto=webp&s=8f63777003fc4adbb23eb841a1d31edae2fa3210);
  background-size: cover;
  background-position: 50%;
}

.version {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: var(--main-color);
  color: white;
  border-radius: 20px;
  gap: 10px;
  padding: 4px;
  border: 4px solid white;
  font-family: 'Chewy';
  transition: all 0.3s ease-out;
  transform: translate(-150%);
}

.shrine-item:hover > .version {
  transform: translate(0%);
}

@media (max-width:800px) {
  .container {
    flex-direction: column;
  }
}