main.css
*{
margin: 0;
padding: 0;
}
#dinosaur{
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
padding-top: 15%;
text-align: center;
background-color: red;
display: none;
}
h1{
font-size: 4em;
color: rgba(15,15,15,0.7);
}
.quote{
text-align: center;
font-size: 2em;
color: rgba(15,15,15,0.65);
margin: 70px;
}
.container{
width: 100%;
margin: 0 auto;
}
.battery-container{
width: 50%;
min-width: 250px; /* imma genius! */
margin: 20px auto;
}
.battery-body{
width: 90%;
height: 75px;
float: left;
border: 5px #111 solid;
border-radius: 8px;
}
.battery-end{
float: left;
height: 75px;
width: 15px;
}
.battery-end div{
width: 10px;
height: 25px;
border-radius: 0px 30px 30px 0px;
background-color: #111;
margin-top: 30px;
margin-left: 5px;
}
#indicator{
height: 90%;
width: 50%;
margin: 3.3px;
border-radius: 4px;
}
.indicator-info{
text-align: center;
transform: translate(0px, 25px);
-webkit-transform: translate(0px, 25px);
-ms-transform: translate(0px, 25px);
-moz-transform: translate(0px, 25px);
color: #34495e;
font-weight: 800;
letter-spacing: 2px;
}
.charging{
background-color: #4EC259;
}
.notCharging{
background-color: #FFFF91;
}
.discharge{
text-align: center;
color: #9b59b6;
}