@font-face{
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 300;
	src: local("JetBrains Mono"), local("JetBrainsMono-Regular"), url("webfonts/JetBrainsMono-Regular.woff2") format("woff2");
  }

:root {
    /* Background and text color */
    --background:#eaeaea;
    --color:#252525;
    
    /* "Table" borders */
    --borderstyle: 1.3px solid var(--bordercolor);
    --bordercolor:#000000;
    
    /* Container */
    --container:#cacaca;
    
    /* Header */
    --header:#ffffff7b;
    --headercolor:#ee0000;

    /* Sidebar */
    --sidebar:#eaeaea;
    --sidebarlink:#0000db;
    --sidebarlinkhover:#1010f0;
    
    /* Main content */
    --main:#eaeaea;
    --link:#0000db;
    --linkhover:#1010f0;
    --linkvisited:#83049d;
    --altlinkhover: #d70000; 
    
    /* Footer */
    --footer:#eaeaea;
    --footercolor:#05104c;
    --footerlink:#2a2ad3;
    --footerlinkhover:#3a3aff;
}

* { margin:0; padding:0; }

img {
    max-width:95%;
}

body {
	background-image: url('imgs/Thomae_function_\(0\,1\).png');
	color:var(--color);
    font:1.15rem 'Times New Roman', serif;
    line-height:1.3;
}

/* Skip to content link - do not remove */

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--main);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

/* Header */

header {
    flex: 1 1 calc(100% - 6px);
    text-align:center;
    margin:2.7px;
	border:var(--borderstyle);
    background:var(--header);
    font-size:2.5em;
}

header a, header a:visited {
    color:var(--headercolor);
}

header a:hover, header a:focus {
    color:var(--headerhover);
}

/* Container */

#container {
	max-width:800px;
    width: 90%;
	background:var(--container);
	border:var(--borderstyle);
	margin:20px auto;
    display:flex;
    flex-wrap:wrap;
}



/* Footer */

footer {
    flex: 1 1 calc(100% - 20px);
    border: var(--borderstyle);
    padding:1px;
    margin:2.7px;
    text-align:center;
    color:var(--footercolor);
    background:var(--footer);
    font: 1em 'JetBrains Mono';
}

footer a, footer a:visited {
    color:var(--footerlink);
}

footer a:hover, footer a:focus {
    color:var(--footerlinkhover);
}

#menu {
	padding:10px;
    border: var(--borderstyle);
    flex: 1 1 calc(20% - 23px);
    background:var(--sidebar);
    margin:0 0 0 3px;
}

#menu ul {
    list-style:none;
    font-size:1.6rem;
    line-height:1.2;
}

#menu li {
    display:block;
    margin:.2em;
}

#menu li a, #menu li a:visited {
    color:var(--sidebarlink);
}

#menu li a:hover, #menu li a:focus {
    color:var(--sidebarlinkhover);
}

/* Content */

main {
	padding:10px;
    flex: 1 1 calc(80% - 40px);
    border: var(--borderstyle);
    margin: 0 3px;
    text-align: left;
    background: var(--main);
}

main a {
	color:var(--link);
}

main a:visited {
    color:var(--linkvisited);
}

main a:hover, main a:focus {
    color:var(--linkhover);
}

main h1 {
    font-size:2em;
}

main h2 {
    font-size:1.7em;
}

main h3 {
    font-size:1.4em;
}

main h4 {
    font-size:1.1em;
}

main ul {
    margin-left:30px;
}

main ul li {
    margin-bottom:.2em;
}

p {
	margin:0.5em 0px 0.5em 0px;
}

main input, textarea, select, button {
    background: var(--main);
    color: var(--color);
    border:.9px solid;
    font:.75em 'JetBrains Mono';
    padding:6px;
}

main input[type="submit"]:hover, main input[type="submit"]:focus, main button:hover, main button:focus {
    color: var(--altlinkhover);
}


@media screen and (max-width:800px) {
    #menu {
        flex: 1 1 calc(100% - 20px);
        text-align:center;
        margin: 0 3px 3px 3px;
    }
    
    #menu li {
        display:inline-block;
    }
    
    #content {
        flex: 1 1 calc(100% - 20px);
    }
}