/* 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." */

// 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 {
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);
}
 
// main container (u may change the border image - link in description of video for more codes)
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;
 
// first container 
border-width: 1px;
  border-style: solid;
  border-color: white;
  background-image: url('IMG LINK HERE');
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px white inset;
  z-index: 5;
 
// name "blank's website"
font-family: kawaii stitch;
  font-size: 2em;
  -webkit-text-stroke: 1px white;
  color: #color;
  margin-top: 60px;
  margin-left: 10px;
 
// outer image (u may change the border image - link in description of video for more codes)
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 image
 width: 100%;
  height: 100%;
  background-image: url('IMG LINK HERE');
  background-size: cover;
 
// "introduction" text
background-image: radial-gradient(#color 30%, transparent 70%);
  font-family: starborn;
  color: white;
  -webkit-text-stroke: 1px black;
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 5px;
 
// highlighted text in the "introduction" box
font-family: Frighted;
  background: linear-gradient(#color 50%, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5em;
 
// ipad outer
border-radius: 10px;
  padding: 1em 0.55em 1em 0.55em;
  width: 19.5em;
  height: 19.5em;
  background: #color;
 
// ipad inner ("apple")
height: 16.5em;
  background: white;
  border-radius: 2px;
  border: 2px inset #color;
 
// positioning for ipad ("four")
position: relative;
  top: -7.5em;
 
// receiving bubble message
border-radius: 0px 25px 25px 25px;
  padding: 7px;
  background: #color;
  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 #color;
 
// sending bubble message
border-radius: 25px 0px 25px 25px;
  padding: 7px;
  background: #color;
  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 #color;
 
// "chat" container
height: 15.5em;
  width: 18em;
  position: relative;
  top: -16.125em;
  left: 13px;
  overflow-y: scroll;
 
// container with social buttons ("navi")
border: 3px solid #color;
  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%);
 
// buttons
border-radius: 50px;
  border: 2px solid black;
  background-image: url('IMG LINK HERE');
  background-size: cover;
  font-family: pixel;
font-size: 1.25em;
color: white;
width: 276px;
margin-top: 10px;
margin-left: 3px;
 
// container with scroll container on the inside
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%, #color 100%);
position: relative;
top: -36.75em;
  left: 595px;
 
// top of container on the inside (with image title)
background: #color;
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 of container on the inside (with info text)
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;
 
// numbers (highlight)
font-family:'fenotype';
  border: 1px solid black;
  color: white;
  background: #color;
  padding-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
    -webkit-text-stroke: 1px black;
 
// highlighted text (links and other key words)
font-family:'yipes';
background: linear-gradient(#color 50%, #color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5em;
font-weight:bold;