body {
    background: radial-gradient(#222, #000);
}
.logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo {
   height: 100px;
   display: block;
}
.heartbeat-box {
    display: flex;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
    margin-top: 1%;
    height: 65vh;
    /*background: #000000;*/
}
.box {
    display: flex;
    align-items: center;
    width: 340px;
    height: 400px;
    animation: fadeIn 7s;
}
.text-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: -100px;
}
.textinbox{
    color: #455661;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
@keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1; }
}

.heartspace {
    background: linear-gradient(#f3000c,#5E000C);
    margin: 3px;
    border-radius: 10px;

    box-shadow: 0 0 10px 10px ##5E000C;
}
.heartspace:nth-child(1) {
    height: 30%;
    width: 5%;
    margin-top: 1%;
    margin-bottom: 10%;
    animation: resize1 2s ease-in-out infinite;
}
.heartspace:nth-child(2) {
    height: 40%;
    width: 5%;
    margin-bottom: 10%;
    animation: resize2 2s ease-in-out infinite;
}
.heartspace:nth-child(3) {
    height: 50%;
    width: 5%;
    margin-bottom: 10%;
    animation: resize3 2s ease-in-out infinite;
}
.heartspace:nth-child(4) {
    height: 60%;
    width: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    animation: resize4 2s ease-in-out infinite;
}
.heartspace:nth-child(5) {
    height: 65%;
    width: 5%;
    margin-top: 7%;
    margin-bottom: 10%;
    animation: resize5 2s ease-in-out infinite;
}
.heartspace:nth-child(6) {
    height:70%;
    width: 5%;
    margin-top: 15%;
    margin-bottom: 10%;
    animation: resize6 2s ease-in-out infinite;
}
.heartspace:nth-child(7) {
    height: 70%;
    width: 5%;
    margin-top: 25%;
    margin-bottom: 10%;
    animation: resize7 2s ease-in-out infinite;
}
.heartspace:nth-child(8) {
    height: 70%;
    width: 5%;
    margin-top: 35%;
    margin-bottom: 10%;
    animation: resize8 2s ease-in-out infinite;
}
.heartspace:nth-child(9) {
    height: 70%;
    width: 5%;
    margin-top: 44%;
    margin-bottom: 10%;
    animation: resize9 2s ease-in-out infinite;
}
.heartspace:nth-child(10) {
    height: 70%;
    width: 5%;
    margin-top: 35%;
    margin-bottom: 10%;
    animation: resize10 2s ease-in-out infinite;
}
.heartspace:nth-child(11) {
    height: 70%;
    width: 5%;
    margin-top: 25%;
    margin-bottom: 10%;
    animation: resize11 2s ease-in-out infinite;
}
.heartspace:nth-child(12) {
    height: 70%;
    width: 5%;
    margin-top: 15%;
    margin-bottom: 10%;
    animation: resize12 2s ease-in-out infinite;
}
.heartspace:nth-child(13) {
    height: 70%;
    width: 5%;
    margin-top: 7%;
    margin-bottom: 10%;
    animation: resize13 2s ease-in-out infinite;
}
.heartspace:nth-child(14) {
    height: 60%;
    width: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    animation: resize14 2s ease-in-out infinite;
}
.heartspace:nth-child(15) {
    height: 50%;
    width: 5%;
    margin-top: 0%;
    margin-bottom: 10%;
    animation: resize15 2s ease-in-out infinite;
}
.heartspace:nth-child(16) {
    height: 40%;
    width: 5%;
    margin-top: 0%;
    margin-bottom: 10%;
    animation: resize16 2s ease-in-out infinite;
}
.heartspace:nth-child(17) {
    height: 30%;
    width: 5%;
    margin-top: 0%;
    margin-bottom: 10%;
    animation: resize17 2s ease-in-out infinite;
}
@keyframes resize1 {
    0% {
        height: 12%;
        /*width: 5%;*/
    }
    50% {
        height: 18%;
        /*width: 7%;*/
    }
    100%{
        height: 12%;
        /*width: 5%;*/
    }
}
@keyframes resize2 {
    0% {
        height: 20%;
        /*width: 5%;*/
    }
    50% {
        height: 30%;
        /*width: 5%;*/
    }
    100%{
        height: 20%;
        /*width: 5%;*/
    }
}
@keyframes resize3 {
    0% {
        height: 30%;
        /*width: 5%;*/
    }
    50% {
        height: 40%;
        /*width: 5%;*/
    }
    100%{
        height: 30%;
        /*width: 5%;*/
    }
}
@keyframes resize4 {
    0% {
        height: 40%;
        /*width: 5%;*/
    }
    50% {
        height: 50%;
        /*width: 5%;*/
    }
    100%{
        height: 40%;
        /*width: 5%;*/
    }
}
@keyframes resize5 {
    0% {
        height: 45%;
        width: 5%;
    }
    50% {
        height: 55%;
        width: 7%;
    }
    100%{
        height: 45%;
        width: 5%;
    }
}
@keyframes resize6 {
    0% {
        height: 50%;
        width: 5%;
    }
    50% {
        height: 60%;
        width: 7%;
    }
    100%{
        height: 50%;
        width: 5%;
    }
}
@keyframes resize7 {
    0% {
        height: 50%;
        width: 5%;
    }
    50% {
        height: 60%;
        width: 7%;
    }
    100%{
        height: 50%;
        width: 5%;
    }
}
@keyframes resize8 {
    0% {
        height: 50%;
        width: 5%;
    }
    50% {
        height: 60%;
        width: 7%;
    }
    100%{
        height: 50%;
        width: 5%;
    }
}
@keyframes resize9 {
    0% {
        height: 50%;
        width: 5%;
    }
    50% {
        height: 60%;
        width: 7%;
    }
    100%{
        height: 50%;
        width: 5%;
    }
}
@keyframes resize10 {
    0% {
        height: 50%;
        width: 5%;
    }
    50% {
        height: 60%;
        width: 7%;
    }
    100%{
        height: 50%;
        width: 5%;
    }
}
@keyframes resize11 {
    0% {
        height: 50%;
        width: 5%;
    }
    50% {
        height: 60%;
        width: 7%;
    }
    100%{
        height: 50%;
        width: 5%;
    }
}
@keyframes resize12 {
    0% {
        height: 50%;
        width: 5%;
    }
    50% {
        height: 60%;
        width: 7%;
    }
    100%{
        height: 50%;
        width: 5%;
    }
}
@keyframes resize13 {
    0% {
        height: 45%;
        width: 5%;
    }
    50% {
        height: 55%;
        width: 7%;
    }
    100%{
        height: 45%;
        width: 5%;
    }
}
@keyframes resize14 {
    0% {
        height: 40%;
        width: 5%;
    }
    50% {
        height: 50%;
        width: 5%;
    }
    100%{
        height: 40%;
        width: 5%;
    }
}
@keyframes resize15 {
    0% {
        height: 30%;
        width: 5%;
    }
    50% {
        height: 40%;
        width: 5%;
    }
    100%{
        height: 30%;
        width: 5%;
    }
}
@keyframes resize16 {
    0% {
        height: 20%;
        
    }
    50% {
        height: 30%;
    }
    100%{
        height: 20%;
    }
}
@keyframes resize17 {
    0% {
        height: 12%;
    }
    50% {
        height: 18%;
    }
    100%{
        height: 12%;
    }
}