html,body{
    /* background-color: #19cbed; */
    background-color: #19cbed;
    color:white;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    
    
}
.my-container{
    position: relative;
    text-align: center;
    padding-right:0;
    padding-left:0;
    
    
}
/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.bottom{
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.very-bottom{
    position: absolute;
    top: 118%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container-fluid{
    padding-right:0;
    padding-left:0;
    margin-right:auto;
    margin-left:auto
}

.section-buffer{
    margin-top:80px;
}

.sub-section-buffer{
    margin-top:20px;
}

.below-buffer{
    margin-bottom:80px;
}


#book-title{

  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: 800;
  font-style: normal;
}

#book-summary{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 800;
    font-style: normal;
}




#book-authors{
    background-color: #9D0FCE;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 800;
    font-style: normal;

}

#footer{
    font-size:0.6rem;
}

.alt-layout{
    width:100%;
    max-width:none;
    padding:0;
    margin:0;
}
#top-wave{
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mid-wave{
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#bottom-wave{
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
}


@media screen and (min-width: 1200px) {

    #top-wave{
        position: absolute;
        top: 92%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #mid-wave{
        position: absolute;
        top: 120%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

@media screen and (max-width: 1024px) {

    #top-wave{
        position: absolute;
        top: 92%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #mid-wave{
        position: absolute;
        top: 118%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

@media screen and (max-width: 900px) {
    

    #top-wave{
        position: absolute;
        top: 92%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #mid-wave{
        position: absolute;
        top: 122%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

@media screen and (max-width: 768px) {

    
    #mid-wave{
        position: absolute;
        top: 111.5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 97.5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    

}

@media screen and (max-width: 600px) {

   

    #mid-wave{
        position: absolute;
        top: 110%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 98%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    

}

@media screen and (max-width: 480px) {

    #top-wave{
        position: absolute;
        top: 91.5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #mid-wave{
        position: absolute;
        top: 109%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 98.5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    

}

@media screen and (max-width: 375px) {

    #top-wave{
        position: absolute;
        top: 91.5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #mid-wave{
        position: absolute;
        top: 109%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 98.5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    

}

@media screen and (max-width: 320px) {

    #top-wave{
        position: absolute;
        top: 91.5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #mid-wave{
        position: absolute;
        top: 109%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-wave{
        position: absolute;
        top: 99.4%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    

}