*{ outline: none;}
:root {
    --color-section-primary: #5A9CB5;
    --color-secondary: #FACE68;
    --color-accent: #FAAC68;
    --color-accent2: #261a0fCC;
    --color-warm: #FA6868;
    --color-alt-1:#443737;
    --color-alt-2:#272121;
    --color-alt-2b:#272121aa;
    --color-alt-3:#FF0000;
    --color-alt-4:#FF4D00;
} 
#banner{
    background-color: var(--color-accent2);
}
body{
    min-width: 400px;
}
.bk-entry{
    margin:auto;
}
.image-container{
    position: relative;
    display:inline-block;
    width:100%;
}
#pages{
    display: flex;
    flex-direction: row;
    margin:auto;
    width:max-content;
    gap:1rem;
}
.pagination{
    padding:0.4rem;
    background-color: orange;
    color:white;
    border:1px transparent solid;
    font-size:1.2rem;
}
.tag_container{
    display: flex;
    flex-wrap: wrap;
    gap:0.3rem;
    padding:0.2rem;
    
}
.tgc{
    color:black;
}
.tg{
    background-color: black;
    color:white;
    width:max-content;
    border:1px transparent solid;
    font-weight: bold;
}
.tg:hover{
    cursor: pointer;
    background-color: white;
    color:orange;
    border:1px orange solid;
}
.pagination:hover{
    border:1px solid orange;
    background-color: white;
    color:orange;
    cursor: pointer;
}
#km{
    margin-bottom:1rem;
}
#searchResults{
    padding:1rem;
    margin-top:2rem;
    background-color: white;
    max-width: 800px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.searchResult_hidden{
    visibility: hidden;
}

.rimg{
    max-height:64px;
}
.rPt{
    max-width:max-content;
}
.rLink{
    border:none;
    background-color: transparent;
    
}
.rLink:hover{
    cursor: pointer;
}
.rDVR{
    display:grid;
    grid-template-columns: 0.3fr 0.75fr 2fr;
    padding:0.25rem;
    border-radius:10px;
    align-content: flex-start;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.15);
    margin-bottom:1rem;
}
.pgNo{
    margin:auto;
    border-radius:10px;
    background-color: var(--color-warm);
    color:white;
    padding:1rem;
    font-size:1rem;
    border:none;
}
.pgNo:hover{
    cursor: pointer;
    background-color: var(--color-accent);
}

#hero > img{
    width: 100%;
    height: auto;
    display: block; 
}

#mainImage{
    width:100%;    
}

#txtMobileSearch{
    padding:1rem;
    border-radius: 10px;
    border:1px solid gray;
    min-width:400px;
    margin:auto;
    margin-bottom:80px;
    margin-top:80px;
}
#txtSearch{
    border-radius:24px;
    width : 400px;
    font-size:1rem;
    background-color: rgba(255, 255, 255, 0.6);
    color:black;
}
#txtSearch::placeholder{
    opacity : 1;
    color:rgb(129, 120, 120);
    font-weight: bold;
    font-style: italic;
}
.image-container > .overlay{
    position: absolute;
    top: 20%;
    left: calc(50% - 200px);
    background-color: transparent;
}

.overlay > input{
    padding:1rem;
    background-color: var(--color-accent2);
    color:white;
    border:none;
}

.mnu{
    color: white;
}
#menu{
    text-align: center;
    width:100%;
    z-index: 100;   
    
}
.desc{
    width:90%;
    padding:10px;
    text-align: justify;    
}
.title{
    margin-top:14px;
    margin-bottom:14px;
    width:100%;
    text-align: center;
}
.index-thumbnail{
    width:200px;
    margin:auto;
}
#gallery_{
    margin:auto;
    padding-top:100px;
    width:90%;
    columns: 3;
    column-gap:18px;
    row-gap:18px;
}

#galleryT{
    padding-top:100px;
    width:100%;
    display:flex;
    flex-direction: column;
    gap:5px;
    align-items:normal;
}
.section-heading{
    margin:auto;
    text-align:center;
    color:#888888;
    margin:40px;
}
#gallery{
    margin:auto;
    width:1100px;
    column-width:200px;
    row-gap:50px;
    margin-top:50px;
    padding-top:50px;
    border-top:4px double orange;
}

.gallery_mobile{
    display:flex;
    flex-direction: column;
}

.thumimg{
    width:100%;
    break-inside: avoid;
    margin-bottom: 1.5rem;
    cursor:pointer;   
}

.thumimg:hover{
    box-shadow: 5px 10px 10px #888888;
    cursor:pointer;
    z-index: 10;
    transition:500ms;
}

figure{  
    margin:auto;
    display:flex;
    width:600px;
    height:min-content;
    grid-row: auto /span 1;
    background-color: rgba(255,255,255,0.5);
    justify-items: center;
}

.readmore, .container-stores > button{
    margin:8px;
    padding:8px;
    background-color:rgb(255, 245, 54);
    border:2px transparent solid;
}

.readmore:hover, .container-stores > button:hover{
    cursor:pointer;
    color:rgb(43, 64, 43);
    background-color:white;
    border:2px solid rgb(255, 245, 54);
}
       
.container-stores{
    display:flex;
    flex-wrap: wrap;
    gap:4px;
    margin-top:4px;
    align-items: center;
}
.index-hidden{
    visibility:hidden;
}

.descriptor{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#descriptor{
    position:absolute;
    width:100%;
    bottom:0;
}
        
#gl_preview{
    padding-top:100px;   
    z-index: 2;
    position: absolute;
    bottom: 24px;
    left:24px;
}

#articles, #wb_entries{
    z-index:10;
    padding-top:20px;
    display:flex;
    flex-wrap: wrap;
    align-items:space-evenly;
}
        
.reg-date{
    font-style:italic;
    font-size:14px;
    color:black;
    padding-top:1rem;
    font-weight:bold;
}
figure{
    background-color:transparent;
    display:flex;
    flex-direction:column;
    max-width: 256px;
            
}

.figure_expanded{
    height: auto;
}

figure > img{
    background-color:transparent;
    max-height:max-content;
}
#gallery_store{
    padding:1rem;
    max-width:100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin:auto;
}
.gl_author{
    color:white;
    font-style:italic;
    font-size: 10px;;
}
.gl_buy{
    background-color: var(--color-section-primary);
    padding:0.4rem;
    color:white;
    text-decoration: none;
    font-weight: bold;
}
.gl_buy:visited{
    color:white;
}

.gl_buy:hover{
    font-weight: bolder;
    background-color: var(--color-alt-4)
}
.gl_description{
    color:white;
}
.gl_gallery_thumnail{
    max-width:250px;
    border-radius: 10px;;
}
.cgi{
    max-width:250px;
    display:flex;
    flex-direction: column;
    gap:1rem;
}
.listing-details{
    margin-top: 1rem;
    padding:1rem;
}

.art-title{
    font-size:1rem;
    background:linear-gradient(0, var(--color-alt-1), var(--color-accent));
    color:white;
    padding:1rem;
    border:8px double var(--color-secondary);
}
        
.art-listing{
    max-height:min-content;
    max-width:min-content;
    margin:auto;
}

.art-listing:hover{
    box-shadow: 2px 2px 4px 8px var(--color-accent);
    transition:500ms;
    cursor:pointer;
}

@media (width <= 650px){
   
    .cgi{
        margin:auto;
    }
    #burger{
        background-color: transparent;
        visibility: visible;
    }
    .mnu, .mnu_2{
        display:none;
    }
    #menu{
        display: flex;
        flex-direction: row;
    }
    .image-container > .overlay{
        position: fixed;
        top: 20%;
        left: calc(50% - 200px);
        background-color: transparent;
    }
}



.sections{
    margin:auto;
    width:90vw;
    max-width:1024px;
    margin-top:100px;
}

#about, #privacy, #features{
    background-color:white;
    padding:1rem;
    
    margin-bottom: 2rem;
    width:100%;
}

#about >h2, #privacy > h2{
    color:var(--color-section-primary);
}
#about > p, #privacy > p{
    max-width:75ch;
    margin:auto;
    margin-top:1rem;
    margin-bottom:1rem;
}

@media (width < 800px){
   
    #banner{
        width:100%;
    }
    #gallery_store{
        margin:1rem;
        align-items: center;
    }
    #burger{
        padding-left:24px;
    }
    .overlay{
        visibility: hidden;
    }
    .image-container > .overlay{
        position: fixed;
        top: 40%;
        left: calc(50% - 200px);
        background-color: transparent;
    }
    #articles{
        display:flex;
        flex-wrap: wrap;
        background-color: transparent;;
    }
    .art-listing > img{
        width:90vw;
    }
    #about, #privacy, #features{
        background-color:white;
        padding:0.3rem;
        
        margin-bottom: 2rem;
        width:fit-content;
    }
}

#footer{
    width:100%;
    background-color: #272121;
    color:white;
    display:flex;
    flex-wrap: wrap;
}

#footer > a{
    font-size:9px;
    color:white;
    padding:0.5rem;
}

#footer > a:hover{
    color:#FAAC68;
}

#footer > a:visited{
    color:white;
}