/*======================
          RESET
======================*/

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

/*=========================
    Criação de variáveis
=========================*/

:root {
	--background: #1e0c0a;
	--surface: #adaa9b;
	--primary: #f9dedf;
	--secondary: rgb(244, 245, 185);
	--primary-glow: rgb(98, 33, 29);
	--border: rgb(204, 114, 75);
	--glow: rgba(228, 215, 206, 0.4);
	--text: #2d1204;
	--muted: #5d3629;
}

html {
	scroll-behavior: smooth;
}

body {
	background: linear-gradient(to bottom, #1e0c0a, #2b120d);
	font-family: sans-serif;
}

/*======================
        HEADER
======================*/

header {
	color: var(--primary);
	text-align: center;
	font-size: 1.2em;
	margin: 2rem 0.2rem;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
	animation: showup 1.2s ease forwards;
}

header h1 {
  text-shadow: 0 0 15px rgba(249, 222, 223, .3);
}

/*======================
         MAIN
======================*/

main {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

article {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

article small {
	color: var(--muted);
	font-size: 18px;
	font-weight: 500;
}

/*======================
     PROGRESS BAR
======================*/

.progress-bar {
	width: 10%;
	height: 20px;
	background: rgba(255,255,255,0.15);
	border-radius: 30px;
	overflow: hidden;
	margin-bottom: 10px;
	border: 1px solid var(--border);
	box-shadow: 0 0 20px var(--glow);
	animation: aumentar 2.4s ease forwards;
}

#progress {
	height: 100%;
	width: 0%;
	background: linear-gradient(
		90deg,
		rgb(204, 114, 75),
		rgb(244, 245, 185)
	);
	border-radius: inherit;
	transition: width .4s ease;
}

/*======================
        TEXTO
======================*/

#points {
	color: rgb(89, 225, 27);
	font-size: 1em;
	font-weight: 600;
}

#pergunta {
	color: var(--secondary);
	margin: 1rem 0.2rem;
	line-height: 1.5;
	animation: aparecer 1.2s ease forwards;
}

/*======================
      OPÇÕES
======================*/

#opcoes {
	background-color: var(--surface);
	border: 2px solid var(--border);
	border-radius: 18px;
	opacity: 0;
	box-shadow:
		0 0 20px var(--glow),
		0 10px 30px rgba(0,0,0,.25);
	padding: 30px 24px;
	margin: 2rem 1rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	animation: glowUp 2s ease-out infinite,
	showDown 1.4s ease forwards;
}

#opcoes button {
	background-color: var(--secondary);
	color: var(--text);
	border: 1px solid var(--border);
	padding: 18px;
	opacity: 0;
	border-radius: 12px;
	font-size: 1em;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(98, 33, 29, .3);
	cursor: pointer;
	transition: all .2s ease;
	animation: aparecer 1.2s ease forwards;
}

#opcoes button:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(98, 33, 29, .4);
}

#opcoes button:active {
	transform: scale(0.97);
}

footer {
	margin-top: 50px;
	padding: 20px;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #cbd5f5;
	font-size: 14px;
}

.footer-links {
	margin: 10px 0;
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	opacity: 0.8;
	animation: showDown 1.4s ease forwards;
}

.autor {
	opacity: 0.6;
	font-size: 12px;
}

/*======================
      RESULTADOS
======================*/

.erro {
	color: rgb(248, 50, 20);
	font-weight: 600;
}

.certo {
	color: rgb(89, 225, 27);
	font-weight: 600;
}

/*======================
  Animações & Keyframes
=======================*/

@keyframes aparecer{
  from{
    transform:scale(0.8);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes aumentar {
  from {
    width: 10%;
  }
  to {
    width: 100%;
  }
}

@keyframes showup {
  from {
   transform: translateY(-50px);
   opacity: 0;
  }
  to {
   transform: translateY(0px);
   opacity: 1;
  }
}

@keyframes showDown {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes glowUp {
  0% {
    box-shadow: 0 0 20px var(--primary-glow),
    0 10px 30px rgba(0,0,0,.25);
  }
  
  50% {
    box-shadow: 0 0 35px var(--primary-glow),
    0 15px 40px rgba(0,0,0,.25);
  }
  
  100% {
    box-shadow: 0 0 20px var(--primary-glow),
    0 10px 30px rgba(0,0,0,.25);
  }
}