* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --fundo-principal: #f5f5f5;
  --texto: #222222;
  --texto-inverso: #ffffff;
  --destaque:#0077ff;
  --destaque-inverso:#66bbff;
  --fundo-card: #ffffff;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.5em;
  background-color: var(--fundo-principal);
  color: var(--texto);
}

body.escuro {
    --fundo-principal: #222222;
  --texto: #e0e0e0;
  --texto-inverso: #333333;
  --destaque:#0077ff;
  --destaque-inverso:#66a3ff;
  --fundo-card: #444444;
}

header {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  background-color: var(--destaque);
  color: var(--texto);
  padding: 10px;
  position: sticky;
  top: 0px;
  z-index: 1;
}

nav#menu ul {
  list-style:none;
  display: flex;
  gap: 10px;
}
nav#menu a {
  text-decoration: none;
  color: var(--texto-inverso);
  font-weight: 600;
  padding: 12px 15px;
  border-radius: 5px;
  transition: background-color .4s, color 0.4s;
}

nav#menu a:hover {
  background-color:  var(--destaque-inverso);
  color: var(--destaque);
}

main {
  margin-top: 20px;
}
section {
    margin: auto;
}

article {
  background-color: var(--fundo-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  margin-bottom: 20px;
  width: 90vw;
}

div.certificado {
    width: 80vw;
    margin: auto;
    padding: 30px 10px;
}

div.certificado  > a > i {
  font-size: 30px;
  color: black;
}

div.certificado > img {
    width: 80%;
    display: block;
    margin: auto;
}

footer {
  background-color: var(--destaque);
  color: var(--texto-inverso);
  text-align: center;
  padding: 15px;
  margin-bottom: 0;
  
}

a.bt {
    padding: 10px;
    background-color: var(--destaque);
    color: var(--texto-inverso);
    text-decoration: none;
    border-radius: 8px;
    display: block;
    margin: auto;
    margin-bottom: 30px;
    transition: .3s;

}

a.bt:hover {
    background-color: var(--destaque-inverso);
    outline: 1px solid var(--destaque);
    color: var(--texto);
}