:root {
    --bg:      #021B21;
    --black:   #032C36; /*"black"*/
    --red:     #C2454E; /*"red"*/
    --green:   #7CBF9E; /*"green"*/
    --yellow:  #8A7A63; /*"yellow/brown"*/
    --blue:    #2E3340; /*"dark blue"*/
    --magenta: #FF5879; /*"red/pink"*/
    --cyan:    #44B5B1; /*"lightblue/teal/cyan"*/
    --white:   #F2F1B9; /*"yellow/white"*/

    --fg:      #E8DfD6;

    --color4b: #61778DCC;
}
/*
ColorBG:    #021B21
Color0:     #032C36 "black"
Color1:     #C2454E "red"
Color2:     #7CBF9E "green"
Color3:     #8A7A63 "yellow/brown"
Color4:     #2E3340 "dark blue"
Color5:     #FF5879 "red/pink"
Color6:     #44B5B1 "lightblue/teal/cyan"
Color7:     #F2F1B9 "yellow/white"

ColorFG:    #E8DfD6
Color0B:    #065F73
Color1B:    #Ef5847
Color2B:    #A2D9B1
Color3B:    #BEB090
Color4B:    #61778D
Color5B:    #FF99A1
Color6B:    #9ED9D8
Color7B:    #F6F6C9
*/


body {
	background-color: var(--bg);
	text-align: center;
	color: var(--fg);
}
video {

}
.banner {
	margin: 2em;
}
#services li {
	display: inline-block;
	margin: 0 0.25em;
}
.half-frame {
	display: inline-block;
	width: 45%;
	vertical-align: top;
	height: 525px;
	/* background-color: var(--bg); */
	/* background-blend-mode: color-burn; */
	/* background-image: url("https://libri.metacomplex.ca/static/images/tile/funky-lines.png"); */
	margin-bottom: 2em;
}
.half-frame iframe {
	height: 100%;
	width: 80%;
}

.link *:visited, .link a {
	color: inherit;
}

.link img {
	width: 50px;
	height: 50px;
	filter: grayscale(1);
	transition: 0.25s;
}
#links img:hover {
	filter: none;
}

#links {
	background-color: var(--bg);
	background-blend-mode: color-burn;
	background-image: url("https://libri.metacomplex.ca/static/images/tile/funky-lines.png");
	height: 100%;
	width: 80%;
	border: 2px solid var(--green);
	box-sizing: border-box;
	margin: 0.5em;
	box-shadow: 8px 8px 0px 0px var(--black);
}

li {
	min-height: 0.5em;
}

.link {
	transition: 0.25s;
	min-width: 80px;
}

.link > div {
	display: flex;
	flex-direction: column;
}

#services {
	margin: 0 auto;
}

#services li {
	vertical-align: top;
}

.link1:hover { background-color: var(--red);     color: var(--bg); }
.link2:hover { background-color: var(--green);   color: var(--bg); }
.link3:hover { background-color: var(--yellow);  color: var(--bg); }
.link4:hover { background-color: var(--blue);    color: var(--bg); }
.link5:hover { background-color: var(--magenta); color: var(--bg); }
.link6:hover { background-color: var(--cyan);    color: var(--bg); }
.link7:hover { background-color: var(--white);   color: var(--bg); }
.link8:hover { background-color: var(--black);   color: var(--bg); }

.link1, .link1 { color: var(--red);     } .link1 a { text-decoration: none; }
.link2, .link2 { color: var(--green);   } .link2 a { text-decoration: none; }
.link3, .link3 { color: var(--yellow);  } .link3 a { text-decoration: none; }
.link4, .link4 { color: var(--blue);    } .link4 a { text-decoration: none; }
.link5, .link5 { color: var(--magenta); } .link5 a { text-decoration: none; }
.link6, .link6 { color: var(--cyan);    } .link6 a { text-decoration: none; }
.link7, .link7 { color: var(--white);   } .link7 a { text-decoration: none; }
.link8, .link8 { color: var(--black);   } .link8 a { text-decoration: none; }

.link1 { border-radius: 4px; box-shadow: var(--red) 0px 0px 4px 1px; }
.link2 { border-radius: 4px; box-shadow: var(--green) 0px 0px 4px 1px; }
.link3 { border-radius: 4px; box-shadow: var(--yellow) 0px 0px 4px 1px; }
.link4 { border-radius: 4px; box-shadow: var(--blue) 0px 0px 4px 1px; }
.link5 { border-radius: 4px; box-shadow: var(--magenta) 0px 0px 4px 1px; }
.link6 { border-radius: 4px; box-shadow: var(--cyan) 0px 0px 4px 1px; }
.link7 { border-radius: 4px; box-shadow: var(--white) 0px 0px 4px 1px; }
.link8 { border-radius: 4px; box-shadow: var(--black) 0px 0px 4px 1px; }

.link1 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--red) 0px 0px 2px 2px; }
.link2 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--green) 0px 0px 2px 2px; }
.link3 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--yellow) 0px 0px 2px 2px; }
.link4 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--blue) 0px 0px 2px 2px; }
.link5 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--magenta) 0px 0px 2px 2px; }
.link6 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--cyan) 0px 0px 2px 2px; }
.link7 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--white) 0px 0px 2px 2px; }
.link8 > div { padding: 0.25em 0.5em; border-radius: 4px; box-shadow: inset var(--black) 0px 0px 2px 2px; }

iframe {
	width: 48%;
	border: 2px solid var(--green);
	box-sizing: border-box;
	margin: 0.5em;
	box-shadow: 8px 8px 0px 0px var(--black);
}

@media screen and (max-width: 950px) {
iframe {
	width: 98%;
}