body {margin:0;padding:0;}

#hero {
  position:relative;
  padding: 0px;
}

#hero img {
    height:100%;
    width:100%;
    background-position:absolute;
    z-index:10;
    object-fit:cover;
  }

#hero .content {
    height:100%;
    width:100%;
    z-index:20;
    position:absolute;
    top:0;
    left:0;
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
#hero .content h1 {
    text-align: center; 
    font-size:80px;
    font-family: Hack, sans-serif; 
    color:black;
    letter-spacing:10px; 
    position: relative;
}

#hero .content p {
  font-size:18px;
  color:#0000;
  letter-spacing: 5px; 
  font-family: Hack, sans-serif; 
}
#hero .content .button p{
  font-size: 18px;
  background-color: #a3defe;
  border: 1px solid #a3defe;
  text-align: center;
  margin: auto;
  color:white;
  padding: 8px;
  border-radius: 60px;
  text-decoration: none;
  width: 200px;
  text-align: center;
}
#hero .content .button p:hover{
  background:fixed;
  color: rgb(131, 131, 131);
  border: 1px solid #e26e7e;
}
#hero .content .button{
  text-decoration: none;
}

.button p{
  font-size: 18px;
  background-color: #fec045;
  border: 1px solid #fec045;
  color:white;
  padding: 8px;
  border-radius: 60px;
  text-decoration: none;
  width: 200px;
  text-align: center;
}
.button p:hover{
  background:fixed;
  color: rgb(131, 131, 131);
  border: 1px solid #bd8921;
}
.button{
  text-decoration: none;
  
}