@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');


/* TELAS PEQUENAS */



:root {

  --header-content-size: 3em;




  --hover-color-01: #ffffff08;
  --hover-color-02: #ffffff28;
  --default-color-grey-01: #606060;
  --default-color-grey-02: #60606060;
  --default-color-red-01: #f00000;
  --default-color-red-02: #f0000080;

  --color-darkest-black-01: #000000;
  --color-darkest-black-02: #000000f0;
  --color-darkest-black-03: #000000c0;
  --color-dark-black-01: #050505;
  --color-dark-black-02: #05050580;
  --color-medium-black-01: #161616;
  --color-medium-black-02: #16161680;
  --color-lighter-white-01: #ffffff;
  --color-lighter-white-02: #ffffffd0;
  --color-light-grey-01: #b0b0b0;
  --color-light-grey-02: #b0b0b080;
  --color-dark-grey-01: #2f2f2f;
  --color-dark-grey-02: #2f2f2f80;

  --study-color-01: #9944ff;
  --study-color-02: #9944ff88;
  --study-color-03: #9944ff44;




  --fonte-animatic: 'Amatic SC', cursive;
  --font-apple: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-angel: "Angel", sans-serif;

}


* {  /* CSS Padrão Geral */
  padding: 0em; margin: 0em;
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
} body, html {
  background-color: var(--color-dark-black-01);
  width: 100vw; height: 100vh;
  margin: auto;
  perspective: 10px;
  overflow-x: hidden;
} body {
  position: relative;
} body * {
  color: var(--color-lighter-white-02);
}


.scroll::-webkit-scrollbar {  /* Scroll Space */
  background-color: var(--color-darkest-black-01); width: 0.5em;
} .scroll::-webkit-scrollbar-track {  /* Fundo Scroll */
  border-radius: 0.25em; border: 2px solid var(--color-darkest-black-01);
  margin: 0.75em 0em;
} .scroll::-webkit-scrollbar-track:hover {
  background: var(--color-medium-black-01);
} .scroll::-webkit-scrollbar-thumb {  /* Mover Scroll */
  border: 1px solid var(--color-darkest-black-01); border-radius: 0.25em;
  background-color: var(--color-medium-black-01);
} .scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-dark-grey-01);
}



















header {  /* Header -------------------------------------------------------------------------------------------------------------------- */
  display: flex;
  justify-content: space-between;
  padding: 0.75em 1em;
  background-color: var(--color-medium-black-02);
} header * {
  color: var(--study-color-01);
  font-family: var(--font-apple);
  font-weight: lighter;
} header > div > div  /* Divisores */
, header > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
} header > div > div:nth-last-of-type(1) {  /* Título & Link */
  box-sizing: border-box;
  padding: 0em 1em;
  border: 2px solid var(--color-medium-black-01);
  border-radius: 0.5em;
} header > div > div {
  height: var(--header-content-size);
}






div.icon {  /* Icons */
  box-sizing: border-box;
  width: var(--header-content-size);
  border-radius: 50%;
  border: 2px solid var(--color-medium-black-01);
} div.icon * {
  border-radius: 50%;
  width: 100%; height: 100%;
  transition-duration: 0.15s;
  display: flex;
  justify-content: center;
  align-items: center;
} div.icon:hover > a ,  /* Hover */
div.icon:hover > div {
  width: 90%; height: 90%;
} div.icon:hover {
  background: var(--hover-color-01);
  box-shadow: 0em 0em 0.25em var(--hover-color-01);
 }






div#container-burge > div > div {  /* Container Icone Menu Burger */
  width: 65%; height: 65%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
} div#container-burge > div > div > div {  /* Icone Menu Burger */
  width: 90%; height: 0.1em;
  background-color: var(--study-color-01);
  border-radius: 05% / 50%;
}






div#container-title h1 {  /* Study Título */
  display: flex;
  align-items: center;
  gap: 0.25em;
  transition-duration: 0.35s;
  font-size: min( 1.8em , 6vw );
} div#container-title h1 > span {
  white-space: nowrap;
  color: var(--color-light-grey-01);
  line-height: 1em;
  font-size: 0.5em;
  font-weight: 400;
  display: none;
} div#container-waifu:hover ~ div#container-title {  /* Hover */
  box-shadow: inset 0em 0em 2em var(--color-medium-black-01);
  background-color: var(--color-darkest-black-02);
} div#container-waifu:hover ~ div#container-title * h1 {
  color: var(--color-lighter-white-02);
} div#container-waifu:hover ~ div#container-title * h1 > span {
  display: block;
}




div#container-links ,
div#container-links * {
  transition-duration: 0.35s;
} div#container-links > h2  /* Guia */
, div#container-links > a {
  font-size: 1em;
  font-weight: 400;
}


div#container-links > h2 { display: none; }





div#container-burge { display: flex; }
div#container-links { display: none; }





main { /* Main ------------------------------------------------------------------------------------------------------------------------- */
  padding: 0em 1em;
} main > * {
  max-width: 70em;
  margin: 1.5em auto;
}






section#apres {  /* Apresentação */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1em;
  box-shadow: inset 0em 0em 1em var(--color-darkest-black-02);
} section#apres > div {
  overflow: hidden;
}




section#apres > div:nth-of-type(1) > h2 { display: block; }
section#apres > div:nth-of-type(2) > h2 { display: none; }




section#apres > div:nth-of-type(1) {  /* Div Img */
  max-height: 10em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1.5px solid var(--color-light-grey-02);;
} section#apres > div:nth-of-type(1) > img {
  width: 100%; height: 100%;
  object-fit: cover;
  overflow: hidden;
} section#apres > div:nth-of-type(1) > h2 {
  position: absolute;
  font-size: 1.8em;
}


section#apres > div > h2 ,  /* Div Txt */
section#apres > div > p {
  padding: 1.5em 1.5em;
  font-family: var(--font-apple);
  color: var(--color-lighter-white-02);
} section#apres > div > p {
  text-indent: 1em;
}





div.container-content {  /* Tabelas */
  padding: 1em;
} table {
  width: 100%;
  overflow: hidden;
  border-radius: 1em;
} table * {
  font-family: var(--font-apple);
  color: var(--color-light-grey-01);
} div > table > tbody > tr {
  background-color: var(--color-dark-grey-02);
}

table > thead > tr > th {  /* Tabelas Header */
  border-bottom: 1.5px solid var(--color-light-grey-02);
  font-size: 1em;
} table > thead > tr > th:nth-of-type(1) {
  width: 8em;
}


table > tbody > tr > td:nth-of-type(3) {  /* Mais Informações */
  padding: 0.25em;
  width: 1.75em;
} section.container-study table > tbody > tr:nth-of-type(2n) {
  display: none;
} div.m-info {
  width: 100%; height: 100%;
  line-height: 0em;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
} div.m-info > img {
  width: 100%; height: 100%;
} 




















div#cont-modulos {
  max-width: 42em;
  font-size: 1.5em;
  padding: 1.5em;
  display: grid;
  grid-template-columns: repeat( auto-fit , minmax( 12em , 1fr ) );
  gap: 1em;
} div#cont-modulos > div:nth-of-type(5) {
  grid-column: span 2;
} div#cont-modulos * {
  font-weight: 100;
  font-family: var(--font-apple);
} div#cont-modulos h2 {
  font-size: 1em;
  padding: 0em 0.75em 0.5em;
} div#cont-modulos h2 > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.02em;
} div#cont-modulos a {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.2em;
} div#cont-modulos a span {
  padding-top: 0.25em;
  font-size: 0.6em;
} div#cont-modulos div {
} nav.links-wrape {
  border-radius: 0.5em;
  box-shadow: inset 0em 0em 1.5em var(--color-medium-black-02);
  overflow: hidden;
  overflow-y: scroll;
  height: 14em;
} nav.links-wrape::-webkit-scrollbar-track {
  margin: 0em;
} nav.links-wrape > ul > li {
  padding: 0.25em 0.75em;
  margin: 0.5em 0.25em;
} span.ver-nun {
  font-size: 0.5em;
}




@media screen and (max-width: 45em) {

  body > main > div#cont-modulos {
    grid-template-columns: repeat(1 , 1fr);
  } body > main > div#cont-modulos > div:nth-of-type(5) {
    grid-column: span 1;
  }

}