/* ======================================
   BASE
====================================== */

:root{
    --font: "Courier New", monospace;
    --bg: #ffffff;
    --fg: #000000;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--fg);
}

/* LOGO */
.logo{
    position:fixed;
    top:20px;
    left:20px;
    font-size:18px;
    line-height:0.8em;
    text-transform:lowercase;
    white-space:pre-line;
    z-index:10;
}
.logo a{color:var(--fg);text-decoration:none}
.logo strong{
    display:block;
    margin-top:4px;
    letter-spacing:13px;
    text-transform:uppercase;
}

/* MENU */
.menu{
    position:fixed;
    top:20px;
    right:20px;
    font-size:18px;
    text-transform:lowercase;
    z-index:10;
}
.menu a{
    color:var(--fg);
    text-decoration:none;
}

/* RESET */
.chiudi-tutte{
    position:fixed;
    bottom:20px;
    left:25px;
    font-size:14px;
    text-transform:lowercase;
    text-decoration:underline;
    cursor:pointer;
    z-index:10;
}

/* LISTA TEMI */
.list-container{
    margin-top:185px;
    margin-left:25px;
    font-size:16px;
    text-transform:lowercase;
    line-height:1.6em;
}
.list-container a{
    color:var(--fg);
    text-decoration:none;
    cursor:pointer;
}
.submenu{
    margin-left:15px;
    display:none;
}
.submenu-item{
    cursor:pointer;
    margin-bottom:6px;
}

/* ======================================
   POPUP
====================================== */

.scheda{
    position:absolute;
    width:720px;
    max-width:100%;
    background:var(--bg);
    border:1px solid var(--fg);
    box-shadow:4px 4px 0px var(--fg);
    padding:20px;
    padding-top:15px;
    z-index:50;
    font-size:14px;
    user-select:none;
    overflow:auto;
    resize:both;
}

.close-btn{
    position:absolute;
    top:6px;
    right:10px;
    font-size:18px;
    cursor:pointer;
}

.zoom-btn{
    position:absolute;
    top:6px;
    right:45px;
    font-size:14px;
    cursor:pointer;
    text-decoration:underline;
}

/* DRAG AREA */
.drag-area{
    cursor:move;
    padding-bottom:10px;
    border-bottom:1px solid var(--fg);
    margin-bottom:10px;
}
.drag-area h3{
    font-size:20px;
}
.sottotitolo{
    margin-top:4px;
}
.meta{
    margin-top:6px;
    opacity:0.8;
}

/* VIEWER */
.viewer{
    width:100%;
    min-height:320px;
    cursor:pointer;
    overflow:auto;
    position:relative;
}

/* SLIDES */
.slide{display:none}

.img-container{
    display:block;
}

/* IMMAGINI */
.popup-img{
    width:100%;
    display:block;
    margin:15px 0 5px 0;
    transform-origin:top left;
    transition: transform 160ms ease-out;
}

/* AUTORE IMMAGINE */
.autore-img{
    font-size:12px;
    color:#666;
    opacity:0.8;
    text-align:right;
    margin-top:2px;
}

/* ======================================
   TABELLA
====================================== */

.table-grid{
    border-top:1px solid #dcdcdc;
    border-left:1px solid #dcdcdc;
    border-right:1px solid #dcdcdc;
    margin-top:20px;
    width:100%;
}

.table-row{
    display:grid;
    border-bottom:1px solid #dcdcdc;
}

.table-row.cols-1{grid-template-columns:1fr}
.table-row.cols-2{grid-template-columns:1fr 1fr}

.info-cell{
    padding:10px 12px;
    border-right:1px solid #dcdcdc;
    display:flex;
    flex-direction:column;
}

.info-cell:last-child{
    border-right:none;
}

.info-label{
    font-size:11px;
    color:#777;
    margin-bottom:4px;
}

.info-value{
    font-size:14px;
    font-weight:600;
   white-space: pre-line;
}

/* CONTATORE */
.contatore{
    margin-top:8px;
    font-size:12px;
    opacity:0.6;
    text-align:right;
}

/* MOBILE FIX */
@media(max-width:520px){

    .scheda{
        width:calc(100% - 40px);
        left:10px!important;
        top:10px!important;
        resize:none;
    }

    .zoom-btn{
        display:none;
    }

    .table-row.cols-2{
        grid-template-columns:1fr;
    }

    .info-value{
        text-align:left;
    }
}