@import url(general.css);
@import url(nav.css);


main{
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-secundario);
}



main > div{
  min-height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
main div img{
  width: 100%;
}



main > section{
  width: 100%;
  height: 200px;
  margin: 2em auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main > section> a{
  margin: 1em auto;
  color: var(--color-primario);
}



.button{
  --b: 3px;
  --s: .45em;
  
  padding: 1em;
  color: var(--color-primario);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color-primario) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;

  border: 0;
}
.button:hover,
.button:focus-visible{
  --_p: 0px;
  outline-color: var(--color-primario);
  outline-offset: .05em;
}
main section:nth-child(2) .button a{
  font-size: 1.5rem;
  color: var(--color-primario);
  text-transform: uppercase;
  text-decoration: none;
}