@import url('https://fonts.googleapis.com/css2?family=Croissant+One&display=swap');
    @font-face {
      font-family: 'runas'; /* Nome que você vai usar no CSS */
      src: url('khscala.otf') format('opentype'); /* Caminho para seu arquivo .otf */
      /* Para maior compatibilidade, adicione outros formatos (WOFF/WOFF2 são recomendados): */
      /* src: url('../fonts/minha-fonte.woff2') format('woff2'),
             url('../fonts/minha-fonte.woff') format('woff'),
             url('../fonts/minha-fonte.otf') format('opentype'); */
      font-weight: normal; /* Ou bold, 400, 700, etc. */
      font-style: normal; /* Ou italic */
    }
    body{
        margin-left:60px;
        margin-right:60px;
        margin-top:0;
        margin-bottom:0;
        background: #FDFDFD;
        background: -moz-linear-gradient(-45deg, #FDFDFD 0%, #D1E0EE 100%);
        background: -webkit-linear-gradient(-45deg, #FDFDFD 0%, #D1E0EE 100%);
        background: linear-gradient(135deg, #FDFDFD 0%, #D1E0EE 100%);
    }
    a, a:visited{
        color:inherit;
        text-decoration:none;
    }
    .runa1{
        width:50px;
        display: grid;
        grid-template-rows: repeat(7 , 1fr);
        padding: 5px;
        position:fixed;
        top:0;
        left:0;
        height:100vh;
        place-items: center;
        background:#000;
    }
    .runa2{
        width:50px;
        display: grid;
        grid-template-rows: repeat(7 , 1fr);
        padding: 5px;
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        place-items: center;
        background:#000;
    }
    .runa1 img, .runa2 img {
        max-width:95%;
    }
    @keyframes spinner {
    0% { transform: rotate3d(0, 1, 0, 0deg); }
    50% { transform: rotate3d(0, 1, 0, 0deg); }
    100% { transform: rotate3d(0, 1, 0, 360deg); }
    }
    .cx_topo{
        background-image: url('imagens/fd_topo.jpg'); 
        background-size: cover;
        width:100%;
        height:200px;
        box-shadow: inset 0px -10px 13px -5px #5C5C5C;
    }
    .logo{
        font-family: 'Croissant One', cursive;
        font-size:30px;
        text-align:center;
        float:left;
        margin:10px;
    }
    .titulo_pg{
        position:absolute;
        top:154;
        border-radius: 15px 15px 0px 0px;
      left: 50%; /* Move para 50% da largura */
      transform: translateX(-50%); /* Ajusta o centro */
        background:#000;
        padding:10px 30px 10px 30px;
        display:inline-block;
        width:fit-content;
        font-family: Georgia, serif;
        font-size: 25px;
        letter-spacing: 2px;
        word-spacing: 2px;
        color: #827753;
        font-weight: 700;
        text-decoration: none;
        font-style: normal;
        font-variant: normal;
        text-transform: uppercase;
    }
    .sitef{
        position:absolute;
        top:10;
        right:70;
        text-shadow: 0px 0px 6px #FFB900;
    }
    .contador{
        position:absolute;
        top:180;
        right:70;
        text-shadow: 0px 0px 6px #12E9FF;
    }
    .menu{
        display: grid;
        grid-template-columns: repeat(10 , 1fr);
        grid-auto-flow: column;
        place-items: center;
        padding:10px;
        background:#000;
        font-family: Georgia, serif;
        font-size: 15px;
        letter-spacing: 2px;
        word-spacing: 2px;
        color: #827753;
        font-weight: 600;
        text-decoration: none;
        font-style: normal;
        font-variant: normal;
        text-transform: uppercase;
        text-align:center;
    }    
    .menu a{
        color:inherit;
        text-decoration:none;
    }
    .menu a:hover{
        color:#fff;
        text-decoration:none;
    }
    .txt_ini{
        padding:40px;
        text-align:center;
    }
    .grid3{
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-auto-flow: column;
        place-items: center;
        padding:10px;
    }    
    .grid_2ini{
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-auto-flow: column;
        place-items: start center;
        padding:10px;
    }    
    .grid_ini_img{
        display: grid;
        grid-template-columns: repeat(10 , 1fr);
        grid-auto-flow: column;
        place-items: center;
        padding:10px;
        height:18vh;
    }
    .grid_ini_img img{
        max-height:18vh;
        max-width:18vh;
    }
    .grid_livros{
        width:100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 5px; /* Define o espaçamento entre as células do grid */
        padding: 10px;
        
    }
    .brd_preta{
        border: 5px solid #000000;
        border-radius:15px;
        padding:20px;
        margin:10px;
        margin-top:20px;
    }
    .tit_itm{
        font-size: 20px;
        margin-top:-64px;
        margin-bottom:20px;
        margin-left:-15px;
        width:fit-content;
        background:#000;
        padding:10px;
        color: #827753;
        border-radius: 10px 10px 0px 0px;
    }
    .rod{
        padding:10px;
        background:#000;
        font-family: Georgia, serif;
        font-size: 15px;
        letter-spacing: 2px;
        word-spacing: 2px;
        color: #827753;
        font-weight: 600;
        text-decoration: none;
        font-style: normal;
        font-variant: normal;
        text-transform: uppercase;
        text-align:center;
    }
    .runa{
        font-family: 'runas';
        font-size:40px;
    }
    .r_gold{
        color:#B39500;
        animation: spinner 15s infinite linear;
        text-shadow: 0px 0px 10px #CCAA00;
    }
    .r_azul{
        color:#2F80B3;
        animation: spinner 25s infinite linear;
        text-shadow: 0px 0px 10px #43B6FF;
    }
    .r_laranja{
        color:#B35C2C;
        animation: spinner 18s infinite linear;
        text-shadow: 0px 0px 10px #FF833F;
    }
    .r_verde{
        color:#1AAA13;
        animation: spinner 14s infinite linear;
        text-shadow: 0px 0px 10px #00FF7D;
    }
    .r_vermelho{
        color:#FB0000;
        animation: spinner 22s infinite linear;
        text-shadow: 0px 0px 10px #FBA6A6;
    }
    .r_azulc{
        color:#21F6FB;
        animation: spinner 27s infinite linear;
        text-shadow: 0px 0px 10px #000000;
    }
    .r_marrom{
        color:#946619;
        animation: spinner 20s infinite linear;
        text-shadow: 0px 0px 10px #FFD821;
    }
    .r_lilas{
        color:#B819FF;
        animation: spinner 23s infinite linear;
        text-shadow: 0px 0px 10px #E2B2FF;
    }
    
    
    
    
    .book-wrapper {
  width: 900px;
  position: relative;
  margin: 0 auto;
  column-count: 3;
  column-gap: 12px;
  padding: 4px;
}
.book-items {
  position: relative;
  cursor: default;
  padding: 16px;
  margin: 0;
  display: grid;
  break-inside: avoid;
}

.main-book-wrap {
  position: relative;
}

.book-cover {
  position: relative;
}

.book-cover .book-inside {
  position: absolute;
  width: 90%;
  height: 96%;
  top: 1%;
  left: 16px;
  border: 1px solid grey;
  border-radius: 2px 6px 6px 2px;
  background: white;
  box-shadow: 10px 40px 40px -10px #00000030, inset -2px 0 0 grey,
    inset -3px 0 0 #dbdbdb, inset -4px 0 0 white, inset -5px 0 0 #dbdbdb,
    inset -6px 0 0 white, inset -7px 0 0 #dbdbdb, inset -8px 0 0 white,
    inset -9px 0 0 #dbdbdb;
}

.book-cover .book-image {
  line-height: 0;
  position: relative;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 6px 6px 18px -2px rgba(0, 0, 0, 0.2),
    24px 28px 40px -6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  transform: perspective(2000px) rotateY(-15deg) translateX(-10px) scaleX(0.94);
  cursor: pointer;
}

.book-image img {
  grid-row: 1 / -1;
  grid-column: 1;
  width: 100%;
  border-radius: 2px 6px 6px 2px;
}

.book-image:hover {
  transform: perspective(2000px) rotateY(0deg) translateX(0px) scaleX(1);
  transform-style: preserve-3d;
  box-shadow: 6px 6px 12px -1px rgba(0, 0, 0, 0.1),
    20px 14px 16px -6px rgba(0, 0, 0, 0.1);
}

.effect {
  position: absolute;
  width: 20px;
  height: 100%;
  margin-left: 16px;
  top: 0;
  border-left: 2px solid #00000010;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: all 0.5s ease;
  z-index: 5;
}

.light {
  width: 90%;
  height: 100%;
  position: absolute;
  border-radius: 3px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  top: 0;
  right: 0;
  opacity: 0.1;
  transition: all 0.5s ease;
  z-index: 4;
}

.book-image:hover .effect{
    margin-left: 14px;
}

.realvjy{
  width: 900px;
  padding: 20px;
  margin: 0 auto;
  font-family: sans-serif;
  text-align: center
}



#featured-articles {
    /*max-width: 1000px; may not be needed depending on the width of the container */
    display:flex;
    align-items: center;
    flex-direction: column;
    flex-wrap:wrap;
    align-content:space-between;
}
#featured-articles .featured-article {
    width:19%;
    padding:0 0 30px 0;
    position:relative;
}
#featured-articles .featured-article img {
    padding: 0 0 5px 0;
}
#featured-articles .featured-article a {
    text-transform:uppercase;
}
.featured-article {
    width:30%;

}
.featured-article img {
    width:100%;
}




.clear { clear: both; }