: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: url("https://beak-tama.art/img/bg/mtgbg.png"), rgba(0, 0, 0, 0.85);
  background-blend-mode: darken;
  text-align: center;
  font-family:var(--bodyfont);
  font-size:var(--bodysize);
  color: var(--bodycolor);
  }
  

.container {
  max-width: 480px;
  padding: 2px;
  position: relative;
  z-index:1;
  background-color: #4158D0;
  background-image:  linear-gradient(in hsl longer hue 45deg, red 0 100%);
  margin-right:25px;
  filter: brightness(100%);
    border-radius: 20px;

}

.container:before {
  z-index:-1;
  position: absolute;
  content:"";
	width: 460px;
  height:100%;
  left:10px;
  top:0;
  background-image:  linear-gradient(in hsl longer hue 45deg, red 0 100%);
  filter: blur(20px);
    border-radius: 20px;

  
}

.gradient {
   background: rgba(0,0,0,1);
	padding: 20px;
	padding-bottom: 30px;	  color: white; 
  font-size: 35px;
  font-family: arial;
  text-align: center;
    border-radius: 20px;

}

  
  .box-noscroll {
  margin: 0 auto;
	border: 2px solid #000;
	width: 460px;
	min-height:50px;
	padding: 20px;
	padding-bottom: 30px;	
  background: rgba(0,0,0,0.7);
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  box-shadow: 0px 0px 15px 2px #a93300;
}

  
  
  #header {
       width: 460px;
        /* header color here! */
         /*height: 174; */
        /* this is only for a background image! */
        /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
        background-size: 100%;
  margin-top: 30px;
  margin-bottom: 40px;
}  


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);
     font-size: 20px;
  text-decoration:none;
   background: conic-gradient(
    from var(--angle),
    #ff0080,
    #ff8c00,
    #ffef00,
    #00ff00,
    #00cfff,
    #6f00ff,
    #ff0080
  );
  animation: rotate-gradient 3s linear infinite/* glow-pulse 2s ease-in-out infinite,rainbow-slide 3s linear infinite */;
  filter: blur(0px);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

}

h5:hover {
  font-family:var(--bodyfont);
    font-size: 20px;
  text-decoration:none;
   background: conic-gradient(
    from var(--angle),
    #ff0080,
    #ff8c00,
    #ffef00,
    #00ff00,
    #00cfff,
    #6f00ff,
    #ff0080
  );
  animation: rotate-gradient 3s linear infinite/* glow-pulse 2s ease-in-out infinite,rainbow-slide 3s linear infinite */;
  filter: blur(10px);
  opacity: 0.6;
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    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;
}

.example {
  display: inline-block;
  margin: 6px;
}

 
 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:#7091fd;
  text-shadow: 0px 2px 6px #546fcb;
    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;
}

 @property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-gradient {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.5;
    filter: blur(10px);
  }
  50% {
    opacity: 0.85;
    filter: blur(14px);
  }
}



a {  
   font-family:var(--bodyfont);
  font-size:var(--bodysize);
    letter-spacing: 0.5px;
  text-decoration:none;
    background: conic-gradient(
    from var(--angle),
    #ff0080,
    #ff8c00,
    #ffef00,
    #00ff00,
    #00cfff,
    #6f00ff,
    #ff0080
  );

    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

   animation: rotate-gradient 3s linear infinite, rainbow-slide 3s linear infinite;
  
}


a:hover  {  
   font-family:var(--bodyfont);
  font-size:var(--bodysize);
    letter-spacing: 0.5px;
  text-shadow: 0px 2px 3px #fff;
  text-decoration:none;
   background: conic-gradient(
    from var(--angle),
    #ff0080,
    #ff8c00,
    #ffef00,
    #00ff00,
    #00cfff,
    #6f00ff,
    #ff0080
  );
  animation: rotate-gradient 3s linear infinite/* glow-pulse 2s ease-in-out infinite,rainbow-slide 3s linear infinite */;
  filter: blur(12px);
  opacity: 0.6;
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

}

@keyframes rainbow-slide {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}


::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 */



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



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