.dev{
    color:#dfdfdf;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 10px;
    font-weight: lighter;
    font-style: normal;
    align-content: center;
    text-align: center;
    position: relative;
    top:580px;
    left: 5px;
    background-color: black;
    padding: 10px;
   
}

p.foot{
    color:#dfdfdf;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 10px;
    font-style: normal;
    align-content: center;
    text-align: center;
    position: relative;
    top: 600px;
    left: 10px;
    background-color: black;
    margin-left:  auto;
    margin-right: auto ;
    margin-bottom: 3px;
}

h2.joke{
    color:#dfdfdf;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: firebrick;
    text-align: center;
    font-size: 20px;
    position: relative;
    top: 300px;
    margin: 0 auto;
}

    
.name{
    color: #dfdfdf;
    background-color: black;
    padding: 10px;
    margin: 10px;
    position: relative;
    top: 300px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    font-size: 100px;
    margin: 0 auto;
 
}
img.bg {
    min-height: 100%;
    min-width: 1024px;
      
    
    width: 100%;
    height: auto;
      
    
    position: fixed;
    top: 0;
    left: 0;
  }
  
  @media screen and (max-width: 1024px) { 
    img.bg {
      left: 50%;
      margin-left: -512px;   
    }

  }

button{
position: relative;
background-color: black;
padding: 15px 32px;
color:#dfdfdf;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bolder;
transition-duration: 0.2s;

}
div.b{
   
    width: fit-content;
    margin: 70% auto;
    


}
button:hover{
    background-color:#dfdfdf;
    color:black;
    

}

@media only screen and (max-width: 650px) {
    div.b{
        width: fit-content;
        margin:600px auto;

        
    }
    
    .name{
        font-size: 60px;
    }

}