@font-face {
     font-family: 'garamondt';
     src: url('fonte/garamondt-regular-webfont.woff') format('woff');
     font-style: normal;
     font-weight: 400;
     font-display: swap;
 }

 @font-face {
     font-family: 'garamondt-italic';
     src: url('fonte/garamondt-italic-webfont.woff') format('woff');
     font-style: italic;
     font-weight: 400;
     font-display: swap;
 }

 body {
     background-color: #fffbf0;
     color: #292b37;
     font-family: "garamondt";
     margin: 0;
     padding: 2rem 1rem;
     font-size: 14px;
 }

 .wrapper {
     max-width: 800px;
     margin: 0 auto;
     transform-origin: top center;
 }

 h1 {
     text-align: left;
 }

 /* enter */
 .grid-enter {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 5px;
     margin: 4rem auto;
 }

 .banner {
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.466);
     padding: 5px;
     text-align: center !important;
 }

 .banner img {
     width: 100%;
     height: auto;
     display: block;
     border: 1px solid #292b3777;
 }

 .caption {
     padding: 0;
     margin: 15px 0;
     font-size: 1.5rem;
 }

 .intro {
     padding: 1.5rem;
     text-align: center;
 }

 .intro h1 {
     font-size: 1.5em;
     text-align: center !important;
 }

 .intro p {
     line-height: 1.5;
 }

 .nav {
     display: inline-block;
     padding: 5px 10px;
     border: 1px solid #292b37;
     text-decoration: none;
     color: inherit;
 }

 .nav:hover {
     color: #fffbf0;
     background-color: #292b37;
     transition: .5s;
 }

 /* .grid index e blog */
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 20px;
     align-items: start;
     margin: 4rem auto;
 }

 /* fotos */
 .grid-foto {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     max-width: 700px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 1rem;
     margin-left: auto;
 }

 .card-foto img {
     width: 100%;
     height: auto;
     display: block;
 }

 .video video {
     max-width: 150px;
     width: 100%;
 }

 /* .card index */
 .card-index {
     border: 1px solid #6c6c6a;
     width: 100%;
     transition: box-shadow .5s, background-color .5s;
     display: block;
     text-decoration: none;
     color: inherit;
     padding: 5px;
     text-align: center;
 }

 .card-index:hover {
     box-shadow: 3px 3px #292b37;
     background-color: #dee5ed6b;
 }

 .card-index img {
     width: 100%;
     height: auto;
     display: block;
     box-sizing: border-box;
 }

 .card-index p {
     padding: 0;
     margin: 0;
 }

 /* .card blog */
 .card-blog {
     width: 100%;
     transition: color .5s, background-color .5s;
     display: block;
     text-decoration: none;
     color: #fffbf0;
     padding: 5px;
     background-color: #292b37;
     text-align: center;
     margin: auto;
 }

 .card-blog:hover {
     background-color: #fffbf0;
     color: inherit;
 }

 /* páginas diário */
 .ano,
 #index {
     text-align: center;
     display: block;
     margin: auto;
 }

 #index {
     position: relative;
     left: 413px;
     font-size: 1rem;
     color: inherit;
     text-decoration: none;
     font-weight: bold;
 }

 .text {
     max-width: 800px;
     margin: 0 auto;
     transform-origin: top center;
 }

 .text h3 {
     color: #b3b3b3;
     margin-top: -10px;
     font-size: 24px;
     text-align: left;
     font-family: "Estonia";
 }

 .linha {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

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

 ::-webkit-scrollbar-thumb {
     background-color: #292b37;
     border: 1px solid black;
 }

 ::-webkit-scrollbar-track {
     background-color: #fffbf0;
     border: 1px solid #fffbf0;
 }

 @media (max-width: 1200px) {
     .wrapper {
         transform: scale(0.92);
     }
 }

 @media (max-width: 1000px) {
     .wrapper {
         transform: scale(0.88);
     }
 }

 @media (max-width: 850px) {
     .wrapper {
         transform: scale(0.82);
     }
 }

 .overlay {
     position: fixed;
     inset: 0;
     background: #dee5edc7;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
 }

 .overlay.ativo {
     display: flex;
 }

 .modal {
     background: #fffbf0;
     max-width: 800px;
     width: 90%;
     max-height: 90vh;
     overflow: hidden;
     position: relative;
     box-shadow: 0 10px 40px #292b37af;
 }

 .modal iframe {
     width: 100%;
     height: 90vh;
     border: none;
 }

 .close {
     position: absolute;
     top: 5px;
     right: 10px;
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
 }