body,html{width:100%; height:100%; margin:0; padding:0; font:1rem "Computer Modern", sans-serif}
.container{position:relative; display:flex; justify-content:center}
.small-container{display:flex; flex-direction:column}
header,main,aside,footer{padding:10px}
header{display:flex; position:sticky; top:0; z-index:1; background-color:white; text-transform:lowercase}
header ul li{margin-top:0.4rem}
main{width:450px; text-align:justify}
aside{width:450px; text-align:justify}
aside img{display:block}
img:hover{transform:scale(1.02)}

.title{font-style:italic; font-weight:bold}
.math{white-space:nowrap}

.scroll-top{position:absolute; top:120vh; bottom:1rem; right:1rem}
.scroll-top__link{position:-webkit-sticky; position:sticky; top:90vh; font-size:1rem}

a{text-decoration:underline; color:black}
a:hover{color:#df031d}
h1{font-size:1.8rem; text-transform:lowercase}
h1:hover{color:#df031d; cursor:help}
ul{list-style-type:none; padding:0}
table{border:1px solid black}
th{border-bottom:1px solid black}

#guyimg{width:50px; height:50px; background-image:url('images/guy2.gif'); background-size:cover}
#guyimg:hover{background-image:url('images/rguy2.gif'); cursor:pointer}
#guyimg:hover a{color:red}

@media(max-width:1080px){
    .container{flex-direction:column; align-items:center}
    header, main, aside{width:90%; max-width:450px}
    main,aside{order:1}
    .math{white-space:normal}
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Bold.woff2') format('woff2'),
        url('fonts/IBMPlexMono-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Italic.woff2') format('woff2'),
        url('fonts/IBMPlexMono-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-BoldItalic.woff2') format('woff2'),
        url('fonts/IBMPlexMono-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'),
        url('fonts/IBMPlexMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'Computer Modern';
    src: url('fonts/cmunss.woff2'),
	 url('font/cmunss.woff');
    font-display: swap;
}
@font-face{
    font-family: 'Computer Modern';
    src: url('fonts/cmunsx.woff2'),
	 url('font/cmuns.woff');
    font-weight: bold;
    font-display: swap;
}
@font-face{
    font-family: 'Computer Modern';
    src: url('fonts/cmunsi.woff2'),
	 url('font/cmunsi.woff');
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Computer Modern';
    src: url('fonts/cmunso.woff2'),
	 url('font/cmunso.woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}