/* ---------- FONTS ---------- */
@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{
  font-family:"Frighted";
  src:url(https://dl.dropbox.com/s/ct0s037q78sao3f/Frighted.ttf);
}
@font-face{
  font-family:"SakeMoru";
  src:url(https://dl.dropbox.com/s/ktlx5w7t8gk42nb/SakeMoru-Regular.ttf);
}
@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);
}

/* ---------- THEME COLOR ---------- */
:root{
  --c:#B57D60; /* cambia este color */
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
body{
  margin:0;
  padding:25px 0;
  background-image: url("https://xixxii.neocities.org/images/bgs/angelicpretty52.jpg");
  background-repeat: repeat; /* o no-repeat */
  background-size: auto;     /* o cover */
}


/* ---------- MAIN CONTAINER ---------- */
.container{
  border-width:7px;
  border-style:solid;
  border-image:url("https://foollovers.com/mat/menu05/51a-none.gif") 9 fill round;
  margin:auto;
  width:884px;
  height:665px;
  position:relative;
  padding:5px;
  z-index:4;
}

/* ---------- HEADER (first container) ---------- */
.container-one{
  border:1px solid #fff;
  background-image:url("IMG LINK HERE");
  background-repeat:repeat;
  width:880px;
  height:170px;
  position:relative;
  left:1px;
  box-shadow:0 0 8px 8px #fff inset;
  z-index:5;
}
.top-border{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  pointer-events:none;
}
#name{
  font-family:"kawaii stitch";
  font-size:2em;
  -webkit-text-stroke:1px #fff;
  color:var(--c);
  margin-top:60px;
  margin-left:10px;
}

/* ---------- AVATAR FRAME ---------- */
.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;
  position:absolute;
  top:15px;
  left:15px;
  z-index:6;
}
.inner{
  width:100%;
  height:100%;
  background-image:url("");
  background-size:cover;
  background-position:center;
  border-radius:10px;
}

/* ---------- INTRO BOX ---------- */
.bg{
  position:absolute;
  top:195px;
  left:15px;
  width:360px;
  z-index:6;
}
.in{
  padding:10px;
  border-radius:12px;
  background-image:radial-gradient(var(--c) 30%, transparent 70%);
}
.intro{
  font-family:"starborn";
  color:#fff;
  -webkit-text-stroke:1px #000;
  text-align:center;
  font-size:1.5em;
  margin-bottom:6px;
}
.intro-text{
  font-family:"pixel";
  color:#000;
  background:rgba(255,255,255,0.85);
  border-radius:10px;
  padding:10px;
  line-height:1.35em;
}
mark{
  font-family:"Frighted";
  background:linear-gradient(var(--c) 50%, #fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:1.2em;
}

/* ---------- IPAD ---------- */
.four{
  position:absolute;
  top:290px;
  left:15px;
  z-index:6;
}
.ipad{
  border-radius:10px;
  padding:1em 0.55em;
  width:19.5em;
  height:19.5em;
  background:var(--c);
  position:relative;
}
.apple{
  height:16.5em;
  background:#fff;
  border-radius:2px;
  border:2px inset var(--c);
}

/* chat container inside ipad */
.chat{
  height:15.5em;
  width:18em;
  position:absolute;
  top:2.2em;
  left:13px;
  overflow-y:auto;
  padding-right:6px;
}
.bubble{
  border-radius:0 25px 25px 25px;
  padding:7px;
  background:var(--c);
  font-family:"pixel";
  box-shadow:inset 13px 0 6px -10px rgba(66,66,66,.56),
             inset -13px 0 6px -10px rgba(66,66,66,.56),
             inset 0 13px 6px -10px #fff,
             inset 0 -13px 6px -10px rgba(66,66,66,.38);
  margin-bottom:10px;
  border:1px solid var(--c);
  color:#000;
}
.bubble2{
  border-radius:25px 0 25px 25px;
  padding:7px;
  background:var(--c);
  font-family:"pixel";
  box-shadow:inset 13px 0 6px -10px rgba(66,66,66,.56),
             inset -13px 0 6px -10px rgba(66,66,66,.56),
             inset 0 13px 6px -10px #fff,
             inset 0 -13px 6px -10px rgba(66,66,66,.38);
  margin-bottom:10px;
  border:1px solid var(--c);
  color:#000;
}

/* ---------- NAVI BUTTONS ---------- */
.navi{
  border:3px solid var(--c);
  height:200.5px;
  background:#fff;
  width:281px;
  position:absolute;
  top:195px;
  left:595px;
  box-shadow:inset 13px 0 6px -10px rgba(66,66,66,.30),
             inset -13px 0 6px -10px rgba(66,66,66,.30),
             inset 0 13px 6px -10px #f0f0f0;
  z-index:6;
}
.navbtn{
  border-radius:50px;
  border:2px solid #000;
  background-image:url("IMG LINK HERE");
  background-size:cover;
  font-family:"pixel";
  font-size:1.25em;
  color:#fff;
  width:276px;
  margin-top:10px;
  margin-left:3px;
  padding:8px 10px;
  cursor:pointer;
}

/* ---------- RIGHT SCROLL BOX ---------- */
.comm{
  width:18em;
  height:16.25em;
  border-radius:15px;
  border:1px solid #fff;
  box-shadow:inset 10px 0 6px -10px rgba(66,66,66,.565),
             inset -10px 0 6px -10px rgba(66,66,66,.565),
             inset 0 10px 6px -10px #fff,
             inset 0 -10px 6px -10px rgba(66,66,66,.376);
  background:radial-gradient(circle, #fff 37%, var(--c) 100%);
  position:absolute;
  top:412px;
  left:595px;
  z-index:6;
  padding-top:10px;
}
.imagemask{
  background:var(--c);
  font-family:"SakeMoru";
  text-align:center;
  color:#fff;
  border-radius:10px 10px 0 0;
  padding:0.5em;
  box-shadow:inset 10px 0 6px -10px rgba(66,66,66,.565),
             inset -10px 0 6px -10px rgba(66,66,66,.565),
             inset 0 10px 6px -10px #fff,
             inset 0 -10px 6px -10px rgba(255,255,255,.76);
  -webkit-filter:drop-shadow(0 0 1px #000);
  -webkit-text-stroke:.5px #000;
  width:15em;
  margin:0 auto;
}
.top{
  padding:10px 17px 0 17px;
}
.bottom{
  background:linear-gradient(180deg,#fff 0%,#eee 100%);
  border-radius:0 0 10px 10px;
  padding:0.9em;
  box-shadow:inset 10px 0 6px -10px rgba(66,66,66,.565),
             inset -10px 0 6px -10px rgba(66,66,66,.565),
             inset 0 10px 6px -10px #fff,
             inset 0 -10px 6px -10px rgba(255,255,255,.76);
  -webkit-filter:drop-shadow(0 0 1px #000);
  font-family:"pixel";
  color:#000;
  width:14.2em;
  margin:0 auto 10px auto;
  height:7em;
  line-height:1.375em;
  overflow-y:auto;
}

/* numbers highlight */
.hello{
  font-family:"fenotype";
  border:1px solid #000;
  color:#fff;
  background:var(--c);
  padding:5px 3px 3px 3px;
  -webkit-text-stroke:1px #000;
}

/* highlighted keywords */
.bye{
  font-family:"yipes";
  background:linear-gradient(var(--c) 50%, var(--c));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:1.5em;
  font-weight:bold;
}

/* ---------- DOLL LAYER (optional) ---------- */
.doll-bg{
  position:absolute;
  top:82px;
  left:340px;
  width:245px;
  height:352px;
  z-index:3;
}
.doll-heart{
  position:absolute;
  top:46px;
  left:434px;
  width:240px;
  z-index:4;
}
.doll{
  position:absolute;
  top:62px;
  left:472px;
  width:140px;
  z-index:5;
}