/* Arquivo CSS (Cascading Style Sheets) para estilização geral de elementos universais*/

/*reset*/
:root
{
:root {
  /* Fontes */
  --fontFamily: "JetBrains Mono", "Fira Code", "Source Code Pro";
  --fontSize: 1rem;

  /* Cores de Fundo */
  --colBgA: rgb(30, 30, 40);
  --colBgB: rgb(20, 20, 30);

  /* Cores de Texto */
  --colTxt: rgb(250, 250, 250);
  --colStr: rgb(140, 70, 140);
  --colIta: rgb(50, 150, 90);

  /* Cores de Links */
  --colUrl: rgb(255, 215, 0);
  --colUrlH: rgb(192, 162, 0);

  /* Cores de Inputs */
  --colInp: rgb(0, 0, 0);
  --colInpH: rgb(80, 80, 80);

  /* Cores de Botões */
  --colBtn: rgb(70, 70, 80);
  --colBtnH: rgb(50, 50, 60);
  --colBtnA: rgb(30, 30, 40);

  /* Comportamento */
  scroll-behavior: smooth;
}

}

/*Aplicacao Default e Temas*/
body, main {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    background-color: var(--colBgA);
    color: var(--colTxt);
    align-items: center;
    box-sizing: border-box;
    overflow-x: hidden;
}

body.dark {
    --colBgA: rgb(30,30,40);
    --colBgB: rgb(20,20,30);

    --colTxt: rgb(250,250,250);
    --colStr: rgb(140,70,140);
    --colIta: rgb(50, 150, 90);
    
    --colUrl: rgb(255,215,0);
    --colUrlH: rgb(192,162,0);

    --colInp: rgb(0,0,0);
    --colInpH: rgb(80,80,80);

    --colBtn: rgb(70,70,80);
    --colBtnH: rgb(50,50,60);
    --colBtnA: rgb(30,30,40);
}

body.light {
  --colBgB: rgb(250,200,200);
  --colBgA: rgb(250,220,220); 
  
  --colTxt: rgb(40,30,20);
  --colStr: rgb(200,70,40);
  --colIta: rgb(90,35,60);

    --colUrl: rgb(200,150,0);
    --colUrlH: rgb(100,75,0);

  --colInp: rgb(255,250,245);
  --colInpH: rgb(230,210,200);

  --colBtn: rgb(220,180,160);
  --colBtnH: rgb(200,160,140);
  --colBtnA: rgb(180,140,120);
}

body, main, header, section, figure, article, button, a, input {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/*Tags Semanticas*/
header{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100vw;
    padding: 1% 5% 1% 0%;
    background-color: var(--colBgB);
    gap: 10vw;
}

footer{
    display: flex;
    flex-direction: column;
    width: 100vw;
    padding: 1% 5%;
    background-color: var(--colBgB);
    align-items: center;
}

figure{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4%;
    gap: 1%;
}

iframe {
    display: block;
    margin: 0;
    padding: 0;
    width: fit-content;
    border: 1;
    
}

section{
    background-color: var(--colBgB);
    width: 90%;
    padding: 2%;
    margin: 2% 5%;
    align-items: center;
    border-radius: 1rem;
    gap: 1%;
}

form{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

/*Titulos e Divisao de Secoes*/
hr{
    border: .1em solid var(--colStr);
    margin: 2% 0;
}

h1{
    font-size: 2.5rem;
    font-weight: 800;
    white-space: nowrap;
}

fieldset{
    width: 15%;
    border: .1em solid var(--colStr);
    padding: 1%;
    
}

/*Tipografia*/
strong{
    color: var(--colStr);
    font-weight: bold;
}

em{
    color:var(--colIta)
}

u {
    text-decoration: none;
    border-bottom: .2rem solid var(--colStr);
}

mark{
    background-color: var(--colIta);;
}

::selection {
  background: var(--colStr);
  color: var(--colTxt);
}

a{
    color: var(--colUrl);
    text-decoration: none;
    transition: color .2s ease;
    cursor: pointer;
}

a:hover{
    color: var(--colUrlH);
}

li{
    margin: 2% 0;
}

/*Inputs*/
form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
}

input{
    background: transparent;
    border: none;
    border-bottom: .2em solid var(--colStr);
    padding: 1% 1%;
    margin: 1% 1%;
    align-items: center;
    color: var(--colTxt);
}

input::placeholder{
    color: var(--colInpH);
}

input[type="search"]{
    width: 75vw;
    padding: 2% 2%;
    border-radius: 2rem;
}

input[type="address"]{
    min-width: 75vw;
    padding: 2% 2%;
    border-radius: 2rem;
}

textarea{
    background: transparent;
    border: .2em solid var(--colStr);
    padding: 2%;
    align-items: center;
    color: var(--colTxt);
    min-height: 10vh;
    min-width: 60vw;
    border-radius: 1rem;
    resize:vertical
}

button{
    min-width: fit-content;
    min-height: fit-content;
    text-wrap: wrap;
    border: 0;
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: var(--colBtn);
    color: var(--colTxt);
    transition: background .2s ease;
}

button:hover{
    background: var(--colBtnH);
}

button:active{
    background: var(--colBtnA);
}

img {
  will-change: transform;
}
img:hover {
  transition: transform 0.2s ease;
  transform: scale(1.1);
}