:root {    
    --cor-fundo: #14161C;
    --cor-padrao: #000;
    --cor-texto: #fff;
    --cor-destaque: #F9FF00;
	--cor-fundo-codigo: #333537;
	--cor-texto-codigo: #A2A9B0;
	
    --fonte: 'Open Sans', Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--cor-fundo);
    background-image: url("../assets/background.svg");
    background-size: auto;
    color: var(--cor-texto);
    font-family: var(--fonte);
    scroll-behavior: smooth;
}

main {
    align-items: flex-start;
    background-color: var(--cor-padrao);    
    border-radius: 0.4rem;
    border: 1px solid var(--cor-padrao);
    box-shadow: 0 2px 1.5rem rgba(57, 246, 235, 0.42);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;    
    justify-content: flex-start;
    margin: 3rem auto;    
    max-width: 50rem;
    opacity: 0.95;
    padding: 2rem;
}

h1 {
    background-color: var(--cor-destaque);             
    color: var(--cor-padrao);
    display: block;
    margin: 0 auto; 
    padding: 0 1rem;     
    text-align: center;    
    font-weight: 900;	
}

.container {
    border: 0.25rem solid var(--cor-texto);    
    display: flex;  
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;   
}

section {
    display: flex;  
    flex-direction: column;
    gap: 1rem;
}

h2 {
    color: var(--cor-destaque);
}

p {
    line-height: 1.5;
}

code {    
	background-color: var(--cor-fundo-codigo);	
	border-radius: 0.2rem;
	color: var(--cor-texto-codigo);	
	padding: 1px 2.5px;
}

button {    
    background-color: var(--cor-destaque);
    border-radius: 0.4rem;
    color: var(--cor-padrao);
    cursor: pointer;  
    font-size: 18px;
    font-weight: 600; 
    padding: 0.5rem 1rem; 
}

button:hover {    
    background-color: var(--cor-padrao);
    border: 2px solid var(--cor-destaque);
    color:var(--cor-destaque);
    transition: background-color 0.3s ease;     
}

pre {
    background-color: var(--cor-fundo);
    box-sizing: border-box;
    color: var(--cor-texto);     
    padding: 1rem;    
    white-space: pre-wrap;       
    width: 100%;      
}