@font-face {
        font-family: 'Playfair Display';
        src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    }

    @font-face {
        font-family: 'Libre Baskerville Bold';
        src: url('fonts/LibreBaskerville-Bold.ttf') format('truetype');
    }

    @font-face {
        font-family: 'EB Garamond';
        src: url('fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
    }


    body{background:#ccc; font-size: 13px; font-family: 'EB Garamond', serif;}
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .container {width: 1600!important;}

    #book .turn-page{ background-color:#f0f0f0 ;
        box-shadow: 3px 3px black; border: 2px solid; margin-top: 10px; 
        color: rgb(6, 4, 102);
    }

    #book .turn-page{ background-color:#f0f0f0 ;
        box-shadow: 3px 3px black; border: 2px solid; margin-top: 10px; 
        color: rgb(6, 4, 102);
    }

    .txt{display:flexbox;text-align: center; font-family: 'EB Garamond', serif;line-height: 1.1;}
    .txt div{padding-left: 20px;padding-right: 20px;font-size:110%}
    .txt span{font-size: 110%; font-weight: bold; font-family: 'Playfair Display', serif;}
    .mbody{line-height: 1.1;}
    
    .txts{display:flexbox}
    .txts div{padding-left: 30px;padding-right: 10px;font-size:103%;}
    .txts span{font-size: 120%; font-weight: bold;}


    .mf img {
        width: 100%; /* Image fills the width */
        height: 100%; /* Image fills the height */
        object-fit: cover; /* Ensures the image covers the container */
        object-position: top; /* Centers the image */
    }

    .wrapper_left {
      width: 750px;
      height: 500px;
      overflow: hidden;
      position: relative;
    }

    .wrapper_left img {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 1500px; /* duplája a wrappernek */
      height: auto;
    }
    .wrapper_right {
      width: 750px;
      height: 500px;
      overflow: hidden;
      position: relative;
    }

    .wrapper_right img {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 1500px; /* duplája a wrappernek */
      height: auto;
    }