@charset "UTF-8";

:root {
  --cor1: #052E40;
  --cor2: #064864;
  --cor3: #066A94;
  --cor4: #1B7AA2;
  --cor5: #D2E7FF;
  --cor6: #DEF5FF;
}

/* Full Reset */

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

/* Layout */

.container {
  display: grid;
  grid-template: repeat(5, max-content) / 10px 1fr 10px;
  gap: 10px;
}

/* Áreas do grid */
.header  { grid-area: 1 / 1 / 2 / -1; }
.nav     { grid-area: 2 / 1 / 3 / -1; }
.main    { grid-area: 3 / 2 / 4 / -2; }
.aside1  { background-color: green; display: none; }
.aside2  { background-color: blue; display: none; }
.devs    { grid-area: 4 / 1 / 5 / -1; }
.footer  { grid-area: 5 / 1 / -1 / -1; }

/* Style Group */

a {
  text-decoration: none;    
}

html, body {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  font: normal normal 1.1em/1.1em Arial, Helvetica, sans-serif;
}

header,
aside.devs > h1,
footer,
main div.pesq-flex h2 {
  text-align: center;
}

header,
aside.devs,
aside.devs > h1,
footer {
  padding: 10px;
}

main div.pesq-flex > div,
aside.devs > div.devs-flex > div {
  border-radius: 10px;
}

aside.devs,
footer {
  color: white;
}


/* Code Flow */

html, body {
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
    font: normal normal 1.1em/1.1em Arial, Helvetica, sans-serif;
}

header {
    background-color: var(--cor2);
    text-align: center;
    padding: 10px;
}

nav {
    position: sticky;
    top: 0;
    background-color: var(--cor5);
    padding: 5px;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

nav > a {
    color: var(--cor1);
    padding: 10px;
}

nav > a:hover {
    color: white;
    background-color: var(--cor4);
    border-radius: 40px;
}

main {
    text-align: justify;
}

main h1 {
    color: var(--cor1);
    text-align: start;
    padding: 10px;
}

main p {
    text-indent: 20px;
}

main > section {
    margin: 20px 0;
}

/* 1 - Sobre o G-Redes */
main article.sobre-flex {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

main article.sobre-flex > img{
    width: 100%;
}


/* 2 - Quem faz o G-Redes Acontecer */
main article.orien-flex {
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: center;
    gap: 20px;
}


/* 3 - Linhas de Pesquisas*/
main div.pesq-flex {
    margin: 20px 0;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    gap: 20px;
}

/* 3.1 - Card com Linhas de Pesquisas */
main div.pesq-flex > div{
    border: 1px solid var(--cor4);
    background-color: var(--cor6);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.288);
    padding: 10px;
    border-radius: 10px;
    height: 200px;

    flex: 0 1 250px;
}

/* 3.1.1 - Título do Card */
main div.pesq-flex h2 {
    text-align: center;
    line-height: 1.1em;
    color: var(--cor2);
    margin: 0 0 10px 0 ;
}

/* 3.1.1.1 - Icons */
main div.pesq-flex h2::before {
    content: 'wifi';
    font-family: 'Material Symbols Outlined';
    margin: 0 8px 0 0;
    vertical-align: center;
}

/* 3.1.3  - Parágrafo dos cards*/
main div.pesq-flex p {
    text-align: start;
    text-indent: 0;
}

/* 4 - Inscreva-se */
main #sub form {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.342);
}

main #sub fieldset {
    border: none;
}

main #sub legend {
    text-align: center;
    color: var(--cor1);
    font-weight: bold;
    padding: 10px;
}

main #sub input {
    border: none;
    box-shadow: 0px 1px 0px black;
}

main #sub div {
    text-align: start;
    margin: 20px 10px;
}

main #sub textarea {
    display: block;
    resize: vertical;
    max-width: 500px;
}

main #sub input[type="submit"] {
    padding: 10px;
    margin: 10px;
    color: var(--cor6);
    background-color: var(--cor3);
}

main #sub input[type="submit"]:hover {
    background-color: rgb(17, 146, 17);
}

main #sub input[type="reset"] {
    padding: 10px;
    margin: 10px;
    color: var(--cor6);
    background-color: rgb(160, 14, 14);
}

main #sub input[type="reset"]:hover {
    background-color: rgb(255, 0, 0);
}

/* 5  - Desenvolvedores do Site */
aside.devs {
    padding: 10px;
    background-color: var(--cor2);
    color: white;
}

/* 5.1 - Título da Sessão */
aside.devs > h1 {
    text-align: center;
    padding: 10px;
    margin: 0 0 10px 0;
}

/* 5.2 - Container Flex*/
aside.devs > div.devs-flex {
    display: flex;
    flex-flow: column nowrap;
    gap: 50px;
}

/* 5.2.1 - Item Flex*/
aside.devs > div.devs-flex > div {
    border: 1px solid var(--cor5);
    background-color: var(--cor4);
    text-align: center;
    border-radius: 10px;

    flex: auto;
}

/* 5.2.1 - Imagem*/
aside.devs > div.devs-flex img {
    margin-top: 10px;
    border-radius: 50%;
}

/* 5.2.1 - Título dos Item*/
aside.devs > div.devs-flex h2 {
    color: var(--cor6);
    margin: 20px;
}

/* 5.2.1 - Cargo da Equipe*/
aside.devs > div.devs-flex p {
    margin: 0 0 10px 0 ;
}

footer {
    background-color: var(--cor1);
    color: white;
    text-align: center;
    padding: 10px;
}