* {
    box-sizing: border-box;
}

body {
  margin-top:15px;
  background:#000;
  background: 
        linear-gradient(left, rgba(33,53,18,.3) 0%,rgba(38,88,19,.4) 30%,rgba(73,91,9,.3) 74%,rgba(24,43,4,.3) 100%),
        #000;
  
  background: 
        linear-gradient(to left, rgba(33,53,18,.3) 0%,rgba(38,88,19,.4) 30%,rgba(73,91,9,.3) 74%,rgba(24,43,4,.3) 100%),
        #000;
  overflow: hidden;
}

section {
    position:relative;
    width:400px;
    height:330px;
    margin:0 auto;
    overflow:visible;
}

span {
  color:#fff;
}

.chemical-element {
  width:165px;
  height:165px;
  position:relative;
  
  font: bold 95px Arial;
  color:#fafffb;
  
  padding:25px 25px 25px 30px;
  border:3px solid #DDFFE2;
    
  display:inline-block;
  background: linear-gradient(-45deg, rgba(92,190,115,1) 1%,rgba(24,43,4,1) 100%);
    
  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.chemical-element:nth-child(4) {
  margin-left:165px;
  padding-left:23px;
}

.desc {
  position:absolute;
  font: bold 13px Arial;
  color:rgba(244, 247, 245, .95);
}

.big {
  font: bold 20px Arial;
}

.medium {
  font: bold 17px Arial;
}

div[role="top-left"] {
  top:8px;
  left:10px;
}

div[role="top-right"] {
  top:8px;
  right:5px;
  text-align:right;
  width:25px;
}

div[role="bottom-left-1"] {
  bottom:20px;
  left:5px;
  text-align:left;
}

div[role="bottom-left-2"] {
  bottom:5px;
  left:5px;
  text-align:left;
}

.title-1,
.title-2 {
  width:50px;
  display:inline-block;
  height: 130px;
  vertical-align: bottom;
}

.title-2 {
  height: 134px;
}

#smoke {
    position:absolute;
    z-index:-1;
    left:30%;
    top:-15px;
}

audio {
  display:none;
}

#player {
  position:fixed;
  top:20px;
  right:20px;
  transition:all .3s ease-in;
  opacity:.1;
  cursor:pointer;
}

#player:hover {
  opacity:1;
}

#player svg[role="playing"] {
  display:none;
}