@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital@0;1&display=swap');

:root {
  /*font*/
  font-family: "IM Fell DW Pica";
  --main-font-size: 20px;
  font-size: var(--main-font-size);

  /*cursor*/
  cursor: url("/images/obradinnskin/default_cursor.png"), default;

  /*colors*/
  --dark-color: #2e3037;
  --light-color: #ebe5ce;

  /*background etc*/
  color: var(--light-color);
  background-color: var(--dark-color);
  scrollbar-color: var(--light-color) var(--dark-color);
}

::selection {
  color: var(--dark-color);
  background: var(--light-color);
}

button,
a {
  cursor: url("/images/obradinnskin/default_cursor.png"), default;
}

.container {
  max-width: 55%;
  margin: auto
}

header,
main {
  border-image: url("/images/obradinnskin/border.png") 40 38 36 38 repeat;
  border-image-width: 40px 38px 36px 38px;
}

header,
footer {
  text-align: center
}

header {
  padding: 1rem;
}

main {
  margin: 1rem 0;
  padding: 1rem 1.5rem
}

hr {
  background-color: var(--light-color);
  height: 2px;
  border: none;
  margin-top: 1rem;
}

/*buttons and stuff*/

button {
  background-color: var(--dark-color);
  color: var(--light-color);
  border: dotted var(--light-color) 2px;
  border-bottom: none;
  padding: 0.5rem;
  font-size: 1rem;
  font-family: "IM Fell DW Pica"
}

a.aLinkButton {
  background-color: var(--dark-color);
  color: var(--light-color);
  border: dotted var(--light-color) 2px;
  text-decoration: none;
  text-align: center;
  padding: 0.5rem;
  display: inline-block;
  width: max-content;
  margin: 1rem 0;
}

.buttonBox a.aLinkButton {
  flex-grow: 1;
  margin: 0;
}

/*boxes*/
.buttonBox {
  display: flex;
  flex-flow: row wrap;
}

.character {
  border: solid var(--light-color) 2px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem
}

.scrollableBox {
  max-height: 40rem;
  overflow: auto;
  padding: 0.5rem;
}

/*details*/

details {
  border: dotted var(--light-color) 2px;
}

details summary {
  padding: 0.5rem;
}

details .box {
  padding: 0 1rem 0.5rem;
  overflow: auto;
  max-height: 23rem
}

/*button hover effects*/
a.aLinkButton:hover,
details:hover,
button:hover,
button:focus {
  border: solid var(--light-color) 2px;
}

button:hover,
button:focus {
  border-bottom: none;
}

/*art gallery*/
.imageContainer {
  border: solid #ebe5ce 2px;
  display: flex;
  flex-flow: row wrap;
  margin: 1rem auto;
  align-content: flex-start;
  justify-content: space-evenly;
  align-items: center;
}

.artUnit {
  max-height: 15rem;
  max-width: 15rem;
  margin: 0.5rem;
}

.artUnit>img {
  max-height: 12rem;
  max-width: 13rem;
  filter: grayscale(100%);
  transition: 0.5s ease
}

.artUnit>img:hover {
  filter: grayscale(50%)
}


/*margin decoration*/
.staticDecoration {
  position: absolute;
  image-rendering: initial;
}

/*mobile tweaks*/
@media screen and (width < 600px) {
  :root {
    --main-font-size: 4.5vw
  }

  .hideOnMobile {
    display: none;
  }

  .container {
    max-width: 100%
  }
}