attempting-diffraction/brief/style.css

@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;
}


}