@font-face { font-family: Fluxisch; src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff); } @font-face { font-family: Fluxisch_bold; src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Bold.woff); } @font-face { font-family: Junicode; src: url(fonts/Junicode.ttf); } @font-face { font-family: syne-italic; src: url(fonts/Syne-Italic.otf); } body{ /* background-color: red; */ background-color: #eeecf0; margin: 0; overflow: auto; } .container { display: flex; overflow: hidden; height: 100vh; position: relative; backface-visibility: hidden; will-change: overflow; } .info { overflow: auto; height: auto; width: 50%; height: 100%; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .pictures{ overflow: auto; height: auto; width: 50%; height: 100%; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .vertical_line { border-left: 2.5px solid red; height: 100%; } .horizontal_line{ border-bottom: 2.5px solid red; width: 100%; margin-left: 0; margin-top: 0.5vh; margin-bottom: 0.5vh; } .info::-webkit-scrollbar { display: none; } img { width: 100%; } h1 { margin: 0; margin-left: 1.5vw; margin-top: 3vh; margin-bottom: 3vh; font-family: syne-italic; font-size: 5vw; line-height: 5.5vw; color: #2e1d69; } h2 { font-size: 1.5vw; margin: 0; margin-left: 1vw; margin-top: 2%; text-decoration: underline; font-family: Fluxisch; line-height: 25pt; color: #2e1d69; } p{ text-indent: 2em; font-family: Fluxisch; font-size: 1.5vw; margin-left: 1vw; margin-right: 2vw; line-height: 2.7vh; color: #2e1d69; } /* @media print{ h1 { font-size: 25pt; margin: 0; margin-top: 0; font-family: syne-italic; line-height: 25pt; color: #2e1d69; } h2 { font-size: 25pt; margin: 0; margin-top: 0; font-family: Fluxisch; line-height: 25pt; color: #2e1d69; } p{ text-indent: 2em; font-family: Fluxisch; font-size: 10pt; margin-right: 2vw; line-height: 10.5pt; color: #2e1d69; } .container { display: flex; overflow: hidden; height: 100vh; position: relative; backface-visibility: hidden; will-change: overflow; } .info { overflow: auto; height: auto; position: sticky; width: 70%; height: 100%; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .pictures{ overflow: auto; height: auto; width: 30%; margin: 0.5vh; margin-top: 0; height: 100%; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; border-left: none; } } @page { size: A5; margin-top: 5mm; margin-bottom: 5mm; margin-left: 10mm; margin-right: 5mm; } */ @media screen and (max-width: 1000px) { .container{ display: initial; } .info { display: block; height: auto; width: 100%; } .pictures{ display: block; height: auto; width: 100%; } .vertical_line { border-top: 2.5px solid red; border-left: 0; margin-top: 1.5vh; margin-bottom: 1.5vh; } .horizontal_line{ margin-top: 1.5vh; margin-bottom: 1.5vh; } img { margin-top: 1.5vh; } h1 { margin: 0; margin-left: 5vw; margin-top: 3vh; margin-bottom: 3vh; font-family: syne-italic; font-size: 12.5vw; line-height: 13.5vw; color: #2e1d69; } h2 { font-size: 4vw; margin: 0; margin-left: 5vw; margin-top: 0; text-decoration: underline; font-family: Fluxisch; line-height: 25pt; color: #2e1d69; } p{ text-indent: 2em; font-family: Fluxisch; font-size: 4vw; margin-left: 4.5vw; margin-right: 4.5vw; line-height: 4.4vw; color: #2e1d69; } }