<style>
@import url('https://fonts.googleapis.com/css?family=Righteous|Tomorrow&display=swap');
</style>
<div id="root"></div>

*{
  text-decoration:none;
  
}
#hll{
  font-size: 1.55rem ;
  font-family: 'Righteous',cursive ;
  padding: 2.8rem ;
  background-color: red ;
  border: 0.07rem solid ;
  border-radius: 50rem ;
  height: 6rem ;
  width: 6rem ;
  margin-top: 1rem;
  margin-left: auto ;
  margin-right: auto ;
  line-height: 3rem ;
  animation: hlla 0.5s infinite alternate;
}

#root{
  padding: 1rem 0 4rem ;
  background: rgba(35,45,60);
  height: 20rem ;
  width: 15rem ;
  text-align: center ;
  box-shadow: 0.5rem 1rem 1rem 0.3rem rgba( 84, 108, 120);
  border-radius: 0.6rem;
  margin: auto;
}
a{
  color:#1c1926;
}

h2{
  color: rgba(35,45,60);
  margin-top: 6rem;
  background-color: #586169 ;
  border-top: 0.05rem solid black; 
  border-bottom: 0.05rem solid black ;
  font-family: 'Tomorrow',sans-serif ;
  font-size: 1.5rem ;
  border-radius: 0.2rem;
}
#yapan{
  padding-top: 6rem;
  font-size: 1.3rem;
  font-family:'Tomorrow',sans-serif;
  color: purple;
}
#dou{
  color: orange;
  transition: transform, 2s;
}
#dou:hover{
  color:white;
 font-size: 160%;
}
@keyframes hlla{
  0%{
   // background-color: #008f8a;
    box-shadow: 0.01rem 0.01rem 0.01rem 0.01rem rgba(0,0,0,0);
  }
  100%{
   // background-color: red;
    box-shadow: 0 0 0.8rem 0.3rem rgba(222,180,191,0.55);
  }
}

function tick() {
  const element = (
    <div>
      <h1 id="hll"><a target="blank" href="https://www.youtube.com/watch?v=IRZWiqBHYaY">I Can't Breathe!</a></h1>
      <h2>Time : {new Date().toLocaleTimeString()}</h2>
      <p id="yapan">Made by :<br></br>
      <a id="dou" target="blank" href="http://eastkahn1.pythonanywhere.com/"> @Dou </a>
      </p>
    </div>
  );
  ReactDOM.render(element, document.getElementById("root"));
}

setInterval(tick, 1000);