@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&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: #4444ff;
  --study-color-02: #4444ff88;
  --study-color-03: #4444ff44;




  --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;
  --font-notes: 'Indie Flower', cursive;

}


* {  /* Default CSS Setings */
  padding: 0em; margin: 0em;
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: 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 */
  width: var(--header-content-size);
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--color-medium-black-01);
} div.icon * {
  width: 100%; height: 100%;
  border-radius: 50%;
  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;
  border-radius: 05% / 50%;
  background-color: var(--study-color-01);
}






div#container-title h1 {  /* Study Título */
  display: flex;
  align-items: center;
  gap: 0.25em;
  transition-duration: 0.35s;
  font-size: 1.8em;
} div#container-title h1 > span {
  display: none;
  white-space: nowrap;
  color: var(--color-light-grey-01);
  line-height: 1em;
  font-size: 0.5em;
  font-weight: 400;
} 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;
}







.container-study {  /* Formatações padrão */
  padding: 0em;
  overflow: hidden;
  border-radius: 0.75em;
  box-shadow: inset 0em 0em 2em var(--color-darkest-black-02);
  background-color: var(--color-medium-black-02);
} h2.study {
  padding: 0.25em 0.5em;
  font-family: var(--font-apple);
  font-weight: normal;
  background-color: var(--study-color-03);
} div.container-content td
, div.container-content th {
  padding: 0.5em 0.25em;
  text-align: center;
}



div.coment > code {
  display: block;
  max-width: 80%;
  margin: auto;
  text-align: center;
  font-family: 'Courier New', Courier, monospace, Times, monospace;
  color: var(--color-lighter-white-02);
} a {
  text-decoration: none;
}










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 */
  width: 1.75em;
  padding: 0.25em;
} section.container-study table > tbody > tr:nth-of-type(2n) {
  display: none;
} div.m-info {
  width: 100%; height: 100%;
  overflow: hidden;
  line-height: 0em;
  border-radius: 50%;
  cursor: pointer;
} div.m-info > img {
  width: 100%;
  height: 100%;
} 












footer {  /* footer -------------------------------------------------------------------------------------------------------------------- */
  padding: 1em;
  min-height: 8em;
  background-color: var(--color-medium-black-02);
} footer * {
  color: var(--color-lighter-white-02);
} div#notes * {
  font-family: var(--font-notes);
} div#notes > p > span {
  font-weight: bolder;
}









header > div:nth-of-type(2) {
  position: relative;
  display: flex;
  flex-direction: column;
} div#container-links.openBurge {
  display: flex;
}



@media screen and (max-width: 600px) {  /* sub 600px ----------------------------------------------------------------------------------- */


  div#container-links.openBurge { /* Bar Social Links */
    padding: 0.2em;
    width: 8.5em;
    position: absolute;
    top: calc( 100% + 1em);
    right: 0em;
    height: fit-content;
    border-radius: 0.75em;
  } div#container-links {
    background-color: var(--color-darkest-black-02);
    flex-direction: column;
    gap: 0.25em;
  } div#container-links.openBurge h2 {
    display: none;
  } div#container-links.openBurge * {
    font-weight: 100;
    font-size: 1.25em;
    padding: 0.25em;
    text-align: center;
    width: 100%;
  }
  
  
  
  }