:root{
  --mainbgcolor: black; /* Main bg color*/
  
  --mainlinkcolor: #39fae7;
  --mainlinkhovercolor: #ff2b87;
  
  --bodyfont:'UNDEADPIXEL11'; /* body font family */  
  --bodycolor: green; /* #900C3F Heading colors */
  --bodyshadowcolor: #19317f; /* #900C3F Heading colors */
  
  --headfont:'rainyhearts'; /* Main text font family */
  --maincolor: #A01662; /* Main text font color */
 
   --subheadfont:'CHOMSKY'; /* body font family */  
  
  --bodysize: 12px; /* body font size https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face*/
  --navsize: 14px; /* nav font size */
  --tooltipsize: 12px; /* tooltips and hover font size */
  --listsize: 12px; /* tooltips and hover font size */
  
  
  --stepcolor1: #C27FFE; /* colors */
  --stepcolor2: #D1A0FD; /* colors */
  --stepcolor3: #DCB9FC; /* colors */h
  --stepcolor4: #e5ccfc; /* colors */
  
  --black: #000000; /* colors */
  --white: #ffffff; /* colors */
}

@font-face {
	font-family: 'rainyhearts';
	src: url('https://beak-tama.art/fonts/rainyhearts.woff') format("woff");
	src: url('https://beak-tama.art/fonts/rainyhearts.ttf') format('truetype');
} 

@font-face {
  font-family: 'pixelpoiiz', Courier;
  font-style: normal;
    font-weight: 400;
  src: url('https://beak-tama.art/fonts/font/pixelpoiiz.woff') format("woff");
  src: url('https://beak-tama.art/fonts/pixelpoiiz.ttf') format('truetype');
  
}

@font-face {
  font-family: 'creepygirl';
  src: url('https://beak-tama.art/font/CREERG__.TTF') format('truetype');
  
}

@font-face {
  font-family: '000WEBFONT';
  src: url('https://beak-tama.art/font/000WEBFONT.TTF') format('truetype');
  
}
@font-face {
  font-family: '3X8TINYCYRV24';
  src: url('https://beak-tama.art/font/3X8TINYCYRV24.TTF') format('truetype');
  
}
@font-face {
  font-family: 'BITSY';
  src: url('https://beak-tama.art/font/BITSY.TTF') format('truetype');
  
}




@font-face {
  font-family: 'PIXOLDE';
  src: url('https://beak-tama.art/font/PIXOLDE.TTF') format('truetype');
  
}


@font-face {
  font-family: '8BITLIM';
  src: url('https://beak-tama.art/font/8BITLIM.TTF') format('truetype');
  
}

@font-face {
  font-family: 'pohpix';
  src: url('https://beak-tama.art/font/POH_PIXELS.TTF') format('truetype');
  
}

@font-face {
  font-family: 'UNDEADPIXEL11';
  src: url('https://beak-tama.art/font/UNDEADPIXEL11.TTF') format('truetype');
  
}





@font-face {
  font-family: 'ENLIVEN';
  src: url('https://beak-tama.art/font/font/ENLIVEN.TTF') format('truetype');
  
}

@font-face {
  font-family: 'BLACKBERRY';
  src: url('https://beak-tama.art/font/font/BLACKBERRY-DINGBATS.OTF') format('opentype');
  
}

@font-face {
  font-family: 'BNJINX';
  src: url('https://beak-tama.art/font/BNJINX.TTF') format('truetype');
  
}

@font-face {
  font-family: 'BORE BLASTERS';
  src: url('https://beak-tama.art/font/BORE BLASTERS 16.TTF') format('truetype');

  }


@font-face {
  font-family: 'BORE BLASTERS';
  src: url('https://beak-tama.art/font/BORE BLASTERS 21.TTF') format('truetype');

}
@font-face {
  font-family: 'CHOMSKY';
  src: url('https://beak-tama.art/font/CHOMSKY.TTF') format('truetype');

}
@font-face {
  font-family: 'dilithium pixels';
  src: url('https://beak-tama.art/font/DILITHIUM_PIXELS_NBP.TTF') format('truetype');

}
@font-face {
  font-family: 'DUDU';
  src: url('https://beak-tama.art/font/DUDUCALLIGRAPHY.TTF') format('truetype');

}



body {
  z-index: 1;

  margin: 0 auto;
  overflow: visible;
  background-image: url("https://beak-tama.art/theme/glow/Artboarg1.png");
  text-align: center;
  font-family:var(--bodyfont);
  font-size:var(--bodysize);
  color: var(--bodycolor);
  line-height: 14px;
  }




main {
        background-color: var(--none);
        HEIGHT:400px;
        border-radius:20px;
        margin-bottom:1px;
        overflow: scroll;
        left:600px!important;
  overflow-x: hidden; /* Hide horizontal scrollbar */

}

/* Hide scrollbar for Chrome, Safari and Opera */
main::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
main {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

h1 {
  font-family:var(--bodyfont);
 /* color:var(--black);*/
     background: -webkit-linear-gradient(0deg, #e93251 1%, #ff5490 53%);
    background: linear-gradient(0deg, #e93251 1%, #ff5490 53%);
  font-size: 60px;line-height: 1em;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

h1:hover {
  font-family:var(--bodyfont);
 /* color:var(--black);*/
  
    background: -webkit-linear-gradient(0deg, #ff5490 1%, #e93251 53%);
    background: linear-gradient(0deg, #ff5490 1%, #e93251 53%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-size: 60px;line-height: 1em;
    transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}

h2 {
  font-family:var(--bodyfont);
  color:#6bb300;
  text-shadow: -2px 2px 0 green, -4px 4px 0 #99ff00, -6px 6px 0 #00b300, -8px 8px 0 #00ffff;
  font-size: 60px;line-height: 1em;
}

h2:hover {
  font-family:var(--bodyfont);
    color:#6bb300;
    text-shadow: -2px 2px 0 #00ffff, -4px 4px 0 #00b300, -6px 6px 0 #99ff00, -8px 8px 0 green;
    font-size: 60px;line-height: 1em;
    transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}



h3 {
  font-family:var(--headfont);
  font-size: 40px;
  color:transparent;
  text-align: center;
  text-shadow: 0px 2px 11px #6bb300;
  line-height: 1em;
   -webkit-text-stroke: 1px #6bb300; /* width and color */
 }
 
 h4 {
   font-family:var(--headfont);
  font-size: 30px;
  color: green;
  text-align: center;
  text-shadow: 0px 2px 11px #00ffff;
  line-height: 1em;
   -webkit-text-stroke: 0.5px #99ff00; /* width and color */
 }
 
h5 {
  font-family:var(--bodyfont);
    color:#99ff00;
    text-shadow: -2px 2px 0 #558d00, -4px 4px 0 #79b300, -6px 6px 0 #375a01, -8px 8px 0 #1e3101;
    font-size: 20px;line-height: 1em;
}

h5:hover {
  font-family:var(--bodyfont);
    color:#00ffff;
    text-shadow: -2px 2px 0 #00b33a, -4px 4px 0 #99ff00, -6px 6px 0 #00b300, -8px 8px 0 #00ff53;
    font-size: 20px;
    letter-spacing: 1px;line-height: 1em;
    transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}

 p{
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color: var(--bodycolor);
    line-height: 16px;
    display: block;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 20px;
  margin-right: 20px;
   }
 
mark {
  background-color:#6bb300;
  font-size:var(--bodysize);
  color:#000;
  text-align: center;
  text-shadow: 0px 2px 11px #00ffff;
   -webkit-text-stroke: 1px #000; /* width and color */
     animation-name: glow;
  animation-duration: 0.5s;
  animation-direction: alternate;  
animation-iteration-count: infinite;

}@keyframes glow {
  0%   {background-color:#6bb300;}
  25%  {background-color:6bb300; text-shadow: 0px 2px 11px #000;}
  50%  {background-color:00ffff;
  text-shadow: 0px 2px 11px #6bb300;}
  75%  {background-color:green;}
  100% {background-color:#000;text-shadow: 0px 0px 5px green; -webkit-text-stroke: 1px #00ffff; /* width and color */}
}

 
 b {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color:transparent;
  text-align: center;
  text-shadow: 0px 2px 11px #6bb300;
   -webkit-text-stroke: 1px #6bb300; /* width and color */
 
}

 
 q {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color: #6bb300;
  text-shadow: 0px 1px 1px green;
     letter-spacing: 3px;
 line-height: 16px;    word-spacing: 5px;
} 



blockquote {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color: #3d00e6;
  text-shadow: 0px 1px 1px var(--bodyshadowcolor);
    line-height: 16px;
}

 
 i {
  font-family:var(--bodyfont);
  font-size:var(--bodysize);
  color: #E10074;
    letter-spacing: 0.5px;
  text-align: center;
  text-shadow: 0px 2px 6px #E5CCFC;
  text-decoration:none;
 }

 
 u {  
  font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color:transparent;
  text-align: center;
  text-shadow: 0px 2px 11px #6bb300;
   -webkit-text-stroke: 1px #6bb300; /* width and color */
  text-decoration: #000 underline 2px;
    line-height: 16px;  word-spacing: 5px;

}
 
 strike {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color: #6bb300;
  text-shadow: 0px 1px 1px green;
     letter-spacing: 3px;
 line-height: 16px;    
 animation-name: glow2;
  animation-duration: 0.6s;
  animation-direction: alternate;  
animation-iteration-count: infinite; word-spacing: 5px;
} 

@keyframes glow2 {
  0%   {  color:#000;text-shadow: 0px 2px 11px green; }
  25%  { text-shadow: 0px 2px 11px green;}
  50%  {  color:#000; text-shadow: 0px 2px 11px #6bb300;}
  100% {text-shadow: 0px 0px 5px green; -webkit-text-stroke: 1px #6bb300; /* width and color */}
}

 a {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color:transparent;
  text-shadow:0 0 1.5px var(--bodyshadowcolor);
    line-height: 16px;}

 
a:hover {
  font-family:var(--bodyfont);
    color:var(--black);
    letter-spacing: 0.5px;
    line-height: 0.465em;
    transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}


::selection {
    color:transparent;
    text-shadow:0 0 5px green;   -webkit-text-stroke: 1px #000; /* width and color */
  text-decoration: #000 underline 2px;
}
 
::-moz-selection {
     color:transparent;
    text-shadow:0 0 5px green;   -webkit-text-stroke: 1px #000; /* width and color */
  text-decoration: #000 underline 2px;
}


ul{
  list-style-image: url("/img/pixel/star.gif"); 
  list-style-position: outside;
  font-size:var(--listsize);
  font-family:var(--bodyfont);
  text-align:left
  }

ol{
  list-style-type: lower-roman;
  list-style-position: outside;
  font-size:var(--listsize);
  font-family:var(--bodyfont);
  text-align:left
  
}

alt{
  font-size:var(--tooltipsize);
  font-family:var(--bodyfont);
    background-color:#FF8AD9;
  color:transparent;
  text-shadow:0 0 1.5px #ffffff;
}

title{
    font-size:var(--bodysize);
  font-family:var(--bodyfont);
    background-color:#FF8AD9;
  color:transparent;
  text-shadow:0 0 1.5px #ffffff;
}

textarea{
  font-size:var(--bodysize);
  font-family:var(--bodyfont);
  background: #000 url("");
  color:transparent;
  text-shadow:0 0 1.5px green;
  width: 250px; 
  height: 50px;  
  resize: none;
  margin: 0 auto;
	border: 2px solid green;
	padding: 5px;
	padding-bottom: 5px;	
  border-radius: 10px;
  box-shadow: 0px 0px 15px 2px green;

}



.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  text-align: center;
  color:white;
  font-size:var(--tooltipsize);
  background-color:#FF8AD9;
  	font-family:var(--bodyfont); 
  border-radius: 5px;
  padding: 3px 3px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -90px;  
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #FF8AD9 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
    transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #E5169F; /* E5169F */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: black; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #E5169F; 
}


/* img hover */

.container {
  margin:0 auto;
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 200px;
  height: auto;
}

.overlay {
  background: #FF8AD9 url("");
  border: 2px solid #fff;
  box-shadow: 0px 0px 15px 2px #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 200px;
  height: auto;
  opacity: 0;
    transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  font-size:var(--tooltipsize);
  font-family:var(--bodyfont); 
  color:white;
  text-shadow:0 0 1.5px #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}



/* img marquee */
/* marquee-like scroller adapted from Ben Nadel "Creating A Marquee Effect With CSS Animations" 
https://www.bennadel.com/blog/4536-creating-a-marquee-effect-with-css-animations.htm
https://hello-room.neocities.org/ */
@keyframes blinkie-scroller{
  from {transform: translateX( 0% );}
  to {transform: translateX( -100% ); }
}

#blinkies {
  margin: 10px auto 0px;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 600px;
}

#blinkies-items {
  animation-duration: 60s ;
	animation-iteration-count: infinite;
	animation-name: blinkie-scroller;
	animation-timing-function: linear;
}

#blinkies-items img {
  margin: 0 0px;
}

#blinkies:hover #blinkies-items {
  animation-play-state: paused ;
}