* {
    margin: 0;
    padding: 0;
    font-family:sans-serif;
  }
  
  /* Background Image */
  .hero {
    width:100%;
    height: 100vh;
    background-image:url('https://cutewallpaper.org/21/jellyfish-iphone-wallpaper/Jellyfish-Wallpaper-Picture-9RB.jpg');
    background-position:center;
    background-size:cover;
    position:relative;
    overflow:hidden
  }
  
  .logo {
    width: 150px;
    cursor:pointer;
  }
  
  /* Navigation Bar */
  .navbar {
    width:85%;
    height:15%;
    margin:10px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  
  /*Buttons*/
  button {
    width:150px;
    color: #fbfcfd;
    text-align:center;
    padding:10px 25px;
    background: transparent;
    border: 1px solid #fff;
    border-radius:20px;
    outline:none;
    cursor:pointer;
    overflow:hidden;
    position:relative;
    z-index:10;
  }
  
  span {
    background:#fbfcfd;
    height:100%;
    width:0%;
    border-radius:20px;
    position:absolute;
    left:0;
    bottom:0;
    z-index:-1;
    transition:0.5s;
  }
  
  button:hover span{
    width:100%;
    z-index:-1;
  }
  
  button:hover{
    border:none;
    color:rgba(99, 13, 201, 1);
    font-weight:bold;
   
  }
  
  /* Content */
  .content {
    color: #fbfcfd;
    position:absolute;
    top:50%;
    left:8%;
    transform: translateY(-50%); /* Vertically centered */
    z-index:2;
  }
  
  h1 {
    font-size:80px;
    margin: 10px 0 30px; 
    line-height:80px;
  }
  
  /*Side-bar*/
  .side-bar {
    width:50px;
    height:100vh;
    background:linear-gradient(rgba(9, 136, 188, 0.1),#000729);
    position:absolute;
    right:0;
    top:0;
  }
  
  .menu{
    display:block;
    width:35px;
    margin:40px auto 0;
    cursor:pointer;
  }
  
  .social-links img, .useful-links img{
    width:35px;
    margin:5px auto;
    cursor:pointer;
  }
  
  .social-links img:hover, .useful-links img:hover, .menu:hover{
    transform:scale(1.5);
  }
  
  
  .social-links{
    width:50px;
    text-align:center;
    position:absolute;
    top:50%;
    transform: translateY(-50%); /* Vertically centered */
  }
  
  .useful-links{
    width:50px;
    text-align:center;
    position:absolute;
    bottom:30px;
  }
  
   /* Bubbles */
   .bubbles img{
     width:50px;
     animation: bubble 7s linear infinite; /* Name, duration, timing-function */ 
    }
    
  .bubbles {
    width:100%;
    display: flex;
    align-items:center;
    justify-content:space-around;
    position:absolute;
    bottom:-70px; /*Prevents the bubbles from lining up at the bottom*/
  }
  
  @keyframes bubble{
    0%{
      transform:translateY(0);
      opacity:0;
    }
     50%{
      opacity:1;
    }
     70%{
      opacity:1;
    }
     100%{
      transform:translateY(-80vh); 
      opacity:0;
    }
  }
  
  .bubbles img:nth-child(1){
    animation-delay:2s;
    width:65px;
  }
  .bubbles img:nth-child(2){
    animation-delay:1s;
  }
  .bubbles img:nth-child(3){
    animation-delay:3s;
    width:65px;
  }
  .bubbles img:nth-child(4){
    animation-delay:4.5s;
    width:85px;
  }
  .bubbles img:nth-child(5){
    animation-delay:3s;
  }
  .bubbles img:nth-child(6){
    animation-delay:6s;
    width:60px;
  }
  .bubbles img:nth-child(7){
    animation-delay:7s;
    width:85px;
  }
  
  /* Phone Screen*/
  @media screen and (max-width: 600px){
    h1 {
      font-size: 55px;
      line-height: 60px;
    }
    
    /*Side-bar*/
    .side-bar {
      width:100%;
      height:50px;
      top:auto;
      bottom:0; /* Side bar moves to the bottom*/
      display:flex;
      align-items:center;
      justify-content: space-between;
      padding:0 10px;
      box-sizing:border-box;
    }
    .social-links{
      width:auto;
      position:unset; /*sets to initial value*/
      transform: none; /* No transform*/
    }
  
    .useful-links{
      width:auto;
      position:unset;
    }
    
    .menu{
    margin:0;
    }
  }