@import "wobble.css";
@import "shake.css";

@font-face {
  font-family: "Omori Normal";
  src: url(../fonts/omori_game2-webfont.woff) format("woff");
  src: url(../fonts/omori_game2-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Omori Horror";
  src: url(../fonts/omori_game-webfont.woff) format("woff");
  src: url(../fonts/omori_game-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

body {
  /*display: flex;
  align-items: center;
  justify-content: center;*/

  background: url(mountain.png), url(https://lilithdev.neocities.org/headspace/star_a.png), url(https://lilithdev.neocities.org/headspace/sky.png);
  background-repeat: repeat-x, repeat, repeat-x;
  background-size: cover, auto, cover;
  image-rendering: pixelated;
  background-attachment:fixed;
  background-position:left bottom;
  animation: slide 60s linear infinite;
  background-blend-mode: normal, lighten;
  background-position:
      left bottom 20%,
      left 0px top 0px,
      left bottom;
}

@keyframes slide{
  0% {
    background-position:
      left bottom 20%,
      left 0px top 0px,
      left bottom;
  }
  100% {
    background-position:
      left bottom 20%,
      left calc(-1023px * 2) top 0px,
      left bottom;
  }
}

/*body {
    max-width:800px;
    border:1px solid #7bb0e6;
    border-top:none;
    display:grid;
    grid-template-columns: 600px 200px;
    grid-template-rows: 125px 230px auto;
}*/

#site-banner {
    image-rendering: pixelated;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: 32px;*/
}

#header-name {
    max-width: 100%;
    max-height: 100%;
}

body {
    font-family: "Omori Normal";
    color: #FFFFFF;
    font-size: 28px;
    overflow-y: scroll;
}

a {
  color: #FFFFFF;
  font-size: 28px;
}

main {
	max-width: 800px;
  margin: 16px auto;
  padding: 16px;
}

#banner {
	max-width: 800px;
  margin: 16px auto;
  /*padding: 16px;*/
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  /*gap: 100px;*/
  list-style-type: none;
  padding: 8px;
}

#banner > li {
    position: relative;
}

#banner > li:hover::before {
    content:"";
    background-image: url(cursor.png);
    width: 30px;
    height: 15px;
    background-size: 30px, 15px;
    display: inline-block;

    animation-name: cursor-bounce;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /*position: relative;*/
    position: absolute;
    top: 12px;
    left: -40px;
}

.button {
  cursor: pointer
}

/*.wobble {
  animation-name: wobble-anim;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  position: relative;
  top: 0;
  left: 0;
}

@keyframes wobble-anim {
  0% {top: -4px}
  50% {top: 4px}
  100% {top: -4px}
}*/

@keyframes cursor-bounce {
  0% {left: -40px}
  50% {left: -34px}
  100% {left: -40px}
}

/*#banner > li {
    justify-content: space-around;
}*/

header {
    margin-top: 32px;
    margin-bottom: 16px;
    display: flex;
}

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.box {
    /*max-width: 960px;*/
    border: 3px solid white;
    color: #FFFFFF;
    /*font-family: "Omori Normal";*/
    background: black;
    /*font-size: 32px;*/
    /*margin: 8px;*/

    box-shadow: 0px 0px 0 1px black;
}

.font {
  font-family: 'Omori Normal';
  font-size: 28px;
  background: black;
  color: white;
}

.fancy-red {
  color: yellow;
}

.portrait {
  width: 106px;
  height: 106px;
}

#portrait-selector {
  display: none; flex-direction: column; gap: 8px; position: fixed; bottom: 16px; min-width: 800px; height: 432px; left: 50%; transform: translateX(-50%);
}

#portrait-selector-categories {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style-type: none;
  padding: 8px;
  margin: 0;
  border-bottom: white solid 3px;
}

#portrait-selector-categories > li {
  position: relative;
}

#portrait-selector-categories > li:hover::before {
  content:"";
  background-image: url(sprites/cursor.png);
  width: 30px;
  height: 15px;
  background-size: 30px, 15px;
  display: inline-block;

  animation-name: cursor-bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /*position: relative;*/
  position: absolute;
  top: 12px;
  left: -40px;
}

.portrait-category {
  overflow-y:scroll;
  flex:1;
  margin-left: 8px;
}

[contenteditable]:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  display: block;
  opacity: 0.5;
}

/*div[contenteditable=true]:empty:before{
  content: attr(placeholder);
  pointer-events: none;
  display: block;
  opacity: 0.5;
}*/

.checkbox {
  width: 32px;
  height: 32px;
  margin: 0;
}

label {
  vertical-align: top;
  font-size: 26px;
}

#help-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#help-list > li {
  margin: 16px;
}

#loading-message {
  font-weight: bold;
  font-size: 1.5em;
  /*margin-top: 64px;*/
}

@media (max-width: 900px) {
  #portrait-selector {
    display: none;
    transform: translateX(0%);
    box-sizing: border-box;
    min-width: 0;

    /*flex-direction: column;
    gap: 8px;
    position: absolute;
    bottom: 16px;
    min-width: 800px;
    height: 432px;
    left: 50%;
    transform: translateX(-50%);*/

    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /*background: rgba(51,51,51,0.7);
    z-index: 10;*/
  }

  #portrait-selector-categories {
    /*overflow:auto;
    gap: 32px;
    margin-right: 32px;*/
    flex-wrap: wrap;
    gap: 16px;
    /*padding: 0;*/
    row-gap: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 32px;
  }

  .dialog-buttons {
    display:none !important;
  }

  .dialog-buttons-small {
    display:flex !important;
  }

  .dialog-buttons-padding {
    display:block !important;
  }

  /*.dialog-top {
    max-width: 90px;
  }*/
}