:root{
  --mainbgcolor: black; /* Main bg color*/
  
  --mainlinkcolor: #39fae7;
  --mainlinkhovercolor: #ff2b87;
  
  --bodyfont: 'rainyhearts'; /* body font family */  
  --bodycolor: #3363FF; /* #900C3F Heading colors */
  --bodyshadowcolor: #19317f; /* #900C3F Heading colors */
  
  --headfont: 'UNDEADPIXEL11'; /* Main text font family */
  --maincolor: #A01662; /* Main text font color */
 
 
   --subheadfont:'CHOMSKY'; /* subheader font family */  
   --fancyfont:'CHOMSKY'; /* body font family */  
  
  --bodysize: 16px; /* body font size */
  --navsize: 16px; /* nav font size */
  --tooltipsize: 16px; /* tooltips and hover font size */
  --listsize: 16px; /* tooltips and hover font size */
  
  
  --stepcolor1: #C27FFE; /* colors */
  --stepcolor2: #D1A0FD; /* colors */
  --stepcolor3: #DCB9FC; /* colors */
  --stepcolor4: #e5ccfc; /* colors */
  
  --black: #000000; /* colors */
  --white: #ffffff; /* colors */
}

@font-face {
	font-family: 'rainyhearts'; /* 13px font size looks good */
	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: 'UNDEADPIXEL11';
  src: url('https://beak-tama.art/font/UNDEADPIXEL11.TTF') format('truetype');
  
}


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

}

body {
  z-index: 1;
  width:520px;
  margin: 0 auto;
  overflow: visible;
  background: #fff url("https://beak.gay/src/img/bg/rb2.gif");
  text-align: center;
  font-family:var(--bodyfont);
  font-size:var(--bodysize);
  color: var(--bodycolor);
  line-height: 16px;
  }


h1 {
  font-family:var(--bodyfont);
  color:var(--black);
  text-shadow: -2px 2px 0 #C27FFE, -4px 4px 0 #D1A0FD, -6px 6px 0 #DCB9FC, -8px 8px 0 #e5ccfc;
  font-size: 60px;
  line-height: 0.465em;
}

h1:hover {
  font-family:var(--bodyfont);
    color:var(--white);
    text-shadow: -2px 2px 0 #e5ccfc, -4px 4px 0 #DCB9FC, -6px 6px 0 #D1A0FD, -8px 8px 0 #C27FFE;
    font-size: 60px;
    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;
}

h2 {
  font-family:var(--bodyfont);
  color:var(--white);
  text-shadow: -2px 2px 0 #C27FFE, -4px 4px 0 #D1A0FD, -6px 6px 0 #DCB9FC, -8px 8px 0 #e5ccfc;
  font-size: 60px;
  line-height: 0.465em;
}

h2:hover {
  font-family:var(--bodyfont);
    color:var(--black);
    text-shadow: -2px 2px 0 #C27FFE, -4px 4px 0 #D1A0FD, -6px 6px 0 #DCB9FC, -8px 8px 0 #e5ccfc;
    font-size: 60px;
    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;
}



h3 {
  font-family:var(--headfont);
  font-size: 40px;
  color:transparent;
  text-align: center;
  text-shadow: 0px 2px 11px #C27FFE;
   -webkit-text-stroke: 1px var(--white); /* width and color */
 }
 
 h4 {
   font-family:var(--headfont);
  font-size: 30px;
  color: #A01662;
  text-align: center;
  text-shadow: 0px 2px 11px #FF8AD9;
   -webkit-text-stroke: 0.5px #E5CCFC; /* width and color */
 }
 
h5 {
  font-family:var(--bodyfont);
    color:var(--white);
    text-shadow: -2px 2px 0 #C27FFE, -4px 4px 0 #D1A0FD, -6px 6px 0 #DCB9FC, -8px 8px 0 #e5ccfc;
    font-size: 20px;
    line-height: 0.465em;
}

h5:hover {
  font-family:var(--bodyfont);
    color:var(--black);
    text-shadow: -2px 2px 0 #C27FFE, -4px 4px 0 #D1A0FD, -6px 6px 0 #DCB9FC, -8px 8px 0 #e5ccfc;
    font-size: 20px;
    letter-spacing: 1px;
    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;
}
 
 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:#FF8AD9;
  font-size:var(--bodysize);
  color:transparent;
  text-shadow:0 0 1.5px #ffffff;
    line-height: 16px;
}

 
 b {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color: var(--bodycolor);
  text-shadow: 0px 1px 1px var(--bodyshadowcolor);
    line-height: 16px;
}

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

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:transparent;
  text-shadow:0 0 1.5px var(--bodyshadowcolor);
    line-height: 16px;}

 
 u {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color: var(--bodycolor);
  text-decoration: #E10074 underline;
    line-height: 16px;
}
 
 strike {  
   font-family:var(--bodyfont);
   font-size:var(--bodysize);
  color: var(--bodycolor);
  text-decoration: #E10074 line-through;
    line-height: 16px;
}

 a {
  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;
 }

 
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 1.5px var(--black);
}
 
::-moz-selection {
     color:transparent;
    text-shadow:0 0 1.5px #000000;
}


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: #FF8AD9 url("");
  color:transparent;
  text-shadow:0 0 1.5px #ffffff;
  width: 250px; 
  height: 50px;  
  resize: none;
  margin: 0 auto;
	border: 2px solid #fff;
	padding: 5px;
	padding-bottom: 5px;	
  border-radius: 10px;
  box-shadow: 0px 0px 15px 2px #fff;

}



.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; 
  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%);
}



.planet {
  display: block;
  width: 125px;
  height: 125px;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 50%;
  background: #f542d7;
  background: rgb(245, 66, 215);
  background: linear-gradient(
    180deg,
    rgba(245, 66, 215, 1) 0%,
    rgba(245, 66, 215, 1) 15%,
    rgba(144, 52, 201, 1) 15%,
    rgba(144, 52, 201, 1) 19%,
    rgba(245, 66, 215, 1) 19%,
    rgba(245, 66, 215, 1) 22%,
    rgba(144, 52, 201, 1) 22%,
    rgba(144, 52, 201, 1) 28%,
    rgba(245, 66, 215, 1) 28%,
    rgba(245, 66, 215, 1) 31%,
    rgba(245, 66, 215, 1) 33%,
    rgba(245, 66, 215, 1) 36%,
    rgba(144, 52, 201, 1) 36%,
    rgba(144, 52, 201, 1) 48%,
    rgba(245, 66, 215, 1) 48%,
    rgba(245, 66, 215, 1) 55%,
    rgba(144, 52, 201, 1) 55%,
    rgba(144, 52, 201, 1) 66%,
    rgba(245, 66, 215, 1) 66%,
    rgba(245, 66, 215, 1) 70%,
    rgba(144, 52, 201, 1) 70%,
    rgba(144, 52, 201, 1) 73%,
    rgba(245, 66, 215, 1) 73%,
    rgba(144, 52, 201, 1) 82%,
    rgba(144, 52, 201, 1) 82%,
    rgba(144, 52, 201, 1) 86%,
    rgba(245, 66, 215, 1) 86%
  );
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25),
    inset 8px -4px 6px rgba(105, 0, 117, 0.5),
    inset -8px 4px 8px rgba(105, 0, 117, 0.5),
    inset 20px -5px 12px #690075,
    0 0 100px rgba(255, 255, 255, 0.35);
  transform: rotateZ(-15deg);
}

.planet::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 16px solid #6bffd0;
  border-top-width: 0;
  border-radius: 50%;
  box-shadow: 0 -2px 0 #59ffcd;
  animation: rings1 0.8s infinite linear;
}

.planet::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 8px solid #32b9d1;
  border-top-width: 0;
  border-radius: 50%;
  box-shadow: 0 -2px 0 #6bffd0;
  animation: rings2 0.8s infinite linear;
}

@keyframes rings1 {
  0% {
    transform: rotateX(65deg) rotateZ(0deg) scale(1.75);
  }
  100% {
    transform: rotateX(65deg) rotateZ(360deg) scale(1.75);
  }
}

@keyframes rings2 {
  0% {
    transform: rotateX(65deg) rotateZ(0deg) scale(1.7);
  }
  100% {
    transform: rotateX(65deg) rotateZ(360deg) scale(1.7);
  }
}



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

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

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

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