/* Títulos, subtítulos e rótulos */
@font-face {
  font-family: "gowa";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/gowa/Gowa-Regular.woff2);
}
/* Textos no geral */
@font-face {
  font-family: "simply-sans";
  src: url(../fonts/simply-sans/SimplySans-Book.woff2);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-position: inside;
  text-decoration: none;
  font-size: 100%;
  font-weight: normal;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "simply-sans";
  color: rgb(67, 67, 67);
}
a:link {
  color: #161647;
}
a:visited {
  color: #161647;
}
a:hover {
  color: #0D0D7A;
  text-decoration: underline;
  cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "gowa";
  padding-bottom: 20px;
  text-transform: uppercase;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 28px;
}
h4 {
  font-size: 26px;
  text-shadow: 1px 1px 2px lightcoral;
}
h5 {
  font-size: 24px;
  font-weight: bold;
  color: #111159;
}
h6 {
  font-size: 22px;
}
dt {
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 15px;
}
dd {
  margin: 0 0 7.5px 30px;
}
.ctn-main {
  display: grid;
  grid-template-areas:
  ". title title ."
  "where where back back"
  "share article article void1"
  "subsection subsection subsection void2"
  "footer1 footer1 footer1 footer1"
  "footer2 footer2 footer2 footer2";
  grid-template-columns: 2fr repeat(2, 3fr) 1fr;
  row-gap: 30px;
  margin: 110px auto;
  max-width: 85vw;
}
.ctn-main > header {
  grid-area: title;
  max-width: 100vw;
}
.ctn-main > header > h1 {
  text-align: center;
}
.ctn-main > #where-am-i {
  grid-area: where;
  max-width: 100vw;
}
.ctn-main > #previous-page {
  grid-area: back;
  text-align: right;
  max-width: 100vw;
}
.ctn-main > #previous-page:hover,
.ctn-main > #where-am-i:hover {
  cursor: pointer;
}
.ctn-main > #side-nav {
  grid-area: share;
  max-width: 100vw;
}
.ctn-main > #main-section {
  grid-area: article;
  max-width: 100vw;
/*  display: flex;
  flex-direction: column; */
}
.ctn-main > #void1 {
  grid-area: void1;
  max-width: 100vw;
}
.ctn-main > .sub-section {
  grid-area: subsection;
  max-width: 100vw;
  display: grid;
  grid-template-columns: 2fr 6fr;
  row-gap: 30px;
}
.ctn-main > .void2 {
  grid-area: void2;
  max-width: 100vw;
}
.ctn-main > .general-info {
  grid-area: footer1;
  max-width: 100vw;
}
.ctn-main > .copyright {
  grid-area: footer2;
  max-width: 100vw;
}
.subsection-content {
  display: flex;
  flex-direction: column;
}
#main-section > img,
.subsection-content > img,
.subsection-content > iframe {
  width: 96%;
  align-self: center;
  box-shadow: 2px 0 40px -15px black;
  border: 1px solid #676767;
  border-radius: 8px;
  margin-bottom: 15px;
}
strong {
  text-shadow: 0px 0px 1px black;
}
#side-nav > ol >li {
  font-size: 14px;
  letter-spacing: -0.4px;
  padding-bottom: 6.66px;
}
#side-nav img {
  max-width: 100%;
}
.sub-title > h2 {
  color: #111159;
}
#main-section > p,
#main-section > h3,
.subsection-content > p,
.subsection-content > h3,
.subsection-content > dl,
.subsection-content > ul,
.subsection-content > ol {
 letter-spacing: 1px;
 padding: 0 12.5% 20px;
 text-align: justify;
}
#main-section > h3,
.subsection-content > h3 {
  text-align: center;
}
#main-section > p,
.subsection-content > p,
.subsection-content > dl,
.subsection-content > ul,
.subsection-content > ol {
  font-size: 18px;
}
.subsection-content li {
  margin-bottom: 10px;
}
/* ============================== Animação em cima dos subtextos ==============================*/
.sub-title,
#side-nav {
  display: inline-block;
  position: relative;
  /* overflow: hidden; */
}
.sub-title::before,
#side-nav::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(217deg, rgb(0 255 0 / 58%), rgb(123 112 209 / 44%) 71%),
              linear-gradient(127deg, rgb(56 255 0 / 66%), rgb(34 135 225) 71%),
              linear-gradient(336deg, rgb(44 116 233), rgb(245 84 210) 71%);
  transition: width 0.5s ease;
}
/* =====================================Responsividade===================================== */
@media screen and (max-width: 1100px) {
  .ctn-main {
    grid-template-areas:
    "title title title title"
    "where where where where"
    "back back back back"
    "share share share share"
    "article article article article"
    "void1 void1 void1 void1"
    "subsection subsection subsection subsection"
    "void2 void2 void2 void2"
    "footer1 footer1 footer1 footer1"
    "footer2 footer2 footer2 footer2";
  }
  .ctn-main > .sub-section {
    grid-template-columns: 2fr;
  }
  #side-nav {
    text-align: center;
  }
  #side-nav > ol >li {
    font-size: 16px;
    letter-spacing: 0px;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 680px) {
  .ctn-main > #previous-page {
    text-align: start;
  }
  #main-section > p,
  #main-section > h3,
  .subsection-content > p,
  .subsection-content > h3,
  .subsection-content > dl,
  .subsection-content > ul,
  .subsection-content > ol {
    padding: 0 5% 20px;
  }
}
/* Botão de voltar para o topo */
#btnTop {
  position: fixed;
  bottom: -72px;
  right: 20px;
  width: 48px;
  height: 54px;
  padding-bottom: -50px;
  background-color:  #d6d6d64a;
  border: 1px solid rgba(0, 0, 63, 0.382);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.448);
  border-radius: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: bottom 0.3s ease-in-out;
}
#btnTop:hover {
  background-color: rgba(50, 50, 50, 0.13);
}
.arrow {
  border: solid rgba(44, 44, 130, 0.685);
  border-width: 0 7px 7px 0;
  padding: 5px;
  display: inline-block;
  margin-bottom: -5px;
}
.up {
  transform: rotate(224deg);
  -webkit-transform: (224deg);
}