blue_music.css

body{
    min-height:100%;
  background: url(https://images.unsplash.com/photo-1545454675-3531b543be5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80) rgba(0, 0,255, 0.5) no-repeat center center fixed ;

  background-blend-mode: multiply;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:relative;

  }

  h1{
    margin:auto;
    margin-top:2%;
    width:40%;
    border-bottom: solid 2px rgb(0, 0, 255);
    font-size:70px;
    text-align: center;
    /* box-shadow: 0px 1px 0px rgb(177,177,255), 0px 10px 0px rgb(98,98,255), 0px 20px 0px #00b3ff; */
    padding:2%;
    font-weight: 1000;
    color:#111;
    font-family: 'Great Vibes', cursive;
    animation: animate 2s ease infinite;
  }

  @keyframes animate{
    0%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(0,0,255), 0 0 14px rgb(0,0,255), 0 0 30px rgb(0,0,255);
    }
    10%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(20,20,255), 0 0 14px rgb(20,20,255), 0 0 30px rgb(20,20,255);
    }
    20%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(78,78,255), 0 0 14px rgb(78,78,255), 0 0 30px rgb(78,78,255);
    }
    30%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(118,118,255), 0 0 14px rgb(118,118,255), 0 0 30px rgb(118,118,255);
    }
    40%{
      color: rgb(232,255,249);
      text-shadow: 0 0 2px rgb(118,118,255), 0 0 14px rgb(118,118,255), 0 0 30px rgb(118,118,255);
    }
    50%{
      color: rgb(232,255,249);
      text-shadow: 0 0 2px rgb(118,118,255), 0 0 14px rgb(118,118,255), 0 0 30px rgb(118,118,255);
    }
    60%{
      color: rgb(232,255,249);
      text-shadow: 0 0 2px rgb(118,118,255), 0 0 14px rgb(118,118,255), 0 0 30px rgb(118,118,255);
    }
    70%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(78,78,255), 0 0 14px rgb(78,78,255), 0 0 30px rgb(78,78,255);
    }
    80%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(20,20,255), 0 0 14px rgb(20,20,255), 0 0 30px rgb(20,20,255);
    }
    90%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(0,0,255), 0 0 14px rgb(0,0,255), 0 0 30px rgb(0,0,255);
    }
    100%{
      color: rgb(196,196,255);
      text-shadow: 0 0 2px rgb(0,0,255), 0 0 14px rgb(0,0,255), 0 0 30px rgb(0,0,255);
    }
  }

  .head_bar .slide{
      position: relative;
      display: inline-block;
  }

  .head_bar h1{
      padding: 0 26% 0 26%;
      font-size: 46px;
      color: white;
      text-shadow: 2px 2px 4px #000000;
      text-transform: uppercase;
  }

  .head_bar p{
      font-size: 18px;
      color: white;
      text-shadow: 2px 2px 6px #000000;
      text-align: center;
      padding-top: 10px;
  }

  .head_bar img{
      width: 4%;
      height: 4%;
      margin: 2% 0 0 2%;
      border-radius: 50%;
      box-shadow: 4px 2px 4px 2px rgba(0, 0, 0, 0.5);
  }

  .container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14%;
  }

  .music_image{
      margin-top: 8%;
      margin-left: 20%;
  }

  /* .col-md-4::before{
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #d35400;
    transition: .5s;
    transform: scale(0.9);
    z-index: -1;
  }

  .col-md-4:hover::before{
    transform: scale(1.3);
    box-shadow: 0 0 15px #d35400;
    filter: blur(3px);
  } */


  .round_img img{
    width: 200px;
    height: 200px;

    /* padding: 2%; */
    margin-top: 6%;
    margin-right: 4%;
    border-radius: 50%;
    filter: grayscale(100%);
    transition: all .2s ease-in-out;
    box-shadow: 4px 4px 4px 4px rgb(0, 0, 255);
}

.round_img img:hover{
    filter: grayscale(2%);
    transition: 0.2 ease;
    transform: scale(1.1);
}


  /* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
  .icon-bar {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  /* Style the icon bar links */
  .icon-bar a {
    display: block;
    text-align: center;
    /* padding: 16px; */
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
  }
  .abt{
    color:rgb(0, 0, 255);
    /* background-color: ; */
    border-radius: 50%;

    font-size:30px;

  }
  .abt:hover{
    font-size:36px;
    transition-delay: .2;
  }
  .abti{
    width:50px;
  }
  .abti:hover{
    width:60px;

    transition-delay: .2;
  }

  .nav-item{
    position: relative;
    float: right;
  }

  .active{
    color: rgba(255,0,0, 0.9);
  }

  .abtim{
    font-size:20px;
  }
  .abtim:hover{
    font-size:30px;

    transition-delay: .2;
  }