@media screen {
    #navbar>a {
        margin-bottom: 5px;
    }

    span#poetry-navbar {
        display: flex;
    }

    main#content {
        padding: 20px 0;
    }

    div.folder {
        display: none;
    }

    .poetry-folder{
        grid-area: content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        place-content: center;
        place-items: center;
        gap: 20px;
        margin: 8px 5% 0;
    }

    .poetry-item{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }

    .poetry-title{
        margin-top: 6px;

        text-align: center;
        font-size: 11pt;
    }

    .poetry-picture{
        width: 100%;
        object-fit: cover;
        border-radius: 5%;
    }
    .big-poem{
    }

    div#blur-foreground-poetry {
        display: none;
        grid-template: subgrid;
        grid-area: center;
        position: relative;
        
        height: fit-content;
        /*border: 23px solid white;
        background-color: white;
        border-radius: 23px;*/
    }

    #poem {
        position: relative;
        place-self: center center;
        object-fit: contain;
        border-radius: 30px;
        /*box-shadow: 0 0 0 34px white;*/
    }

    a.navigate{
        width: 40px;
        height: 40px;
    }
    a#close {
        position: absolute;
        right: -40px;
        top: -40px;
        box-shadow: none;
    }

    a.navigate>img {
        padding: 5px;
        width: 30px;
        height: 30px;
    }

    a#left{
        position:absolute;
        left: -60px;
        top: 50%;
        box-shadow: none;
    }

    a#right{
        position:absolute;
        right: -60px;
        top: 50%;
        box-shadow: none;
    }

}
@media screen and (max-width: 1050px){
    .poetry-folder{
        margin: 8px 2% 0;
    }
}