/* ==========================================================================
   BASE
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: "Raleway", sans-serif;
  background-color: #fff;
  color: #black;
  font-size: 18px;
}

/* Melhor aparência para elementos de mídia */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/* Remove o estilo padrão de fieldset */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Apenas redimensionamento vertical para textarea */
textarea {
  resize: vertical;
}

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   TIPOGRAFIA E TEXTOS
   ========================================================================== */

.home {
  font-size: 1.8rem;
  font-weight: bold;
}

h1{
  color: #e2725b;
}

h1.home{
  color: #000;
}
p.lead {
  font-size: 1rem;
  margin-top: 2em;
}

h5.nota {
  color: #e2725b;
}
h5.listing-title,
.quarto-categories {
  color: #e2725b;
}

h5.listing-title {
  font-size: 1rem;
  color: #000;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: #e2725b;
  text-decoration: underline;
}

a:hover {
  color: #fff;
  background-color: #e2725b;
}

.nav-link:hover {
  color: #fff;
}

.navbar {
  background-color: #fff;
}

.navbar-nav .nav-link.active {
  color: #e2725b;
  background-color: #fff;
}

.about-link,
.about-link-text {
  color: #e2725b;
}

.about-link-text:hover {
  color: #fff;
}

/* ==========================================================================
   PORTFÓLIO
   ========================================================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.portfolio-item {
  transition: transform 0.2s ease;
}

.portfolio-item:hover {
  transform: translateX(10px);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
  position: relative;
  width: 100%;
  top: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quarto-title-banner.page-columns.page-full {
  padding-top: 0;
  padding-bottom: 0;
}

.more-text {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  .more-text {
    flex-direction: row;
  }

  .more-text__block {
    flex: 50% 0 0;
  }

  .more-text__block:nth-child(even) {
    padding-left: 15px;
  }

  .more-text__block:nth-child(odd) {
    padding-right: 15px;
  }

  .show-mobile {
    display: none;
  }

  .show-desktop {
    display: inline;
  }
}

.show-desktop {
  display: none;
}

/* ==========================================================================
   TABELAS E BLOCOS
   ========================================================================== */

.g-col-1 {
  border: 2px solid #e2725b;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: #e2725b;
}

.table {
  border-top: 1px solid #e2725b;
  border-bottom: 1px solid #e2725b;
}

.details {
  border-block-end: 1px solid #e2725b;
}

/* ==========================================================================
   ANIMAÇÃO DE TEXTO TIPO "MÁQUINA DE ESCREVER"
   ========================================================================== */

.highlight {
  color: #e2725b;
  font-weight: bold;
  border-right: 3px solid #e2725b;
  padding-right: 5px;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* ==========================================================================
   <details> COM ÍCONE CUSTOMIZADO
   ========================================================================== */

details {
  border-block-end: 1px solid #e2725b;
  margin-block: 0.5rem;
  padding-block: 0.5rem;
}

summary {
  position: relative;
  anchor-name: --summary;
}

summary::marker {
  content: "";
}

summary::before,
summary::after {
  content: "";
  border-block-start: 3px solid #e2725b;
  height: 0;
  width: 1rem;
  inset-block-start: 50%;
  inset-inline-end: 0;
  position: absolute;
  position-anchor: --summary;
  position-area: top end;
}

summary::after {
  transform: rotate(90deg);
  transform-origin: 50%;
}

details[open] summary::after {
  transform: rotate(0deg);
}


.highlight {
  color: #e2725b; /* Cor do texto animado */
  font-weight: bold;
  border-right: 3px solid #e2725b; /* Simula o cursor piscando */
  padding-right: 5px;
  animation: blink 0.8s infinite;
  }
          
@keyframes blink {
  50% { border-color: transparent; }
}
.highlight {
  color: #e2725b; /* Cor do texto animado */
  font-weight: bold;
  border-right: 3px solid #e2725b; /* Simula o cursor piscando */
  padding-right: 5px;
  animation: blink 0.8s infinite;
}
          
@keyframes blink {
  50% { border-color: transparent; }
}
            
details {
  border-block-end: 1px solid #e2725b;
  margin-block: .5rem;
  padding-block: .5rem;
  
}


summary {
/* Pin the custom marker to the container */
  position: relative;
/* Register summary as an anchor element */
  anchor-name: --summary;
  &::marker {
    content: "";}

  &::before,
  &::after {
    /* Custom marker dimensions */
    content: "";
    border-block-start: 3px solid #e2725b;
    height: 0;
    width: 1rem;
    
    /* Positions the lines */
    inset-block-start: 50%;
    inset-inline-end: 0;
    
    /* Anchor the shape to the summary */
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
  }

/* Rotate just the ::after line to create a "+"" shape */
  &::after {
    transform: rotate(90deg);
    transform-origin: 50%;
  }
}

                /* Rotate the line when open */
details[open] summary::after {
transform: rotate(0deg);
                }
                
.card.h-100{
background-color: #fff;
                }
                
details[name="notes"] a {
  color: #e2725b;
}

details[name="notes"] a:hover {
  color: #fff;
  background-color: #e2725b;
  text-decoration: underline;
}