* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

  body{
  margin:0;
  height:100vh;
  display:flex;
  flex-direction:column;     
  justify-content:center;
  align-items:center;
  background:#f0f0f0;
}

.canvas{
  position:relative;
  width:500px;
  height:500px;
  margin-bottom:20px;
}


.circulo{
  position:absolute;
  border-radius:50%;
}


.uno{
  top:260px; left:110px;
  width:190px; height:190px;
  background:#e31111;
  border-radius:50% 0 50% 50%;
  z-index:3;
}


.dos{
  top:170px; 
  left:170px;
  width:250px;
   height:250px;
  background: repeating-linear-gradient(
    45deg,
    #1846d8 0 16px,
    #5fa3ff 16px 32px
  );
  border-radius:50% 0 50% 50%;
  z-index:2;
}


.tres{
  top:70px; 
  left:260px;
  width:280px; 
  height: 280px;
  background:#f9a23b;
  z-index:1;
}


.btn{
  display:inline-block;
  padding:10px 20px;
  background:#333;
  color:white;
  text-decoration:none;
  border-radius:30px;
  font-size:26px;
}
.btn:hover{
  background:#555;
}