/* 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;
}

/* TEXT CONTAINER */
.bg, .inner { box-sizing: border-box;}

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

/* vv for image background. remove if want plain */
background-image:url(https://i5.glitter-graphics.org/pub/1493/1493815hzi1353gk8.jpg);
background-repeat: repeat;
background-size:cover;

padding:12px; /* make number bigger/smaller for a bigger/smaller border */
width: 83%;
border: 1px solid white;
position: relative;
top: -120px;
left: 140px;

}

.in {
  font-family: pixel;
  line-height: 1.125em;
  background: #FFF;
  color: #000;
  padding: 5px;
  border: 1px solid black;
  height: 60px;
  overflow-y: auto;

  scrollbar-width: auto;
  scrollbar-color: #87b2f5 #ffffff;
}

.in::-webkit-scrollbar {
  width: 10px;
}

.in::-webkit-scrollbar-track {
  background: #ffffff;
}

.in::-webkit-scrollbar-thumb {
  background: #87b2f5;
  border: 1px solid #000;
  border-radius: 0;
}

.in::-webkit-scrollbar-thumb:hover {
  background: #abc0e0;
}


/* INTRO */

.intro
{
  background-image: none;
  font-family: crayon;
  color: black;
  -webkit-text-stroke: 1px black;
  text-align: center;
  font-size: 1.7em;
  margin-bottom: 5px;
}

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


button
{
  border-radius: 50px;
  border: 2px solid black;
  background-image: url('https://dl.glitter-graphics.com/pub/3669/3669021mfooiosbwc.jpg');
  background-size: cover;
  font-family: pixel;
font-size: 1.25em;
color: white;
width: 276px;
margin-top: 10px;
margin-left: 3px;
}

.comm
{
  width: 18em;
height: 16.25em;
border-radius: 15px;
border: 1px solid white;
box-shadow: inset 10px 0px 6px -10px rgba(66,66,66,0.565), inset -10px 0px 6px -10px rgba(66,66,66,0.565), inset 0px 10px 6px -10px #ffffff, inset 0px -10px 6px -10px rgba(66,66,66,0.376);
background: radial-gradient(circle, rgba(255,255,255,1) 37%, #ABD6E0 100%);
position: relative;
top: -36.75em;
  left: 595px;
}

.imagemask {
background-image: url("https://i2.glitter-graphics.org/pub/2135/2135312uilxvtzsf8.gif");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2em;
font-weight:bold;
font-family: SakeMoru;
margin-bottom: 5px;
width:fit-content;
margin:0 auto; /* this is to center, if needed */
/* add below if you want an outline, if not remove */
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

.top
{
  background: #ABC0E0;
font-family: SakeMoru;
text-align: center;
  color: white;
border-radius: 10px 10px 0 0;
padding: 0.5em;
box-shadow: inset 10px 0px 6px -10px rgba(66,66,66,0.565), inset -10px 0px 6px -10px rgba(66,66,66,0.565), inset 0px 10px 6px -10px #ffffff, inset 0px -10px 6px -10px rgba(255, 255, 255,0.76);
-webkit-filter: drop-shadow(0px 0px 1px black);
  -webkit-text-stroke: 0.5px black;
  width: 15em;
  margin-left: 17px;
}

.bottom
{
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
border-radius: 0px 0px 10px 10px;
padding: 0.9em;
box-shadow: inset 10px 0px 6px -10px rgba(66,66,66,0.565), inset -10px 0px 6px -10px rgba(66,66,66,0.565), inset 0px 10px 6px -10px #ffffff, inset 0px -10px 6px -10px rgba(255, 255, 255,0.76);
-webkit-filter: drop-shadow(0px 0px 1px black);
  font-family: pixel;
  color: black;
  width: 14.2em;
  margin-left: 17px;
  height: 7em;
  line-height: 1.375em;
  overflow-y: scroll;
}

hello
{
  font-family:'fenotype';
  border: 1px solid black;
  color: white;
  background: #87B2F5;
  padding-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
    -webkit-text-stroke: 1px black;
}

bye
{
  font-family:'yipes';
background: linear-gradient(#5B77A8 50%, #A6C2F5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5em;
font-weight:bold;
}