@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
/*observações: foram utilizadas medidas rem e vw pela responsividade da tela*/

body {
  background-image: url('imagens/mapa1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: rgba(57, 50, 38);
  font-family: 'Uncial Antiqua', 'Georgia', serif;
  margin-top: 0;
  padding: 0;
  line-height: 1.7;
  overflow-x: hidden;
}
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 6px #ffb347);
  }
  20%, 22%, 24%, 55% {
    opacity: 0.85;
    filter: drop-shadow(0 0 12px #ffb347);
  }
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(circle at 20% 30%, rgba(255, 179, 71, 0.3), transparent 70%),
              radial-gradient(circle at 80% 70%, rgba(255, 179, 71, 0.25), transparent 60%);
  animation: flicker 3s infinite alternate;
  z-index: 0;
}

#container {
  max-width: 960px;
  margin: 1rem auto;
  padding: 1rem 4rem;
  padding-bottom: 20px; 
  background: rgba(57, 50, 38, 0.9);
  border: 10px double #a67c00;
  box-shadow: 0 0 30px 5px #a67c00;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#container::before {
  /*Diga amigo e entre*/
  content: "ᛞᛁᚷᚨ ᚨᛗᛁᚷᛟ ᛖ ᛖᚾᛏᚱᛖ";
  font-family: 'Uncial Antiqua', serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: #ffb347;
  font-weight: bold;
  position: relative;
  top: 0rem;
  left: 0vw;
}
#container::after {
  /*Um Anel para a todos prender e nas trevas os reter, Na Terra de Mordor onde moram as Sombras. Para os Reis Elfos sob o céu, Três Anéis são; Sete para os Lordes Anões, abrigados em seus salões; Nove para o Homem: a morrer condenado; Um para o Lorde Negro em seu trono sentado na Terra de Mordor, onde as Sombras desceram.*/
  content: "ᚢᛗ ᚨᚾᛖᛚ ᛈᚨᚱᚨ ᚨ ᛏᛟᛞᛟᛋ ᛈᚱᛖᚾᛞᛖᚱ ᛖ ᚾᚨᛋ ᛏᚱᛖᚢᚨᛋ ᛟᛋ ᚱᛖᛏᛖᚱ ᚾᚨ ᛏᛖᚱᚱᚨ ᛞᛖ ᛗᛟᚱᛞᛟᚱ ᛟᚾᛞᛖ ᛗᛟᚱᚨᛗ ᚨᛋ ᛋᛟᛗᛒᚱᚨᛋ ᛈᚨᚱᚨ ᛟᛋ ᚱᛖᛁᛋ ᛖᛚᚠᛟᛋ ᛋᛟᛒ ᛟ ᚲᚢ ᛏᚱᛋ ᚨᚾᛁᛋ ᛋᚨᛟ ᛋᛖᛏᛖ ᛈᚨᚱᚨ ᛟᛋ ᛚᛟᚱᛞᛖᛋ ᚨᚾᛟᛖᛋ ᚨᛒᚱᛁᚷᚨᛞᛟᛋ ᛖᛗ ᛋᛖᚢᛋ ᛋᚨᛚᛟᛖᛋ ᚾᛟᚢᛖ ᛈᚨᚱᚨ ᛟ ᚺᛟᛗᛖᛗ ᚨ ᛗᛟᚱᚱᛖᚱ ᚲᛟᚾᛞᛖᚾᚨᛞᛟ ᚢᛗ ᛈᚨᚱᚨ ᛟ ᛚᛟᚱᛞᛖ ᚾᛖᚷᚱᛟ ᛖᛗ ᛋᛖᚢ ᛏᚱᛟᚾᛟ ᛋᛖᚾᛏᚨᛞᛟ ᚾᚨ ᛏᛖᚱᚱᚨ ᛞᛖ ᛗᛟᚱᛞᛟᚱ ᛟᚾᛞᛖ ᚨᛋ ᛋᛟᛗᛒᚱᚨᛋ ᛞᛖᛋᚲᛖᚱᚨᛗ.";
  font-family: 'Uncial Antiqua', serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: #ffb347;
  font-weight: bold;
  position: relative;}
h1, h2, h3 {
  font-family: 'Uncial Antiqua', cursive, 'Georgia', serif;
  color: #f0e6c8;
  text-shadow:
    0 0 5px #a67c00,
    0 0 10px #a67c00,
    0 0 20px #f0e6c8;
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 2;
}

h1 span, h2 span, h3 span {
  border-bottom: 4px solid #f0e6c8;
  padding-bottom: 0.3rem;
  box-shadow: 0 0 8px #a67c00;
}

p {
  font-size: 1.15rem;
  color: #d9cba3;
  margin-bottom: 1.2rem;
  text-shadow: 0 0 3px #3a2f0b;
  position: relative;
  z-index: 2;
}

a {
  color: #f0e6c8;
  text-decoration: none;
  border-bottom: 1px dotted #a67c00;
  transition: color 0.4s ease, border-bottom-color 0.4s ease, text-shadow 0.4s ease;
  position: relative;
  z-index: 2;
}

a:hover, a:focus {
  color: #ffd54f;
  border-bottom-color: #ffd54f;
  text-shadow:
    0 0 5px #ffd54f,
    0 0 10px #ffd54f;
}

.sidebar {
  background: rgba(57, 50, 38, 0.9);
  background-image: url('imagens/sociedade_do_anel.jpg');
  background-size: cover; 
  background-position: center;
  border: 6px solid #a67c00;
  padding: 1.5rem 2rem;
  margin-top: 100px;
  border-radius: 15px;
  font-family: 'Uncial Antiqua', cursive, 'Georgia', serif;
  color: #f8f3e4;
  position: relative;
}

.sidebar h3 {
  margin-top: 0;
  border-bottom: 3px solid #ffd54f;
  padding-bottom: 0.4rem;
  box-shadow: 0 0 10px #a67c00;
}

.sidebar ul {
  list-style-type: none;
  padding-left: 0;
}

.sidebar li {
  margin-bottom: 0.7rem;
}

.sidebar a {
  color: #f0e6c8;
  font-weight: bold;
  border-bottom: none;
}

.sidebar a:hover {
  color: #ffd54f;
  text-shadow: 0 0 5px #ffd54f;
}

.footer {
  background-image: url("imagens/Anel_do_poder.jpg");
  text-align: center;
  font-size: 1rem;
  color: #a67c00;
  margin-top: 4rem;
  border-top: 3px solid #ffd54f;
  padding-top: 1.5rem;
  font-family: 'Uncial Antiqua', cursive, 'Georgia', serif;
  text-shadow: 0 0 5px #a67c00;
  position: relative;
  z-index: 2;
}

#extraDiv1 span, #extraDiv2 span, #extraDiv3 span,
#extraDiv4 span, #extraDiv5 span, #extraDiv6 span {
  display: block;
  width: 60px;
  height: 60px;
  background-size: contain;
  opacity: 0.12;
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 2px #a67c00);
  z-index: 0;
}

#extraDiv1 { top: 15px; left: 15px; }
#extraDiv2 { top: 15px; right: 15px; }
#extraDiv3 { bottom: 15px; left: 15px; }
#extraDiv4 { bottom: 15px; right: 15px; }
#extraDiv5 { top: 50%; left: 0; transform: translateY(-50%); }
#extraDiv6 { top: 50%; right: 0; transform: translateY(-50%); }

p span, .p1 span, .p2 span, .p3 span, .p4 span {
  text-shadow: 1px 1px 2px #3a2f0b;
}

acronym {
  border-bottom: 1px dotted #ffd54f;
  cursor: help;
  color: #f0e6c8;
}

ul {
  padding-left: 1.5rem;
  color: #d9cba3;
}

.intro, .main, .footer {
  background: rgba(57, 50, 38, 0.85);
  border: 5px solid #a67c00;
  border-radius: 15px;
  padding: 1.5rem 2.5rem;
  margin-bottom: 4rem;
  box-shadow: 0 0 20px rgba(166, 124, 0, 0.7);
}
.intro{
  background-image: url('imagens/olho_de_sauron.jpg');
  background-size: cover;
  background-position: center;
}
.intro::after{
  /*O mundo não está em seus livros e mapas. Ele está lá fora*/
  content: "ᛟ ᛗᚢᚾᛞᛟ ᚾᚨᛟ ᛖᛋᛏ ᛖᛗ ᛋᛖᚢᛋ ᛚᛁᚢᚱᛟᛋ ᛖ ᛗᚨᛈᚨᛋ ᛖᛚᛖ ᛖᛋᛏ ᛚ ᚠᛟᚱᚨ";
  font-family: 'Uncial Antiqua', serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: #ffb347;
  font-weight: bold;
  position: relative;
  top: 6rem;
  left: -2vw;
}
.main {
  background-image: url('imagens/olho_de_sauron.jpg');
  background-size: cover;
  background-position: center;
}
.main::after {
  /*O mundo não está em seus livros e mapas. Ele está lá fora*/
  content: "ᛟ ᛗᚢᚾᛞᛟ ᚾᚨᛟ ᛖᛋᛏ ᛖᛗ ᛋᛖᚢᛋ ᛚᛁᚢᚱᛟᛋ ᛖ ᛗᚨᛈᚨᛋ ᛖᛚᛖ ᛖᛋᛏ ᛚ ᚠᛟᚱᚨ";
  font-family: 'Uncial Antiqua', serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: #ffb347;
  font-weight: bold;
  position: relative;
  top: 7rem;
  left: -2vw;
}
.footer {
  background-image: url('imagens/Anel_do_poder.jpg');
  background-size: cover;
  background-position: center;
}
button, input[type="submit"] {
  background-color: #a67c00;
  color: #2c2a21;
  border: none;
  padding: 0.6rem 1.2rem;
  font-family: 'Uncial Antiqua', cursive, 'Georgia', serif;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 0 8px #ffd54f;
  transition: background-color 0.3s ease;
}

button:hover, input[type="submit"]:hover {
  background-color: #ffd54f;
  color: #2c2a21;
}

@keyframes frodo-walk {
  0% {
    left: -100px;
    top: 80vh;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    left: 15vw;
    top: 60vh;
    opacity: 1;
  }
  30% {
    left: 30vw;
    top: 70vh;
    opacity: 1;
  }
  40% {
    left: 45vw;
    top: 50vh;
    opacity: 1;
  }
  50% {
    left: 60vw;
    top: 60vh;
    opacity: 1;
  }
  60% {
    left: 75vw;
    top: 40vh;
    opacity: 1;
  }
  70% {
    left: 60vw;
    top: 30vh;
    opacity: 1;
  }
  80% {
    left: 40vw;
    top: 20vh;
    opacity: 1;
  }
  90% {
    left: 20vw;
    top: 30vh;
    opacity: 1;
  }
  100% {
    left: 110vw;
    top: 40vh;
    opacity: 0;
  }
}

@keyframes sauron-run {
  0% {
    left: -140px;
    top: 90vh;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  18% {
    left: 5vw;
    top: 70vh;
    opacity: 1;
  }
  28% {
    left: 20vw;
    top: 80vh;
    opacity: 1;
  }
  38% {
    left: 35vw;
    top: 60vh;
    opacity: 1;
  }
  48% {
    left: 50vw;
    top: 70vh;
    opacity: 1;
  }
  58% {
    left: 65vw;
    top: 50vh;
    opacity: 1;
  }
  68% {
    left: 50vw;
    top: 40vh;
    opacity: 1;
  }
  78% {
    left: 30vw;
    top: 30vh;
    opacity: 1;
  }
  88% {
    left: 10vw;
    top: 40vh;
    opacity: 1;
  }
  100% {
    left: 95vw;
    top: 50vh;
    opacity: 0;
  }
}

body::before {
  content: "";
  position: fixed;
  width: 100px;
  height: 160px;
  background-image: url('imagens/sauron.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px red) brightness(0.7) saturate(2);
  animation: sauron-run 45s linear infinite;
  pointer-events: none;
  z-index: 9998;
}

body::after {
  content: "";
  position: fixed;
  width: 50px;
  height: 80px;
  background-image: url('imagens/frodo.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px #dcf119) brightness(0.7) saturate(2);
  animation: frodo-walk 40s linear infinite;
  pointer-events: none;
  z-index: 9999;
}