@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-bold-rounded/css/uicons-bold-rounded.css');

@font-face {
  font-family: 'BookEnds'; 
  src: url('./src/Book+Ends.ttf');
  font-weight: normal;
}

@font-face {
  font-family: 'Sketch'; 
  src: url('./src/Sketchbook\ Paper.ttf');

}

@font-face {
  font-family: 'DarkBook'; 
  src: url('./src/DarkBookDemoRegular.ttf');

}

@font-face {
  font-family: 'Antistar'; 
  src: url('./src/Antistar\ Personal\ Use\ Only.ttf');
}
@font-face {
  font-family: 'Barber'; 
  src: url('./src/BarberChop.otf');
}
@font-face {
  font-family: 'Ruthela'; 
  src: url('./src/Ruthela\ Font\ DEMO.ttf');
}


body {
    background-color: #0C0A09;
    background-image: url('');

}

a {
    text-decoration: none;
}

::-webkit-scrollbar {
    display: none;
}


#navBar{
    background-color: #0d0a08;
    padding: 15px;
    backdrop-filter: blur(10px); 
    
}
i {
    color:#ffa11c;
    size: 70px;
}
#banner {
    size: 50%;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -1;
    
}
#bannerblur {
    size: 50%;
    width: 100vw;
    height: 100vh;
    filter: blur(50px);
    position: relative;
    z-index: -2;
}
#title {
    color: #ffc26d;
    font-family: "Antistar";
    font-size: 200px;
    text-shadow: 0 0 40px #ac6400;
    z-index: 10;
    position:absolute;
    width: 1000px;  
    height: 200px; 
    inset: 0;    
    margin: auto; 
}

#navtitle {
    font-family: 'DarkBook';
    color: #ffa11c;
    background-color: #ac640042;
    padding: 5px;
    border-radius: 10px;
    text-decoration: none;
    margin-right: 5px;
    margin-left: 5px;
}
#navtitle:hover {
    background-color: #feb247;
    color:#be7800; ;

}
#search {
    align-items: right;
    width: 30vw;


}


.glowing-image {
    filter: drop-shadow(0 0 10px rgba(rgb(255, 200, 124))); 
    -webkit-filter: drop-shadow(0 0 10px rgba(255, 156, 81, 0.7));
    transition: filter 0.5s ease-in-out;
    
}

.glowing-image:hover {
    filter: drop-shadow(0 0 10px rgba(255, 182, 81, 1)); 
    -webkit-filter: drop-shadow(0 0 30px rgb(255, 171, 106));
    transition: filter 0.5s ease-in-out;
    
}

input {
    border-radius: 5px;
    text-align: right;
    background-color: #ac640064;
    color: #ffc97e;
    width: 40%;
    float: right;
    border-style: none;
    
}

#lantern {
    height: 300px
}
#lanternright {
    height: 300px;
    
}



#lantergrp{
    z-index: 10;
    height: 300px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    position: absolute;

}


#searchglass {
    float: right;
    margin-left: 5px;
}

#cart {
    float: right;
    margin-left: 5px;
}

hr {
    color: #ffa11c;
    background-color: #ffa11c;
    height: 3px;
    border: none;
    margin-bottom: -2px;


}

#ptext {
    background-color: #7b48015c;
    border-radius: 10px;
    margin-right: 400px;
    margin-left: 400px;
    padding: 10px;
}

#desc {
    color: #ffa11c;
    font-family:  Courier, monospace;
    text-align: center;


}

#browse {
    color: #ffc97e;
    font-family: 'DarkBook', Courier, monospace;
    text-align: center;
    font-size: 40px;


    filter: drop-shadow(0 0 30px rgba(255, 182, 81, 1)); 
    -webkit-filter: drop-shadow(0 0 10px rgb(254, 143, 58));

}




#pilebookright {
    transform: scaleX(-1);

}

#pilegroup{
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    position: absolute;
}

#openbook {
    height: 200px;
}

/* PRODUCTS CSS STUFF */

#bookcover {
    height: 300px;
    border-radius: 4px;
    margin-left: auto; 
    margin-right: auto;
    display: block; 
    max-height: 400px;
    min-height: 100px;
}



#genre {
    font-family:'DarkBook', 'Arial Narrow', Arial, sans-serif ;
    color: #ffa11c;
    border-radius: 4px;
}

#productblock{
    background-color:#1b1207;
    width: auto;
    border-radius: 10px;
    padding: 20px;
    overflow: hidden;
    padding:auto;
    max-width: fit-content;
    min-width: 300px;
    margin: 10px;
    transition: transform 0.3s ease;
    min-height: 490px;

}

#productblock:hover{
    background-color: #382000;
    transition: transform 0.3s ease;
    transform: scale(1.08); 

}

#row {
    display: flex;
}
.text {
    color: #feb247;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


#booktitle {
    font-family: Ruthela;
    color: #feb247;
    font-size: 25px;
}

#price {
    font-size: 25px;

}


/*BLOG CSS :3 */

#scrap{
    width: 35%;
    margin-left: 35%;
    margin-right: 35%;
}



/* MODALS IN PRODUCT PAGE */


    .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    backdrop-filter: blur(10px);
    visibility: hidden;
    opacity: 0;
    }
    .overlay:target {
    visibility: visible;
    opacity: 1;
    }
    .content {
        color: #be7800;
    }
    .popup {
    margin-left: 35%;
    margin-right: 35%;

    padding: 20px;
    background: #0c0a09b4;
    backdrop-filter: blur(10px);
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 3s ease-in-out;
    overflow: auto ;
    }



    h2{
    margin-top: 10px ;
    color: #be7800; 
    font-family: Tahoma, Arial, sans-serif;
    }
    .popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    }
    .popup .close:hover {
    color: #feb247;
    }
    .popup .content {
    max-height:500px;
    overflow: auto;
    }

    @media screen and (max-width: 700px){
    .box{
        width: 70%;
    }
    .popup{
        width: 70%;
    }
    }

    #starmodal {
        color: #ac6400;
    }

    #modalcover {
        height: 400px;
        border-radius: 4px;
        margin-left: auto; 
        margin-right: auto;
        display: block; 
        max-height: 400px;
        min-height: 100px;   
          
    }

    .heart {
        color: #feb247;
   
    }

    .modalcart{
        
    }
    .buttonmodal {
        display: flex;
    }

.descmodal{
    font-family: Arial, Helvetica, sans-serif;
}

.author{
    color: #be7800;
    font-family: Arial, Helvetica, sans-serif;
}
/* pop ups */