body {
    font-family: "Times New Roman", serif;
    font-size: 14px;
    margin: 40px;
    color: #222;
    max-width: 500px;
     background-size: 100% 100%;
   background-image: url("images/2.jpeg"); 
   background-repeat: no-repeat;
  background-attachment: fixed;






}



h1 {
    font-family: "Times New Roman", serif;
    font-size: 14px;

    color: #222;
    

}


.col-right {
    block-size: 20%;
    max-width: 380px;
    /* width: 100px; */
    /* height: 100px; */
    text-align: right;
    position: absolute;
    Top: 20px;
    right: 10px;
    position: fixed;
}

.col-left {

    left: 40px;

    max-width: 380px;
    position: absolute;



}

summary {
    list-style-type: none;
    color: grey;
}

summary:hover {
    color: black;
}

details[open] summary {
    color: grey;
}

details .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .6s ease;
}

details[open] .content {
    max-height: 1900px;
}

.title {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 14px;
    max-width: 380px;
  /*    display: grid;
    grid-template-columns: 20px 280px;*/

}

.entry {
    margin-bottom: 4px;
}

.date {
    cursor: pointer;
    color: #777;
    /* lighter grey */
    transition: color 0.3s;
}

.date:hover,
.date.active {
    color: #000;
}





a {
    color: rgb(113, 73, 50);
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: none;
}

audio {
    width: 100%;
    max-width: 100%;
    margin: 8px 0;
    display: block;
}




.container {
    width: 100px;
    /* margin-left: 850px;*/
    overflow: hidden;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
    display: inline;
    float: left;

    padding: 5px;
}

.serie {
    display: inline;
    width: 200px;
    height: 120px;
}





#preview {
    position: fixed;
    top: 40px;
    left: 600px;
    width: 700px;
    pointer-events: none;
}

#preview-img {
    width: 100%;
    height: auto;
    display: none;
}



.thumb {
    cursor: pointer;
}