@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@300;400;500;600&display=swap');

@media (prefers-color-scheme: dark) {

	/* dark theme */
}

a[href] {
    text-decoration: none;
    color: var(--color-link);
    font-weight: 500;
}

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

html {
    background-color: var(--color-accent);
}

/* https://stackoverflow.com/questions/18168286/how-can-i-style-external-links-like-wikipedia */
a[href^="https://"]:not(:has(img, div)):after,
a[href^="http://"]:not(:has(img, div)):after {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 5px;
    vertical-align: 0.0em;

    /* Color follows the link (normal/visited/hover) */
    background-color: currentColor;

    -webkit-mask: url("/icons/External.svg") no-repeat center / contain;
            mask: url("/icons/External.svg") no-repeat center / contain;
}

body, html { 
	margin: 0px !important;
    padding: 0px !important;
	scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
	font-family: 'Roboto Mono', monospace;
	font-size: calc(20 *1rem/16);
	font-weight: 300;
    text-indent: 0px;
}

h2, h3, h4 {
	font-family: 'Roboto', sans-serif;
	text-align: left;
	line-height: calc(5 *1rem/16);
	font-weight: 500;
    text-indent: 0px;
    padding-top: calc(30 *1rem/16);
}

h2 {
	font-size: calc(30 *1rem/16);
    margin-bottom: 20px;
    line-height: calc(5 *1rem/16);
}

h3, h4 {
    font-size: calc(20 *1rem/16);
    margin-bottom: 5px;
    font-weight: 400;
}

h4 {
    font-weight: 500;
    font-size: calc(20 *1rem/16);
}

ul {
    list-style-type: square;
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
    font-size: calc(18 *1rem/16);
    line-height: 30px;
}

/* 
 * hack to get the simplified mode thingy to go away on chrome mobile 
 * man i hate mobile
 *
 * Maybe actually change this back to normal paragraphs
 */
.p {
	/*text-indent: 30px;*/
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 30px;
	padding-top: 10px;
    padding-bottom: 10px;
	font-weight: 400;
    text-align: left;
    margin: auto;
}

img, video {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;

    object-fit: contain;
    border: 1px solid var(--color-accent);
}

hr {
	background-color: #000000;
	width: 180px;
	height: 1px;
	border-width: 0;
    margin-bottom: 15px;
    margin-left: 0px;
    padding-left: 0px;
}

#top-bar-template {
	width: 100%;
}

.mainbg {
    width:100%;
    background-color: var(--color-background-alt);
    padding-top: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main {
	padding-top: var(--bar-height);
	padding-bottom: calc(60 *1rem/16);
    padding-left:  min(calc(var(--paper-width)/8.5), 100vw/8.5);
    padding-right: min(calc(var(--paper-width)/8.5), 100vw/8.5);
	/*width: 80%;*/
	/*min-width: 400px;*/
	margin: auto;
    width: min(var(--paper-width), 100vw);
    background-color: var(--color-background-light);
    flex-grow: 1;
    box-sizing: border-box;
    border-left: 1px solid var(--color-accent);
    border-right: 1px solid var(--color-accent);
}

.caption {
	font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.flex-row-item {
    width: 50%;
}

@media (max-width: 1000px) {
    .flex-row-item img, .flex-row-item video {
        width: calc(50%-var(--paper-width)/200%);
        height: auto;
        margin-left: 0;
    }

    .flex-row {
        justify-content: center;
        flex-direction: column;
        align-items: left;
    }

    .flex-row-item {
        width: 100%;
    }
}

#hello h2 {
    line-height: 1.25em;
    font-size: calc(35 *1rem/16);
    margin-top: 0px;
	font-weight: 400;
}

.pdfembed {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: min(100%, calc(var(--paper-width)/2));
    padding-top: 10px;
}

canvas {
    border-width: 1px;
    border-color: var(--color-accent);
    border-style: solid;
}