/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background: #181818 !important;
    --size: 2.25;
    scroll-behavior: smooth;
}

.reader-controls {
    background: #262626;
    color: white;
    padding: 2vh 3vw;
    font-size: 3vh;
    line-height: 5vh;
    box-shadow: 0 0 15px black;
    position: fixed;
    width: 100%;
    height: 9vh;
    top: 0;
    z-index: 100000;
    display: flex;
    user-select: none;
    font-family: 'Roboto';
    font-weight: 600;
}

.zoom-slider {
  position: fixed;
  left: 2vw;
  top: 20vh;
  height: 60vh;
  width: 3vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #262626;
  color: white;
  padding: 1vh;
  border-radius: 1vh;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 100000;
}

.zoom-icon {
  font-size: 3vh;
  color: white;
}

.slider {
  writing-mode: bt-lr; /* dikey için */
  -webkit-appearance: slider-vertical;
  width: .8vh;
  height: 50vh;
  margin: 1vh 0;
}

.reader-controls > div {
    margin-right: 2vw;
}

.reading-style span {
    background: #565656;
    padding: 1vh 1vw;
    border-radius: 1vh;
}

.reading-style span i {
    margin-left: 1vh;
}

.language-select {
    background: #565656;
    border-radius: 1vh;
    transition: 300ms;
}

.language-select span {
    transition: 300ms;
}

.language-select:has(span:hover:not(.selected)) {
    background: #644e5a;
}

.language-select span:hover:not(.selected) {
    opacity: .5;
}

.language-select span a {
    color: white;
    text-decoration: none;
    padding: 1vh;
    width: 100%;
    text-align: center;
    display: inline;
}


.language-select span.selected{
    padding: 1vh 0vh;
}

.language-select span.selected {
    background: #6a1443;
    border-radius: 1vh;
    box-shadow: 0 0 5px #6a1443;
}

.reader-controls .heading-logo {
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    text-align: center;
    font-size: 5vh;
    z-index: -1;
    font-family: 'Oswald', 'IBM Plex Sans', sans-serif;
    font-weight: bolder;
}

.reader-controls .download-pdf {
    background: #6a1443;
    position: absolute;
    right: 0;
    top: 1.5vh;
    border-radius: 1vh;
    box-shadow: 0 0 5px #6a1443, 0px 0px 0 0px black;
    transition: 300ms;
}

.reader-controls .download-pdf:hover {
    opacity: .6;
    box-shadow: 0 0 5px #6a1443, 3px 3px 0 3px black;
}

.reader-controls .download-pdf a {
    padding: .25vh 2vw;
    display: block;
    text-decoration: none;
    color: white;
}

.content {
    width: calc(25vw * var(--size));
    margin-top: 15vh;
}

.content-page {
    margin-bottom: 5vh;
    box-shadow: 1px 1px 10px rgba(0,0,0,25%);
    aspect-ratio: 10.5/14.85;
    height: auto;
    width: calc(25vw * var(--size));
    position: relative;
    padding: calc(1vw * var(--size));
    background: white;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

.content-page.cover-page {
    padding: 0 !important;
    overflow: hidden;
}

.content-page.cover-page img {
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

.content-page .page-heading {
    max-height: 5%;
    height: 5%;
    margin-bottom: 5%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border-bottom: calc(.1vw * var(--size)) solid black;
}

.content-page .page-heading span, .content-page .page-heading h4 {
    font-size: calc(1vw * var(--size));
}

.content-page .text {
    max-height: 85%;
    overflow: hidden;
}

.content-page .text h2.content-heading {
    font-size: calc(1vw * var(--size));
    margin-bottom: calc(.1vw * var(--size));
    line-height: unset;
    font-weight: bold;
    font-family: fantasy;
    text-align: center;
}

.content-page .text img {
    width: 100%;
    height: auto;
}

.content-page .text, .content-page .text p {
    margin-bottom: calc(.7vw * var(--size));
}

.content-page .text, .content-page .text p, .content-page .text span , .content-page .text a{
    font-size: calc(.65vw * var(--size)) !important;
} 

.content-page .text .table {
    margin-bottom: calc(.5vw  * var(--size)) !important;
}

.content-page .text .table>:not(caption)>*>* {
    padding: calc(.3vw  * var(--size)) calc(.3vw  * var(--size));
    border-bottom: unset;
}

.content-page .page-number {
    margin-top: 2%;
    height: 3%;
    position: absolute;
    bottom: calc(1vw * var(--size));
    right: calc(1vw * var(--size));
}

.content-page .page-number span {
    font-size: calc(1vw * var(--size));
    text-decoration: underline;
}

@media(max-width: 425px) {
    body {
        --size: 4 !important;!i;!;
    }
    
    .zoom-slider {
        display: none;
    }
    
    .language-select {
        border-radius: .75vh;
    }
    
    .language-select span.selected {padding: 1.25vh 0;}
    
    .language-select span a {
        padding: .85vw 2vw;
    }
    
    .reader-controls {
        font-size: 2.5vh;
    }
    
    .reader-controls .heading-logo {
        font-size: 4vh;
    }
}