/* Don't judge me, por favor... */

:root{
--header-fx: #00021c;
--link-color: #ff4141;
}

* {
  cursor: url(https://cur.cursors-4u.net/games/gam-4/gam308.cur), auto;
  box-sizing: border-box;
}

@font-face {
  font-family: BlockKie;
  src: url('/assets/fonts/BlockKie.ttf');
}

@font-face {
  font-family: SuperSquad;
  src: url('/assets/fonts/Super Squad.ttf');
}

p,
span,
li,
dd{
  strong{
    color: #fce24c;
    /*-webkit-text-stroke: .05px #000000;*/
    font-weight: bolder;
  }
}

blockquote,
section,
toc{
  strong{
    color: black;
    -webkit-text-stroke: 0px;
  }
}

/* p,
dd,
li{
  -webkit-text-stroke-width: .2px;
  -webkit-text-stroke-color: black;
} */

h1,
h2,
h3,
h4,
h5 {
  -webkit-text-fill-color: antiquewhite;
  font-family: 'SuperSquad';
  margin-bottom: 20px;
  margin-top: 20px;
  -webkit-text-stroke: 1px var(--header-fx);
  text-shadow: 3px .2px var(--header-fx);
}


  h2,
  h3,
  h4,
  h5{
    text-align: left;
  }

h1 {
  font-size: 35px;
  border-bottom: 2px var(--header-fx) solid;
  width: 100%;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 10px;
  text-align: center;
}

h2 {
  font-size: 25px;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  -webkit-text-stroke: .7px var(--header-fx);
  border-bottom: 2px var(--header-fx) solid;
}

h3 {
  margin: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  -webkit-text-stroke: .7px var(--header-fx);
}

h4 {
  text-align: left;
  font-size: 19px;
  margin: 0px;
  width: 100%;
}

body {
  background-color: #0b0e33;
  font-family: "BlockKie", sans-serif;
  color: antiquewhite;
  margin: 0;
  background-color: #0b0e33;
}

html,
body {
  margin: 0
}

* {
  box-sizing: border-box;
}

#container {
  max-width: 1070px;
  margin: auto;
}

a{
  font-weight: bolder;
}

p a,
dd a,
li a {
  color: var(--link-color);
  text-decoration-line: underline;
  /*-webkit-text-stroke: .05px #000000;*/
}

ul {
list-style-type: "✦ ";
}

li{
  text-indent: 0px;
}

hr {
  color: #180b36;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover {
  color: inherit;
}

a:hover {
  font-weight: strong;
  -webkit-text-stroke-width: .1px;
  -webkit-text-stroke-color: black;
  /*-webkit-animation: slide;*/
  transition: text-shadow .1s;
  text-shadow: 1.4px .2px #000000;
 /* -webkit-animation: slide 2s infinite alternate;*/
}

#toc{
  a:hover{
    -webkit-text-fill-color: antiquewhite;
  }
}
/*
@keyframes slide {
  0% {
    -webkit-text-stroke-color: #a61d1d
  }

  10% {
    -webkit-text-stroke-color: #d76c24
  }

  20% {
    -webkit-text-stroke-color: #ffaf26
  }

  30% {
    -webkit-text-stroke-color: #87d527
  }

  40% {
    -webkit-text-stroke-color: #1cbd2d
  }

  50% {
    -webkit-text-stroke-color: #1bbd7a
  }

  60% {
    -webkit-text-stroke-color: #23a6af
  }

  70% {
    -webkit-text-stroke-color: #23649e
  }

  80% {
    -webkit-text-stroke-color: #2d2493
  }

  90% {
    -webkit-text-stroke-color: #571680
  }

  100% {
    -webkit-text-stroke-color: #b01d4b
  }
}*/

#header {
  width: 100%;
  background-repeat: repeat;
  background-size: auto 100%;
  background-position: center;
  background-color: #1f2964;
  height: 100px;
  border-bottom: 7px solid #000642;
}

main {
background-color: #2c3280;
padding: 1px 20px 20px 100px;
text-align: left;
}

footer {
  background-color: #0b0e33;
  width: 100%;
  height: 40%;
  padding: 10px;
}

.coverhere {
margin:20px;
  background-repeat: no-repeat;
float: right;
  background-size: auto 100%;
    height: 400px;
  width: 269px;
    box-shadow: 5px 10px black;
  border: 4px solid #000000;
  border-radius: 1px;
   transition: .2s ease-in-out;
}

.coverhere:hover {
   transform: scale(1.1); 
}


blockquote{
    background-color: #fce24c;
  padding: 10px;
  margin: 20px;
  box-shadow: 5px 10px black;
  border: 4px black solid;
  border-radius: 5px;
  color: black;
  max-width:350px;

  p{
    text-indent: 10px;
  }

  li{
    color:black;
  }

      a{
      color: black;
    }
}

.imagehere {
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
    height: 150px;
  width: 150px;
  transition: transform 0.5s ease;
}

.imagehere:hover {
  transform: rotate(360deg);
}

.centerDivider {
  text-indent: 0px;
  text-align: center;
  display: block;
  margin: auto;
  width: 60%;
  margin-top: 30px;
  margin-bottom:30px;
}

.center {
  text-indent: 0px;
  text-align: center;
  display: block;
  margin: auto;
}

.box {
  background-color: #23286e;
  border: 1px solid #000000;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}

.scrollbox {
  background-image: url("https://web-surfer.neocities.org/imgs/assets/bg108.png");

  height: 50%;
  width: 105%;
  padding: 15px;
  margin: auto;
  margin-top: 20px;
  margin-left: -5px;
  margin-bottom: 50px;
  background-size: auto 300px;
  box-shadow: 5px 10px black;
  border: 4px black solid;
  border-radius: 5px;

  overflow-y: hidden;
  white-space: nowrap;
  overflow-x: auto;
}

.scrollbox strong {
  border-bottom: 1px black dotted;
}

section {
  background-color: #fce24c;
  padding: 25px;
  margin: 20px;
  box-shadow: 5px 10px black;
  border: 4px black solid;
  border-radius: 5px;
  color: black;

  li{
    color:black;
  }

      a{
      color: black;
    }
  }

figure img {
  border: 2px black solid;
  border-radius: 5px;
  height: 150px;
  width: 150px;
  white-space: normal;
  display: inline-block;
  transition: box-shadow .3s;
  transition: all .2s ease-in-out;
}

figure img:hover {
  box-shadow: 10px 7px black;
   transform: scale(1.1); 
}

figure {
  display: inline-block;
  vertical-align: top;
  padding: 5px;
  margin: auto;
  margin-bottom: 5px;
}

.button {
    margin: 1em 0;
    display: inline-block;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
	transition: all .2s ease-in-out;
}
.button:hover { 
  transform: scale(1.3); 
   box-shadow: 5px 7px black;
}

#toc {
  color: #170b33;
  float: left;
  text-align: left;
  width: 200px;
  max-height: 150px;
  margin-right: auto;
  margin: 5px 20px 15px -10px;
  padding: 5px;
  background-color: #fce24c;
  box-shadow: 5px 10px black;
  border: 4px black solid;
  border-radius: 5px;
  overflow-y: scroll;

  li {
    font-size: .9em;
    list-style-type: "✦ ";
  }

  a {
    color: black;
  }
}

.box4boxes {
  background-color: #0b0e33;
  width: 100%;
  padding: 20px;
  min-width: 300px;
  height: 50%;
  margin: auto;
  border: 0px;
  border-radius: 5px;
  overflow-y: scroll;
  max-height: 300px;
  min-width: 220px;
}

.bigishbox {
  background-color: #ffd874;
  color: #010215;
  width: 60%;
  min-width: 290px;
  max-height: 250px;
  padding: 10px;
  margin: auto;
  font-size: .9em;
  margin-top: 20px;
  margin-bottom: 30px;
  box-shadow: 5px 10px black;
  border: 4px black solid;
  border-radius: 5px;
  overflow-y: scroll;

  h3 {
    margin-bottom: 20px;
    text-indent: 35px;
  }

  strong {
    border-bottom: 1px black dotted;
  }

  img {
    max-height: 50px;
    max-width: 50px
  }
}

.bigishboxcentered {
  background-color: #ffd874;
  color: #010215;
  width: 60%;
  min-width: 290px;
  max-height: 250px;
  padding: 10px;
  margin: auto;
  font-size: .9em;
  margin-top: 20px;
  margin-bottom: 30px;
  box-shadow: 5px 10px black;
  border: 4px black solid;
  border-radius: 5px;
  overflow-y: scroll;
  text-align: center;

  h3 {
    margin-bottom: 20px;
    text-indent: 35px;
  }

  strong {
    border-bottom: 1px black dotted;
  }

  img {
    max-height: 50px;
    max-width: 50px
  }
}

.pagedoll{
  position:fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  filter: drop-shadow(1px 1px 1px black) 
  drop-shadow(-1px 0 black) 
  drop-shadow(0 2px 0 black) 
  drop-shadow(0 -1px 0 black) 
  drop-shadow(0 2px black) 
  drop-shadow(0 -1px black) 
  drop-shadow(2px -1px black) 
  drop-shadow(-1px -1px black);     
}

.pagedoll img{
  min-width: 100px;
  min-height: 100px;
  max-height:200px;
  max-width: 200px;
}

@-webkit-keyframes pagedoll {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(10px);
  }
  50% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  100% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes pagedoll {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  100% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-webkit-keyframes pagedoll-float {
  100% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes pagedoll-float {
  100% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
.pagedoll {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}
.pagedoll:hover, .pagedoll:focus, .pagedoll:active {
  -webkit-animation-name: pagedoll-float, pagedoll;
  animation-name: pagedoll-float, pagedoll;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

marquee {
  z-index: 1;
}

.longpicture {
  max-width: 100%;
  background-repeat: no-repeat;
  min-height: 100px;
  height:25%;
  margin-top: 20px;
  margin-bottom: 30px;
  box-shadow: 5px 10px black;
  border: 4px black solid;
  float: center;
  background-position: center;
  background-size: cover;
}

.gallery {
  background-color: none;
  padding: 10px;
  overflow: hidden;
}

ol {
  padding-left: 8%;
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 4%;
}

.galleryimage {
  width: 170px;
  height: 170px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  margin: 10px;
  border: 2px black solid;
  border-radius: 5px;
  white-space: normal;
  display: inline-block;
  transition: box-shadow .3s;
}

.galleryimage:hover {
  box-shadow: 10px 7px #000000;
}

.charactermain-image {
  height: 315px;
  width: 315px;
  margin-left: auto;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  border: 2px black solid;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.characterprofile {
  float: right;
  width: 300px;
  margin-left: auto;
  margin: 0px 0px 30px 30px;

  table {
  width: 315px;
  }
}

.locmain-image {
  height: 300px;
  width: 100%;
  margin-left: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 2px black solid;
  border-radius: 5px;
  white-space: normal;
  object-fit: cover;
      border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;

}

.locprofile {
  width: 100%;
  height: 300px;
  margin: auto;
  border: 0px;
  background-color: #23286e;
  margin-left: 0px;
  float: center;

  table {
    width: inherit;
    margin: inherit;
    display: table;
    float: left;
    margin-bottom: 20px;
  }

  tbody {
    margin: 3px 10px;
  }

  td,
  th {
    text-align: center;
    padding: 3px 30px;
  }

  td:nth-child(odd) {
    font-weight: 600;
    text-align: center;
  }

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


table {
  color: antiquewhite;
  width: 100%;
  max-width: 1000px;
  background-color: #e13232;
  border: 2px solid black;
  border-radius: 5px;
  border-collapse: separate;
  border-spacing: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;

  a {
    color: antiquewhite;
  }
}

tbody {
  margin: 3px 10px;
}

td,
th {
  text-align: left;
  padding: 3px 10px;
}

td:nth-child(odd) {
  font-weight: 600;
  text-align: right;
}

tr:nth-child(odd) {
  background-color: #c42d2d;
}

.footercenter{
  text-align: center;
  float: center;
  margin-left: 175px;
}


/* MEDIA QUERY */

@media only screen and (max-width: 1290px) {
  main {
    float: left;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin: 10px 0px 0px 00px;
    padding: 0px;
  }

  .scrollbox {
    max-width: 100%;
  }

  .footercenter{
    margin-top:20px;
    margin-left: 0px;
  }

  figcaption {
    width: 130px;
    vertical-align: top;
  }
}

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

  .characterprofile {
    float: right;
    width: 315px;
    margin: 0px 0px 30px 20px;

    table{
          margin: -10px 0px 10px 0px;
          width: inherit;
    }
  }

  main {
    padding: 20px;
  }

  .charactermain-image {
    width: 100%;
    margin: 0px 0px 10px 00px;
  }

  h1{
    margin-top: -15px;
  }


  figcaption {
    margin-right: 0px;
    margin-left: 0px;
    vertical-align: top;
  }

  .characterprofile {
    margin: 0px 10px 20px 30px;
  }

  table {
    margin: auto;
    margin-top: -20px;
  }

  main {
    padding: 20px;
  }

  .charactermain-image {
    width: 100%;
    margin: 0px 0px 10px 0px;
  }

  #floatimg {
    float: right;
    padding: 10px;
  }

  .coverhere {
    min-height: 250px;
  min-width: 168px;
}

  section{
    padding: 5%;
  }

  figure{
    margin: 0px;
  }

}

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

  #toc,
  .pagedoll {
    visibility: hidden;
    content-visibility: hidden;
    display: none;
   /* vertical-align: bottom;
    width: 100%;
    min-width: 180px;
    float: center;
    margin-left: -25px; */
  }

  blockquote{
    width:100%;
    float:center;
    margin: auto;
    margin-bottom: 20px;
  }

  .coverhere {
    width:fit-content;
    height: fit-content;
    margin: 20px;
    box-shadow: 2px 5px black;
  border: 2px solid #000000;

  img{
    width:50%;
    height: 70%;
  }
  }

}

/* WEBRINGS */

#oc-webring-widget {
  color: #030336ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  padding: 3em;
  margin-top: 15px;
  margin-bottom: 15px;
  width: fit-content;
  gap: 1em;
  border: 4px solid #030336ff;
  border-radius: 12px;
  background-image: url('https://web-surfer.neocities.org/imgs/assets/bg17.png');
}

#oc-webring-title {
  font-weight: bold;
  font-family: "supersquad", sans-serif;
  -webkit-text-fill-color: antiquewhite;
  margin: 15px;
  -webkit-text-stroke: .7px #030336ff;
}

#oc-webring-title,
#oc-webring-controls
 a:hover{
text-shadow: none;
}


#oc-webring-controls {
  display: inline-block;
  gap: 1em;
}

#oc-webring-widget a {
  color: #030336ff;
  text-decoration: none;
  text-shadow: none;
}


/* Speech bubble */


.bubble {
	position: relative;
	width: 300px;
	text-align: center;
	line-height: 1.4em;
	margin: 40px auto;
	background-color: #fff;
	border: 7px solid var(--header-fx);
	border-radius: 4px;
	padding: 20px;
}

p.thought {
	width: 300px;
	border-radius: 200px;
	padding: 30px;	
}

.bubble:before,
.bubble:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

.speech:before {
	left: 30px;
	bottom: -50px;
	border: 25px solid;
	border-color: var(--header-fx) transparent transparent var(--header-fx);
}

.speech:after {
	left: 38px;
	bottom: -30px;
	border: 20px solid;
	border-color: #fff transparent transparent #fff;
}

p.thought:before,
p.thought:after {
	left: 10px;
	bottom: -30px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 4px solid var(--header-fx);
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
}

p.thought:after {
	width: 20px;
	height: 20px;
	left: 5px;
	bottom: -40px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}