/* main content */

@font-face {
	font-family: Monaco;
	src: url('fonts/Monaco.ttf');
}

body {
	color:white;
	font-family: Monaco;
	background:black;
	font-size:15px;
	line-height: 160%;
	
}

img{
	width:auto;
	height:auto;
	max-width:100%;
}

a:visited {
	color:#8282e0;
}

a{    
	color: #bbbbf2;	
}

h1{
    line-height: 150%;
}

footer{
	font-size: 0.6em;
    color: darkgrey;
}

#contain{
    padding:3vw;
	flex:1;
}

.content{
    margin-left:18%;
    padding-left:2.5vw;
	width:50%;
}

/* end main content */

/* light mode */

@media (prefers-color-scheme: light) { /* bro why... */
    body {
      background-color: #fff;
      color: #000;
    }
	
    a {
		color:#0022ff;
    }
	
	a:visited {
		color:#0022ff;
	}
	
	footer{
		font-size: 0.5em;
		color: lightgrey;
	}
}

/* end light mode */

/* images and media */

.figure-container {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
	margin: 0 0 20px 0;
}

.figure-container figure {
    flex: 1;
    margin: 0;
    text-align: center;
}

.figure-container img {
    width: 100%;
    height: auto;
    display: block;
}

figcaption {
    font-size: 0.9em;
    color: grey;
    margin-top: 0.5em;
}
  
.image-left {
      float: left;
      width: 45%;
      margin: 0 20px 20px 0;
    }
	
.image-right {
	float: right;
	width: 45%;
	margin: 0 0 20px 20px;
}

embed {
	width:100%;
	min-height:45vh;	
}

/* end images and media */

/* images and embed on mobile */

@media (max-width: 599px) {
    .figure-container {
        flex-direction: column;
    }
    .content{
        margin-left:2%;
        padding-left:2.5vw;
        width:90%;
		min-height: 98dvh;
    }
    .image-left,
    .image-right {
        float:none;
        width:100%;
        margin:0 0 20px 0;
    }
    embed {
        width:100%;
        min-height:25vh;
    }
}

/* end images and embed on mobile */



.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
/* accessibility */