/* Hard reset */
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,
sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,section,summary,time,audio,video {
  padding: 0;
  margin: 0;
  border: 0;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

/* 
    Teletext palette 
    000000 0 black
    ff0000 1 red
    00ff00 2 green
    ffff00 3 yellow
    0000ff 4 blue
    ff00ff 5 magenta
    00ffff 6 cyan
    ffffff 7 white
*/


a {
    text-decoration: none;
}

/* unvisited link */
a:link {
    color: #09ff00;
}

/* visited link */
a:visited {
    color: #00ff00;
}

/* mouse over link */
a:hover {
    color: #ff0000;
}
a.yellow:hover, .yellow a:hover {
    color: #ff0000;
}

/* selected link */
a:active {
    color: #0084ff;
}
a.yellow:active, .yellow a:active {
    color: #00ffdd;
}
a.red:active, .red a:active {
    color: #ff0000;
}

/* flashing class, it's like the 'blink' tag is back */
.flashing {
    animation: flashing 0.75s steps(5, start) infinite;
    -webkit-animation: flashing 0.75s steps(5, start) infinite;
}
@keyframes flashing { to { visibility: hidden; } }
@-webkit-keyframes flashing { to { visibility: hidden; } }

/* concealed text is initially hidden, reveal by modifying class */
.conceal { opacity: 0; }

.colour0, .black,   a.black,   .black a    {color: #000000;}
.colour1, .red,     a.red,     .red  a       {color: #ff0000;}
.colour2, .green,   a.green,   .green  a   {color: #00ff00;}
.colour3, .yellow,  a.yellow,  .yellow a  {color: #ffff00;}
.colour4, .blue,    a.blue,    .blue a      {color: #0000ff;}
.colour5, .magenta, a.magenta, .magenta a{color: #ff00ff;}
.colour6, .cyan,    a.cyan,    .cyan  a     {color: #00ffff;}
.colour7, .white,   a.white,   .white  a   {color: #ffffff;}

.colour0bg, .blackbg     {background-color: #000000;}
.colour1bg, .redbg         {background-color: #ff0000;}
.colour2bg, .greenbg     {background-color: #00ff00;}
.colour3bg, .yellowbg   {background-color: #ffff00;}
.colour4bg, .bluebg       {background-color: #0000ff;}
.colour5bg, .magentabg {background-color: #ff00ff;}
.colour6bg, .cyanbg       {background-color: #00ffff;}
.colour7bg, .whitebg     {background-color: #ffffff;  animation: flashing 0.75s steps(5, start) infinite;
    -webkit-animation: flashing 0.75s steps(5, start) infinite;}

@font-face {
    font-family: Rez;
    src: url('fonts/Rez.ttf');
}

body, td.teletext {
    font-family: Rez, monospace, courier, fixed;
    font-size: 20px;
    font-smooth: never;
    -webkit-font-smoothing : none;
    color: #ffffff;
    background: #000000;
    line-height: 40px;
}

body {
    border-width: 20px 20px 20px 20px; /* t r b l */
    padding: 20px;
}

.teletext {
    text-align: center;
    white-space: pre;
    display: block;
    font-size: 20px;
    font-smooth: never;
    -webkit-font-smoothing : none;
}

.marquee {
    width: 1920px;
	line-height: 40px;
	background-color: rgb(100, 3, 3);
	color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee h2 {
    line-height: 50px;
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

.marquee audio {
    top: 50%;
    left: 50%;
    line-height: 100px;
    display: inline-block;
    padding-left: 100%;
    animation: marquee alternate-reverse;
}

button {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    padding: 20px;
}

button::before {
    content: "";
    position: absolute;
    top: -3%;
    left: -2%;
    width: 105%;
    height: 106%;
    background: rgb(1, 1, 1);
    transition: 0.5s ease-in-out;
}

button:hover::before {
    left: -100%;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }}
   body {
    background: linear-gradient(90deg, #6e0000, #830032, #005472, #690000);
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
   }

   
   main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Wrapper */
  .eyes {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 5px;
    background: #ffeb3b;
    box-shadow: 0 0 3px;
    position: relative;
    overflow: hidden;
  }
  
  /* Eye */
  .eye-retina {
    display: inline-block;
    width: 50%;
    height: 50%;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }