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

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #c4b18e;
  border-radius: 15px;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

::selection {
  background-color: #f84;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f5deb3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin: 0;
}

html > body * {
  z-index: 0;
}

.container {
  max-width: 1200px;
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section#dadosPessoais {
  display: grid;
  grid-template-areas:
    "title title title title"
    "breakLine breakLine breakLine breakLine"
    "breakLine breakLine breakLine breakLine"
    "photo photo name name"
    "photo photo genre genre"
    "photo photo birthday birthday"
    "photo photo age age"
    "photo photo phone phone"
    "photo photo email email"
    "photo photo viewCert viewCert"
    "aside aside aside aside";
  gap: 20px;
}

#dadosPessoais > figure.photo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#dadosPessoais > figure.photo > img {
  width: 100%;
  height: auto;
  max-width: 200px;
  border: 3px #fff solid;
  border-radius: 50%;
  filter: drop-shadow(0 0 1em rgba(0, 0, 0, 0.5));
}

#viewCert {
  visibility: visible;
  grid-area: viewCert;
  width: 100px;
  aspect-ratio: 2 / 2;
  background-color: #333;
  color: #f5deb3;
  border: 4px double #a38b5f;
  border-radius: 15px;
  font-size: 15px;
  outline: 1px #222 solid;
  outline-offset: 1px;
  transition: 1s ease-in-out;
}

#viewCert:hover {
  cursor: pointer;
  border: 4px solid #c4b18e;
  outline: 1px #222 dashed;
  outline-offset: 0;
  transform: rotate(360deg);
}

h1,
h2,
h3,
h4 {
  color: #333;
}
p {
  color: #555;
}

h1 {
  font-size: 46px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

button {
  cursor: pointer;
}

.title {
  grid-area: title;
}

.breakLine {
  height: 60px;
  width: auto;
  grid-area: breakLine;
}

.photo {
  grid-area: photo;
}

.name {
  grid-area: name;
}

.genre {
  grid-area: genre;
}

.age {
  grid-area: age;
}

.birthday {
  grid-area: birthday;
}

.phone {
  grid-area: phone;
}

a {
  color: #005500;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: #002800;
}

a:visited {
  color: #f00;
}

.email {
  grid-area: email;
}

hr {
  border: 1px #444 solid;
  width: 70vw;
}

p {
  font-size: 23px;
}

section#objetivosProfissionais {
  display: grid;
  grid-template-areas:
    "title2 title2 title2 title2"
    "breakLine2 breakLine2 breakLine2 breakLine2"
    "breakLine2 breakLine2 breakLine2 breakLine2"
    "breakLine2 breakLine2 breakLine2 breakLine2"
    "text-content text-content text-content text-content"
    "text-content text-content text-content text-content"
    "text-content text-content text-content text-content"
    "text-content text-content text-content text-content";
  gap: 0 20px;
}

.title2 {
  grid-area: title2;
  max-width: 65vw;
}

.breakLine2 {
  grid-area: breakLine2;
  max-width: 65vw;
}

.text-content {
  grid-area: text-content;
  max-width: 65vw;
}

.title3 {
  grid-area: title3;
}

.breakLine3 {
  grid-area: breakLine3;
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 21rem;
  height: 27rem;
}

.card img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ddd;
}

.card h4 {
  padding: 15px;
  font-size: 16px;
  color: #333;
  background: #f5f5f5;
  width: 100%;
}

#cardUNISAL {
  background-color: #181818;
  color: #fff;
}

#cardUNISAL .loader {
  width: 8em;
  height: 8em;
  border-radius: 50%;
  border-top: 8px solid rgba(255, 255, 255, 1);
  border-left: 8px solid rgba(255, 255, 255, 1);
  border-right: 8px solid rgba(255, 255, 255, 0);
  animation: spin 0.575s infinite linear;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.title4 {
  grid-area: title4;
}

.breakLine4 {
  grid-area: breakLine4;
}

.title5 {
  grid-area: title5;
}

.breakLine5 {
  grid-area: breakLine5;
}

.img-icon {
  grid-area: img-icon;
  width: 46px;
  height: auto;
}

.subTitle {
  font-size: 23px;
  grid-area: subTitle;
}

.t1 {
  grid-area: texto1;
}

#dadosPessoais aside {
  grid-area: aside;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #c4b18e;
  border: 4px groove #a38b5f;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 15px;
}

#dadosPessoais aside a img {
  max-width: 32px;
  border-radius: 50%;
  transition: background-color 400ms;
}

#linkedin:hover {
  background-color: #007fbc;
}

#github:hover {
  background-color: #f0563a;
}

#portfolio:hover {
  background-color: #070;
}

button#toTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #f00;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.75);
  filter: drop-shadow(0 0 1em rgba(0, 0, 0, 0.25));
  color: #fff;
  font-size: 35px;
  cursor: pointer;
  z-index: 1000;
  display: none;
}

button#toTop.show {
  display: block;
}

.certificates-modal {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1000;
}

.certificates-modal.show {
  visibility: visible;
}

.certificates-modal nav {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #111;
  padding: 0 20px;
}

.certificates-modal nav h2 {
  color: #fff;
}

.certificates-modal nav #closeCert {
  cursor: pointer;
  background-color: #000;
  border: 1px #666 solid;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.certificates-modal main {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  width: 100%;
  height: calc(100% - 60px);
  padding: 20px;
}

.certificates-modal main #slider {
  width: 100%;
  max-width: 800px;
  height: 500px;
  margin: 20px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.certificates-modal main #slider #slides {
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.certificates-modal .slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  height: 430px;
  scroll-snap-align: center;
  margin-right: 0px;
  box-sizing: border-box;
  transform-origin: center center;
  transform: scale(1);
  gap: 15px;
  overflow: hidden;
  cursor: zoom-in;
}

.certificates-modal .slide img {
  width: 550px;
  transition: transform 0.5s ease;
}

.certificates-modal .slide h3 {
  color: #fff;
  text-align: center;
}

.certificates-modal .slide:hover img {
  transform: scale(1.15);
}

.slider::before,
.slider::after {
  content: "";
  z-index: 1;
  background: none;
  pointer-events: none;
}

.certificates-modal #slider__nav {
  display: inline;
  box-sizing: border-box;
  width: auto;
  height: 85px;
  text-align: center;
}
.certificates-modal .nav__link {
  display: inline-block;
  height: 55px;
  width: 55px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 10px 0 10px;
}

#sli1 {
  background-image: url("../img/Certificado-Farroupilha.png");
}

#sli2 {
  background-image: url("../img/Certificado-Liceu.png");
}

#sli3 {
  background-image: url("../img/HTML_page-0001.jpg");
}

#sli4 {
  background-image: url("../img/CSS_page-0001.jpg");
}

#sli5 {
  background-image: url("../img/certificado_onebitcode_css-moderno_page-0001.jpg");
}

#sli6 {
  background-image: url("../img/certificado_onebitcode_javascript.jpg");
}

#sli7 {
  background-image: url("../img/certificado_onebitcode_typescript_page-0001.jpg");
}

#sli8 {
  background-image: url("../img/certificado_onebitcode_gitgithub_page-0001.jpg");
}

#sli9 {
  background-image: url("../img/certificado_onebitcode_sass_pages-to-jpg-0001.jpg");
}

#sli10 {
  background-image: url("../img/certificado_onebitcode_bootstrap_page-0001.jpg");
}

#sli11 {
  background-image: url("../img/certificado_onebitcode_react_page-0001.jpg");
}

.showCert {
  visibility: visible;
}

#experienciaProfissional > .card-container {
  width: 100%;
  height: 28rem;
}

#experienciaProfissional > .card-container .card {
  position: relative;
  perspective: 1000px;
}

.front,
.back {
  position: absolute;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.front {
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(180deg);
}

#experienciaProfissional > .card-container .card:hover .front {
  transform: rotateY(-180deg);
}

#experienciaProfissional > .card-container .card:hover .back {
  transform: rotateY(0deg);
}

.content {
  padding-left: 15px;
  padding-top: 10px;
  gap: 10px;
}

#habilidadesTecnicas,
#projetos,
#idiomas {
  gap: 10px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}