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

@font-face {
  font-family: "Monaco";
  src:
    url("/assets/fonts/monaco.woff2") format("woff2"),
    url("/assets/fonts/monaco.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Monaco";
  src:
    url("/assets/fonts/monaco-bold.woff2") format("woff2"),
    url("/assets/fonts/monaco-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chicago";
  src:
    url("/assets/fonts/ChicagoFLF.woff2") format("woff2"),
    url("/assets/fonts/ChicagoFLF.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chicago_12";
  src:
    url("/assets/fonts/ChiKareGo2.woff2") format("woff2"),
    url("/assets/fonts/ChiKareGo2.woff") format("woff"),
    url("/assets/fonts/ChiKareGo2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geneva_9";
  src:
    url("/assets/fonts/FindersKeepers.woff2") format("woff2"),
    url("/assets/fonts/FindersKeepers.woff") format("woff"),
    url("/assets/fonts/FindersKeepers.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  background: linear-gradient(90deg, #fff 21px, transparent 1%) 50%, linear-gradient(#fff 21px, transparent 1%) 50%, #000;
  background-attachment: fixed;
  background-size: 22px 22px
}

a {
  color: #000;
  text-decoration: underline
}
hr {
  border-top: .15em solid #000
}

.bg {
background: #FFFFFF;
padding:5px;
width:50%;
height: 150px;
position: relative;
top: -9.8em;
left: 155px;
}

.in {
background: #FFFFFF;
color: #000;
border:1px solid black;
font-family: Geneva, sans-serif;
line-height: 1.125em;
height:150px;
overflow-y:auto;
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%);
}

.container-main {
  border-width:3px;
  border-style:solid;
  border-image: url("https://foollovers.com/mat/menu05/51a-none.gif") 9 fill round;
  background-color: white;
  margin: auto;
  width: 884px;
  height: 665px;
  position: relative;
  padding: 5px;
  z-index: 4;
}
 
.container {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  background-color: white;
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px white inset;
  z-index: 5;
}

.container-thin {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  background-color: white;
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 85px;
  box-shadow: 0 0 8px 8px white inset;
  z-index: 5;
}


#title {
  background: #fff;
  cursor: default;
  /* If you don’t have a real bold Monaco face, use 400 here */
  font-family: "Monaco", "Chicago", "Geneva_9", sans-serif;
  font-size: 2rem;
  font-weight: 700; /* change to 400 if no bold file */
  line-height: 1.1;
  margin: 0 auto;
  padding: .7em;
  text-align: center;
}

.outer-image {
  border-width: 1px;
  border-style:solid;
  position: relative;
  width: 150px;
  height: 150px;
  margin-top: 5px;
  margin-left: 1px;
}
 
.inner-image {
  width: 100%;
  height: 100%;
  background-image: url('https://neocities.org/site_thumbnails/10/58/movieclip/assets/kevin.jpg.jpeg.210x158.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
 
 
.base-text {
  background-image: radial-gradient(black 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 {
  font-family: Frighted;
  background: linear-gradient(yellow 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: black;
}

.ipad_inner {
  height: 16.5em;
  background: white;
  border-radius: 2px;
  border: 2px inset grey;
} 

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

 
.bubble_message_in {
  border-radius: 0px 25px 25px 25px;
  padding: 7px;
  background: grey;
  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 black;
}

 
.bubble_message_out {
  border-radius: 25px 0px 25px 25px;
  padding: 7px;
  background: grey;
  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 black;
}

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

.social_container {
  border: 3px solid black;
  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('IMG LINK HERE');
  background-size: cover;
  font-family: pixel;
  font-size: 1.25em;
  color: white;
  width: 276px;
  margin-top: 10px;
  margin-left: 3px;
}

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

.scroll_container_top {
  background: grey;
  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;
}

.scroll_container_bot {
  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;
}

.highlighted_number {
  font-family:'fenotype';
  border: 1px solid black;
  color: white;
  background: yellow;
  padding-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  -webkit-text-stroke: 1px black;
} 

.highlighted_text {
  font-family:'yipes';
  background: linear-gradient(black 50%, orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5em;
  font-weight:bold;
}