/* 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-image: url('https://i7.glitter-graphics.org/pub/2533/2533137urjkkvnji5.jpg');
background-attachment: fixed;
background-repeat: repeat;
overflow: hidden;
}

.container {
  border-width:10px; 
  border-style:solid;
  border-image: url("https://i.imgur.com/I7i5Udr.png") 35 fill round;        
}

.container-1 {
border-width: 1px;
  border-style: solid;
  border-color: white;
  background-image: url('https://i8.glitter-graphics.org/pub/525/525028cwsbtmipt4.jpg');
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px white inset;
  z-index: 5;
}

#name
{
  font-family: verdana;
  font-size: 2em;
  -webkit-text-stroke: 1px white;
  color:#0a0a0a;
  margin-top: 60px;
  margin-left: 10px;
}
.outer {
  border-width:10px; 
border-style:solid;
border-image: url("https://i1.glitter-graphics.org/pub/945/945711ftxj5wy5zr.jpg") 35 fill round; 
background-repeat: repeat;
border-radius:15px;
width: 115px;
height: 115px;
margin-top: 10px;
}

.inner
{
   width: 100%;
  height: 100%;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA-VwTUFCUe15tWyBilKL_Ep-fhwHMd1O5sS7Ph_hV-wUI2Chb6IEpdaC_JznefDY7Ol0baVyM6OA7hj3sqDxUb8me_9geAZcCYLG9ryGfCg&s=10');
  background-size: cover;
}

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

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

/* vv for image background. remove if want plain */
background-image:url(https://i.imgur.com/Wy0Pm6R.jpg);
background-size:cover;

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

.in {
 font-family: verdana
 line-height: 1.125em;
background: #FFF;
color: #000;
padding:5px;
border:1px solid black;
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%);
}

.intro 
{
background-image: radial-gradient(#0a0a0a30%, 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(#green 50%, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5em;
}

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

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

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

.bubble
{
  border-radius: 0px 25px 25px 25px;
  padding: 7px;
  background: #84e389;
  font-family: pixel;
  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 #71b074;
}

.bubble2
{
  border-radius: 25px 0px 25px 25px;
  padding: 7px;
  background: #215c24;
  font-family: pixel;
  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 #18421a;
}

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

.navi
{
  border: 3px solid #567357;
  height: 200.5px;
  background: white;
  width: 281px;
  position: relative;
  top: -37.5em;
  left: 595px;
  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%);
}

button
{
  border-radius: 50px;
  border: 2px solid black;
  background-image: url('https://i10.glitter-graphics.org/pub/68/68550m4sf6bw79p.gif');
  background-size: cover;
  font-family: pixel;
font-size: 1.25em;
color: white;
width: 276px;
margin-top: 10px;
margin-left: 3px;
}

.wowza
{
  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%, #28852b 100%);
position: relative;
top: -36.75em;
  left: 595px;
}

.imagemask {
background-image: url(https://www.foodandwine.com/thmb/LgywchK-Z7fkvJ78Ax6A8psoaLE=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/BREAD-AND-BUTTER-PICKLES-FT-MAG-RECIPE-0825-c810bf5677cc4028aa2e9f12e525a1c6.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2em;
font-weight:bold;
font-family:verdana;
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: #green;
font-family: verdana;
text-align: center;
  color: #288557;
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: #368528;
  padding-top: 5px;
  padding-right: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
    -webkit-text-stroke: 1px black;
}

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



  margin
 {
  auto
  width 884px;
  height: 665px;
  position: relative;
  padding: 5px;
  z-index: 4;
}