*{
    margin:0;
    padding:0;
}

header{
  text-align: center;
  color:#8a0505;
  background-color: #a6522b; 
  padding:15px; 
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: 'Corier New', Courier, monospace;
  
}
header h1{
  margin: 0;
}
footer{
  background-color: #800000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
}
body {
background-color: #8b4513;
/*define a cor de fundo de um elemento*/
    background-image:url(fundo.png);
}
p{
   text-align: center;
   font-family:'Times New Roman', Times, serif;
}
fundo{
  background-image: url("fundo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.imga{
    width:20%;
    }


    .center{
      text-align: center;
  }
  
  .medieval-button {
      position: relative;
      background-color: #000000;
      padding: 15px 30px;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      border-radius: 15px;
      border-style: solid;
      overflow: hidden;
      z-index: 1;
  }
  
  .medieval-button::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -10%;
      height: 180%;
      width: 0;
      border-radius: 100%;
      background-color: #420505;
  
      transition: all 750ms 0.3s;
  }
  
  .medieval-button:hover::before {
      width: 120%;
      height: 180%;
      transition: all 750ms 0.7s;
  }
  
  .button-text {
      position: relative;
      z-index: 2;
      color: white;
  }
  
  .sword {
      position: absolute;
      top: 50%;
      right: -100%;
      transform: translateY(-50%);
      transition: right 0.5s ease;
      z-index: -1;
      height: 40px;
  }
  
  .medieval-button:hover .sword {
      right: calc(25%);
  }