*{
    margin: 0;
        
    }

   
/* ============ nav ====================== */
.navbar{
    margin-top: 30px;
    position: fixed;
    z-index: 9;
}

.drop {
     z-index: 9;
    list-style: none;
    
}

.drop:hover .list { 
    display: block;
    transition: 2s;
    z-index: 9;
}

.list {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0);
    min-width: 160px;
    z-index: 9;
    
}

  .list a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    z-index: 9;
}

.list a img{
    border: 2px solid red;
    border-radius: 50%;
    margin: -5px;
}

.list a img:hover {
    background-color: rgba(255,255,255,0.9);
}

/*==================animation effects============================*/


 .glow{
    animation: blink 3s infinite;
    position:absolute;
    height:50px;
    width:280px;
    margin-top:-590px;
    margin-left: 330px;
    background:radial-gradient(circle, rgb(150,0,0) 5%, transparent 40%), black;
    z-index:-2;
    } 
    
    @keyframes blink {
  
  50% {
    background: radial-gradient(circle, rgb(150,0,0) 15%, transparent 40%),rgb(150,0,0);
    }
}
    

  .ddface{
        
    position:absolute;
    left:-1000;
    background-size: cover;
    background-position: center;
        
}
 .flex {
    display: flex;
    
    } 
#dare{
    display: none;
}
/* ============================================== */
    header{
    height: 900px;
    }

    #city{
        background-image: url("images/city.jpg");
        background-size: cover;
        height: 900px;
        width:100%;
       z-index: -4;
           
       }
       .logo{
       
        margin-top:35%;
        margin-left: 30%;
        z-index: 93;
    }
       
#arrow {
    position: absolute;
    top:80%;
    left:50%;
    z-index: 9;
} 
.container {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.babydiv {
    display:flex;
    flex-direction: row;
    justify-content: center;
    background-color: black;
    color:white;
    padding: 6em;
}

#poster{
    height:300px;
    padding: 20px;
    
}

#text{
    display:flex;
    flex-direction: column;
    color:white;
    width:400px;
    height:200px;
    align-self: center;
    padding: 40 0;
    font-family: 'Abel', sans-serif;
}
p{
width:200px;
}
span{
    color:red;
}
.babydiv2{
display:flex;
justify-content:center;   
}
#logo{
    position:absolute;
    top:20%;
    left:60%;
    width:500px;

}

#videos {
    background-color: darkred;


}
.bd{
 padding:2em;
}

footer{
    display:flex;
    justify-content: center;
    background-color: black;
    padding: 2em;
}

/* this code allows the sound menu to hide*/
#audio{
    display:none;
} 


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

    .navbar{
        margin-top: 20px;
        position: fixed;
        z-index: 9;
        height:50px;
    }
    #nav-head{
        width:60px;
    }
    #nav-child-head{
        width:50px;
    }
    .drop {
         z-index: 9;
        list-style: none;
        
    }
    
    .drop:hover .list { 
        display: block;
        transition: 2s;
        z-index: 9;
    }
    
    .list {
        display: none;
        position: fixed;
        background-color: rgba(0,0,0,0);
        min-width: 160px;
        z-index: 9;
        margin-left:-13%;
        
    }
    
      .list a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: center;
        z-index: 9;
    }
    
    .list a img{
        border: 2px solid red;
        border-radius: 50%;
        margin: -5px;
    }
    
    .list a img:hover {
        background-color: rgba(255,255,255,0.9);
    }

  body{
      display:flex;
      flex-direction: column;
      justify-content: center;
      width:100%;
  }
  #dd{
     display:none; 
  }
 #logo{
     position:absolute;
    left:1%;
    width:350px;
 }
 .babydiv2{
     display:flex;
     flex-direction: column;
     justify-content: center;
 }
 #imgv{
     width:300px;

 }
 #arrow{
     position: absolute;
     top:86%;
     left:37%;
 }
  .text{
     font-size: 12px;
     
 }
 #poster{
     width:100px;
     height:150px;
 } 
 .babydiv{
     display:flex;
     flex-direction: row;
     justify-content: center;
 }

 #city{
    background-image: url("images/city.jpg");
    background-size: cover;
    height: 600px;
    width:100%;
   z-index: -4;
 }
 header{
     height:600px;
 }
#dare{
    display:block;
    position:absolute;
    top:41%;
    left:3%;
}
.glow2{
    position:absolute;
    height:50px;
    width:90px;
    top:55%;
    left:37.5%;
    background:radial-gradient(circle, rgb(150,0,0) 5%, transparent 40%), black;
    animation: blink 3s infinite;
    } 
    
    @keyframes blink {
  
  50% {
    background: radial-gradient(circle, rgb(150,0,0) 15%, transparent 40%),rgb(150,0,0);
    }
}
.glow-mobile{
display: flex;

}
 
}