.footer-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
}
body {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide the vertical scrollbar */
    overflow-y: scroll; /* Enable vertical scrolling */
    min-height: 100vh;
}
main {
    flex: 1; /* This allows the main content area to grow and take up the available space */
}
.text-bold {
    font-weight: bold;
}
.text-italic {
    font-style: italic;
}
.awesome{
        animation: rainbow-bg 2.5s linear;
        animation-iteration-count: infinite;
}
@keyframes rainbow-bg{
100%,0%{
    background-color: rgb(255,0,0);
}
8%{
    background-color: rgb(255,127,0);
}
16%{
    background-color: rgb(255,255,0);
}
25%{
    background-color: rgb(127,255,0);
}
33%{
    background-color: rgb(0,255,0);
}
41%{
    background-color: rgb(0,255,127);
}
50%{
    background-color: rgb(0,255,255);
}
58%{
    background-color: rgb(0,127,255);
}
66%{
    background-color: rgb(0,0,255);
}
75%{
    background-color: rgb(127,0,255);
}
83%{
    background-color: rgb(255,0,255);
}
91%{
    background-color: rgb(255,0,127);
}
}

.loading-text {
    position: relative;
}
  
.dot {
    background: none;
    margin: 2.5px;
    animation: dots-animation 1.5s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
  
@keyframes dots-animation {
    0%, 20% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    60% {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
}
  
.dot:nth-of-type(2) {
    animation-delay: 0.3s;
}
  
.dot:nth-of-type(3) {
    animation-delay: 0.6s;
}