html {
  background-size: cover;
  background-color: rgba(87, 178, 235, .50);
}



.container {
  max-width: 100%;
  max-height: 100%
  display: flex;
  justify-content: center;
  align-items: center;
}


.atom {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}

@media (max-width: 412px) {
  /* For mobile phones: */
  .atom {
    width: 100vw;
    height: auto;
    margin-top: -50vw;
    margin-left: -50vw;

  }
}

.atombarcode  path:hover{
  fill:yellow;
}

.atombarcode path {
  fill: #3498db;
}

.atombarcode svg {
  position: absolute;


  width: 10em;
  bottom: 50%;
  left: 50%;
  height: auto;
  margin-top: -5em; /* Half the height */
  margin-left: -5em; /* Half the width */
  bottom: 0;
  padding-bottom: 10px;
}