/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}


/* Use control+shift+r to reload a page to put modifications to style.css into action!"


html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}



::selection {
/* Change highlight background color */
background: #8CAFA8;
/* Change highlight text color */
color: #FFFFFF;
}

@font-face {
font-family: kawaii stitch;
src: url(https://dl.dropbox.com/s/yjal3we9j6biyn5/Kawaii%20Stitch.ttf);
}
 
@font-face {
font-family: starborn;
src: url(https://dl.dropbox.com/s/l0541on0m5eqvdj/Starborn.ttf);
}
 
@font-face {
font-family: pixel;
src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
}
 
@font-face {
src: url(https://dl.dropbox.com/s/ct0s037q78sao3f/Frighted.ttf);
font-family: Frighted;
}
 
@font-face {
src: url(https://dl.dropbox.com/s/ktlx5w7t8gk42nb/SakeMoru-Regular.ttf);
font-family: SakeMoru;
}
 
@font-face {
font-family:'yipes';
src: url(https://dl.dropbox.com/s/qrdm3wived8sm66/Yipes.ttf);
}
 
@font-face {
font-family:'fenotype';
src: url(https://dl.dropbox.com/s/klo6yfrf62916qp/02.10FEN.TTF);
}


.index-bar {
  display: flex;       
  flex-wrap: wrap;     
  gap: 10px;
  
  border-width:7px;
  border-style:solid;
  border-image: url("backrounds/TextBackroundWhiteAndCyan.png") 9 fill round; 
  margin: auto;
  min-width: 884px;
  height: 22px;
  position: relative;
  padding: 3px;
  z-index: 4;
  
  margin-bottom: 10px;
  
}


#button  a:link, a:visited {
  background-color: #8CAFA8;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
} 
#button a:hover, a:active {
  background-color: #597C7E;
}


#starborn
{
  font-family: starborn;
  -webkit-text-stroke: 1px white;
  color: #597c7e;
}




a:link {
  color: #597c7e;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #597c7e;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #8CAFA8;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #D9FFF8;
  background-color: transparent;
  text-decoration: none;
}





.container {
  border-width:7px;
  border-style:solid;
  border-image: url("backrounds/TextBackroundWhite.png") 9 fill round; 
  margin: auto;
  width: 884px;
  height: 665px;
  position: relative;
  padding: 5px;
  z-index: 4;
}


.container-one {
  border-width:11px;
  border-style:solid;
  border-image: url("backrounds/TextBackroundCyan.png") 9 fill round; 
  margin: auto;
  width: 860px;
  height: 150px;
  position: relative;
  z-index: 5;
}




.container-one-gradient {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.7);
  background-image: url('backrounds/TextBackroundCyan.png');
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0.7) inset;
  z-index: 5;
}

  
  


#name
{
  font-family: kawaii stitch;
  font-size: 3em;
  -webkit-text-stroke: 1px white;
  color: #597c7e;
  margin-top: 60px;
  margin-left: 10px;
}

.outer
{
  border-width:7px;
  border-style:solid;
  border-image: url("https://foollovers.com/mat/baf/food/fo32-008-a.gif") 7 fill round;
  border-radius:15px;
  width: 115px;
  height: 115px;
  margin-top: 10px;
}
.inner
{
 width: 100%;
 height: 100%;
 background-image: url('resourses/d20.png');
 background-size: cover;
}


.ipad
{
  border-radius: 10px;
  padding: 1em 0.55em 1em 0.55em;
  width: 19.5em;
  height: 19.5em;
  background: #ffffff;
}

.apple
{
height: 16.5em;
  background: white;
  border-radius: 2px;
  border: 2px inset #ffffff;
}

.four
{
  position: relative;
  top: -7.5em;
}

.bubble
{
  border-radius: 0px 25px 25px 25px;
  padding: 7px;
  background: #8CAFA8;
  font-family: pixel;
  color: #ffffff;
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  margin-bottom: 10px;
  border: 1px solid #597C7E;
}

.bubble2
{
  border-radius: 25px 0px 25px 25px;
  padding: 7px;
  background: #C57F65;
  font-family: pixel;
  color: #ffffff;
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  margin-bottom: 10px;
  border: 1px solid #784E50;
}

.chat
{
  height: 15.5em;
  width: 18em;
  position: relative;
  top: -16.125em;
  left: 13px;
  overflow-y: scroll;
}


.bg, .inner { box-sizing: border-box;}

.bg {
/* for plain background */
background: #FE82B624;

/* vv for image background. remove if want plain */
background-image:url(backrounds/background-blue-8x8.png);
background-repeat: repeat;
background-size:cover;

padding:10px; /* make number bigger/smaller for a bigger/smaller border */
width: 740px;
border:1px solid black;
position: relative;
top:-8em;
left: 138px;
}

.in {
font-family: pixel;
line-height: 1.125em;
background: #FFF;
color: #000;
padding:5px;
border:1px solid white;
width: 880px;
height:103px; /* set height to "height:fit-content;" to expand with text size */
overflow-y:auto; /* remove overflow if you don't want a scroll */
box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 30%), inset -13px 0 6px -10px rgb(66 66 66 / 30%), inset 0 13px 6px -10px #f0f0f0, inset 0 0 0 -10px rgb(66 66 66 / 30%);
}

.in2 {
font-family: pixel;
line-height: 1.125em;
background: #FFF;
color: #000;
padding:5px;
border:1px solid white;
width: 705px;
height:103px; /* set height to "height:fit-content;" to expand with text size */
overflow-y:auto; /* remove overflow if you don't want a scroll */
box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 30%), inset -13px 0 6px -10px rgb(66 66 66 / 30%), inset 0 13px 6px -10px #f0f0f0, inset 0 0 0 -10px rgb(66 66 66 / 30%);
}

.statblock {
font-family: pixel;
line-height: 1.125em;
background: #FFF;
color: #000;
padding:5px;
border:1px solid white;
width: 870px;
height:fit-content;
box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 30%), inset -13px 0 6px -10px rgb(66 66 66 / 30%), inset 0 13px 6px -10px #f0f0f0, inset 0 0 0 -10px rgb(66 66 66 / 30%);
}

.intro
{
  background-image: radial-gradient(#8cafa8 30%, transparent 70%);
  font-family: starborn;
  color: white;
  -webkit-text-stroke: 1px black;
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 5px;
}

mark
{
  font-family: Frighted;
  background: linear-gradient(#597c7e 50%, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5em;
}

.container-auto {
    border-width:7px;
    border-style:solid;
    border-image: url("backrounds/TextBackroundWhite.png") 9 fill round;
    margin: auto;
    width: 884px;
    min-height: 665px;
    position: relative;
    padding: 5px;
    z-index: 4;

}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}