@font-face{
    font-family: 'sunnysky';
    src: url('fonts/sunnysky-font/SunnyskypersonaluseBoldita-eZRPg.otf'); 
}

@font-face{
    font-family: 'hearbit';
    src: url('fonts/heartbit/Heartbit\ font\ by\ Christopher\ Ngalu/Heartbit')
}

@font-face{
    font-family: 'electric';
    src: url('fonts/electric-kicks-font/ElectricKicksItalic-PKW5g.ttf')
}

@font-face{
    font-family: 'lounge';
    src: url('fonts/lounge-italic-font/LoungeitalicpersonaluseBdit-L3o7W.otf')
}


@font-face{
    font-family: 'disco';
    src: url('fonts/disco/Disko.woff')
}
html{
    margin: 0;
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    font-family: lounge, disco, 'Times New Roman', Times, serif;
    font-size: 40px;
    text-align: center;
    color: rgb(0, 204, 255);
    background-image: url('images/90s-bg-3.png');
    background-size: cover;
/*    cursor: url('images/cursor\(3\).cur'), -moz-zoom-in, auto; */

}

.title {
    margin-bottom: 0;
    text-shadow: 2px 2px 5px;
}

.subtitle {
    margin: 0;
    text-shadow: 2px 2px 5px;
}

.boomboom {
    cursor: pointer
}

.boomboom:hover {
    transform: scale(1.1);
}

.marquee { 
    overflow: hidden;
    position: relative;
    animation: MarqueeLeft linear 18s infinite;
  }
  @keyframes MarqueeLeft 
  {
    0% { right: -100% }
    100% { right: 100% }
  }
  
.image-div {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width:70%;
    }


.image-div img {
    width: 100%;
    height: auto;
}


/* Style the button and place it in the middle of the image-div/image */
.image-div .btn {
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: rgb(0, 204, 255);
    height: 10%;
    width: 10%;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
  }
/*  
  .image-div .btn:hover {
    background-color: rgb(247, 0, 255);
    opacity: 15%;
  }
*/

  .image-div .btn:nth-child(2){
    top: 29%;
    left: 12%;
  }  
  .image-div .btn:nth-child(3){
    top: 32%;
    left: 33%;
  }  
  .image-div .btn:nth-child(4){
    top: 22%;
    left: 51%;
  }  
  .image-div .btn:nth-child(5){
    top: 28%;
    left: 68%;
  }
  .image-div .btn:nth-child(6){
    top: 28%;
    left: 82%;
  }