@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:wght@400;500;600;700&display=swap');


@font-face {
    font-family: 'didotbold';
    src: url('fonts/didot_bold-webfont.eot');
    src: url('fonts/didot_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/didot_bold-webfont.woff2') format('woff2'),
         url('fonts/didot_bold-webfont.woff') format('woff'),
         url('fonts/didot_bold-webfont.ttf') format('truetype'),
         url('fonts/didot_bold-webfont.svg#didotbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'didotitalic';
    src: url('fonts/didot_italic-webfont.eot');
    src: url('fonts/didot_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/didot_italic-webfont.woff2') format('woff2'),
         url('fonts/didot_italic-webfont.woff') format('woff'),
         url('fonts/didot_italic-webfont.ttf') format('truetype'),
         url('fonts/didot_italic-webfont.svg#didotitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'didot_titleregular';
    src: url('fonts/didot_title-webfont.eot');
    src: url('fonts/didot_title-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/didot_title-webfont.woff2') format('woff2'),
         url('fonts/didot_title-webfont.woff') format('woff'),
         url('fonts/didot_title-webfont.ttf') format('truetype'),
         url('fonts/didot_title-webfont.svg#didot_titleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'didotregular';
    src: url('fonts/didot-webfont.eot');
    src: url('fonts/didot-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/didot-webfont.woff2') format('woff2'),
         url('fonts/didot-webfont.woff') format('woff'),
         url('fonts/didot-webfont.ttf') format('truetype'),
         url('fonts/didot-webfont.svg#didotregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Basic CSS Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { font-family: "PT Serif", serif; background-color: #f5f5f5; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; width:100% }

h1 { font-size: 3em; font-weight: bold; font-family: "Playfair Display", serif; margin: 20px 0; }

nav { margin-bottom: 20px; }

nav a { text-decoration: none; margin: 0 15px; font-size: 1.3em; color: #333; font-weight: 400; }

nav a:hover { color: #000; }

nav a.active { font-weight: bold; color: #000; }

/* Layout */
.container { display: flex; justify-content: space-between; align-items: center; width: 80%; height: 70vh; max-height: 600px; }

.container_normal { display: flex; justify-content: space-between; align-items: flex-start; width: 80%; }
.container_full { display: flex; justify-content: center; align-items: center; width: 100%; }

.left { width: 40%; text-align: left; font-style: italic; font-size: 1.1em; line-height: 1.5; max-height: 70vh; overflow: auto; }

.left span { font-style: italic; font-weight: normal; color:#333 }

.left p { margin-top: 20px; font-size: large; font-style: normal; }

.right { width: 40%; text-align: right; margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; max-width: 300px; }

.right img { width: 100%;  border-radius: 5px; }

.right p { font-size: 0.9em; margin: 10px 0; font-weight: normal; width:100%; text-align: center; }

.left_about { width: 46%; max-height:inherit; overflow: unset;  padding-bottom: 40px; }
.left_about p    { font-size: 0.9em; text-align: justify;} 
.right_about { width: 50%; max-width: inherit; }
.right_about span   { display: block; font-size: small; font-weight: normal; margin-top: 10px; }
.right_about p      { font-size: small;}

.fiction { width: 100%; display: flex; justify-content: center; align-items: center; }
.fiction ul { display: flex; justify-content: center; align-items: center; list-style-type: none; flex-wrap: wrap; width: 100%; }
.fiction ul li { width: calc(100%/3); padding: 20px; -webkit-transition:all 0.4s ease-out 0s;-moz-transition:all 0.4s ease-out 0s;-ms-transition:all 0.4s ease-out 0s;-o-transition:all 0.4s ease-out 0s;transition:all 0.4s ease-out 0s; }
.fiction ul li a { text-decoration: none; color: #333; font-size: 1em; font-weight: 700; display: block; padding: 8px 0; }
.fiction ul li a:hover { color: #000; }
.fiction ul li span { width: 70%; min-height: 300px; margin:0 auto; display: block; align-items: flex-start;}
.fiction ul li span img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px;  }
.fiction ul li:hover { transform: scale(1.05);}

.banner { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; } 
.banner img { width: 100%; }
.banner .btm_thumb  p { font-size: small; font-weight: 400; padding: 10px;position:absolute; bottom: 20px; left:0; width: 400px; text-align: left; color:#fff; text-shadow:#000 0 0 5px}
.banner .btm_thumb p span  { font-weight: 400; display:block; color: #eee; text-shadow:#000 0 0 5px }

.thumbnail          { width: 50%; display: flex; text-align: left; flex-wrap: wrap; position: absolute; right: 50px; top: 50px; padding:20px;  }
.thumbnail ul       { display: flex; justify-content: center; align-items: center; list-style-type: none; flex-wrap: wrap; width: 100%; }
.thumbnail ul li    { width:100%; padding-bottom: 15px; font-size:small; color:#fff}
.thumbnail ul li p  { font-weight: 600; display: block; text-shadow:#000 0 0 5px }
.thumbnail ul li a  { color:#eee; text-shadow:#000 0 0 5px }
.thumbnail ul li a:hover { color:#fff}

.fiction_content        { width: 100%; display: flex; flex-wrap: wrap; padding: 40px 0; }
.fiction_content h2     { font-size: 1.5em; font-weight: 600; font-family: "Playfair Display", serif; text-align: left; padding-bottom: 20px;}
.fiction_content p      { font-size: 1em; font-weight: 400; margin: 0 0 20px 0; text-align: justify; }
.fiction_content ul     { padding: 10px 10px 30px 10px;  text-align:left; margin: 0;  width: 100%;}
.fiction_content ul li a    { display: block;}
.fiction_content ul li      { padding:0 0 15px 0 ;}
.fiction_content p i    { color:#333}
.fiction_content p a    { display: block;}

/* Responsive Design */
@media (max-width: 768px) { 
    .container,
    .container_normal,
    .container_full { flex-direction: column-reverse; height: auto; max-height: none; text-align: center; width:90% } 
    .left, .right { width: 100%; } 
    .left_about, .right_about { width: 100%; } 
    .left { margin-bottom: 20px; } 
    .left_about p    { font-size: medium; text-align: left;}
    .right          { max-width: 100%;} 
    .fiction ul li  { width: 100%; padding: 10px 0; }
    .banner         { width: 100%; flex-wrap: wrap;}
    .thumbnail      { right: 0; top: 0; padding: 20px 10px; position: relative; width: 100%; background-color: #fff; box-shadow: none; }
    .thumbnail ul li { width: 100%; padding-bottom: 20px; font-size:medium; color: #333; }
    .banner .btm_thumb p    { width: 100%; padding: 10px; position: relative; bottom: 0; left: 0; background: #eee; color: #333; } 
    .thumbnail ul li a,
    .banner .btm_thumb  p,
    .banner .btm_thumb  p span,
    .thumbnail ul li p  { text-shadow: none;}
    .banner .btm_thumb { border-bottom:#ccc solid 1px; }
    .thumbnail ul li a,
    .banner .btm_thumb p span { color: #000; }
}