.name{
    font-size:1em;
}

.location{
    font-size:0.8em;
}

.library{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2em;
    gap:3em;
}

.library-element{
    width:100%;
    aspect-ratio: 1.3    ;
    display:flex;
    position:relative;
    flex-direction: column-reverse;
    padding:0.5em 1em;
    box-sizing: border-box;
    -webkit-transition : -webkit-filter 500ms linear;
    transition: filter 0.5s;
}

.library-element-background{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-2;
    transition: 1s filter;
}

.library-element>*{
    margin:0;
    gap:1em;
    cursor: pointer;

}

.library-element::after{
    content:"";
    height:3em;
    background:linear-gradient(to top,#124e7077, #124e7000 );
    position:absolute;
    bottom:0;
    width:100%;
    z-index:-1;
    left:0;
}
.library-element:hover{
    filter: brightness(1.1);
    -webkit-filter: brightness(1.1);
}
.library-element:hover .description{
    display:block;
}
.library-element:hover .library-element-background{
    filter: blur(0.1em);
}
.description{
    display:none;
    position:absolute;
    --height:3em;
    height:0;
    top:0;
    padding:1em;
    padding-bottom:2em;
    overflow: hidden;
    left:0;
    text-align: center;
    background:linear-gradient(to bottom,#124e7077, #124e7000 );
    animation:heightTween 1s forwards;
}

.popup_library{
    display:grid;
    grid-template-columns: 1fr 1fr;
    background: #CEEAF9;
    width:90vw;
    height: 80vh;
    position:fixed;
    top:15vh;
    left:5vw;
    border-radius:0.5em;
    box-shadow: 0 0 0.5em 0em #0B4F95;
    gap:1em;
    overflow: hidden;
    animation:fadeIn 1s backwards;

}
.popup_info{
    padding:1em;
    overflow-y: scroll;
}
.popup_img{
    width:100%;
    height:100%;
    object-fit: cover;
    
    position:absolute;
    top:0;
    z-index: -2;
    left:0;
}

.popup_img_container{
    position:relative;
    overflow: hidden;
    border-radius:0.5em;
    padding:1em;
    display:flex;
    gap:0.1em;
    flex-direction: column;
}
.popup_name{
    font-size:2em;
    font-weight: bold;
}

.popup_name,.popup_location{
    animation: fadeFromLeft 1s backwards;
}
.popup_img_container>*{
    margin:0;
}
.popup_img_container::after{
    content:"";
    height:25%;
    background:linear-gradient(to bottom,rgba(18, 78, 112, 0.795),rgba(18, 78, 112, 0));
    position:absolute;
    width:100%;
    border-top-right-radius:0.5em;
    border-top-left-radius:0.5em;
    top:0;
    left:0;
    z-index:-1;
    animation:heightTween 1s backwards;
}

.popup_background{
    position:fixed;
    width:100vw;
    height:100vh;
    left:0;
    top:0;
    background:rgba(255, 255, 255, 0.205) ;
    animation: background-blur 1s backwards;
    backdrop-filter: blur(1em);
}

body{
    padding-top: 5vh;
}
.search_buttons{
    width:80%;
    margin:auto;
    transform: translateY(1em);
}
.search_buttons{
    display:grid;
    grid-template-areas: "search area type";
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: 1em;
}

.popup_chinesename, .popup_altname, .popup_description, .popup_funfact1, .popup_funfact2, .popup_funfact3{
    font-size: 0.7em;
}

.name, .location{
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 0.3em;
}

#navigate-left{
    position: absolute;
    top: 50%;
    height: 1em;
    left: 0;
}

#navigate-right{
    position: absolute;
    top: 50%;
    height: 1em;
    right: 1vw;
}

#navigate-left:hover, #navigate-right:hover{
    cursor: pointer;
    transform: scale(1.3);
}

@media only screen and (max-width: 768px) {
    .search_buttons{
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "search search"
                            "area type";
        row-gap:0.5em;
        column-gap: 1em;
    }
    .library{
        grid-template-columns: 1fr 1fr;
        gap:1em;
    }
    .popup_library{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}