/* colors */
:root {
--dark: rgb(1,1,5);
--darkshadow: rgba(2,2,2,.5);
--light: rgba(247,247,247,1);
--lightshadow: rgba(247,247,247,.3);
--primary1: rgba(115,33,0, 1);
--primary1shadow: rgba(115,33,0,.3);
--primary2: rgba(2,43,74,1);
--primary2shadow: rgba(2,43,74,.3);
--bright1: rgba(168,48,0,1);
--bright1shadow: rgba(168,48,0,.3);
--bright2: rgba(5,64,108,1);
--bright2shadow: rgba(5,64,108,.3);
--highlight: rgba(168,126,0,1);
--dark1: rgba(54,15,0,1);
--dark2: rgba(1,20,35,1);
}

* {
	font-family: "Source Serif 4", serif;
}
html {
	background-color: var(--light);
	color: var(--dark);
}

a, a:active, a:visited {
	color: var(--highlight);
	padding: .2em .5em;
	text-shadow: 0 0 10px var(--dark);
	background-color: var(--darkshadow);
	border-radius: 10%;
	font-weight: 600;
}
body {
	padding: 1em;
	font-weight: 400;
	background-color: var(--dark);
opacity: 0.9;
background-image: linear-gradient(var(--dark2), var(--dark));
/*background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #f7f7f7 9px ), repeating-linear-gradient( #e2e2e255, #e2e2e2 );*/
	width: 100vw;
	height: 100vh;
}

div.container::before {
  content: url('logo.svg');
  position: absolute;
  width: 80vw;
  background: transparent;
  z-index: -1;
  mix-blend-mode: overlay;
  opacity: 30%;
}
div.container {
	
	display: inline-block;
	justify-content: space-evenly;
	align-items: flex-start;
}
div.content {
	width: 30vw;
	height: 30vw;
	padding: 1em;
	margin: 0 3em 3em 0;
	

}

div.detail {
    display: inline-block;
    vertical-align: top;
    width: 50vw;
    color: var(--light);
    padding: 2em;
    border: 1px solid var(--light);
    background-color: var(--lightshadow);
}
h1,h2,h3 {
    font-family: "Roboto Mono", san-serif;
}
h2 {
	font-size: 1.8em;
	color: var(--highlight);
	font-weight: 600;
}
h3 {
	font-size: 1.5em;
	font-weight: 600;
	margin-bottom: 0;
}
h4 {
	font-size: 1.2em;
	font-weight: 600;
	margin: 0;
	padding: 0;
    background: var(--darkshadow);
    padding-left: .2em;
}

.bright1 {
	color: var(--bright1);
}
.brightbox1 {
	background-color: var(--bright1shadow);
	color: var(--light);
	/*-webkit-box-shadow: 5px 5px 5px 2px var(--bright1);
    box-shadow: 5px 5px 5px 2px var(--bright1);*/
    border: solid 2px var(--bright1);
    position: relative;

}

.brightbox1::before {
  content: url('crescent-left.svg');
  position: absolute;
  top: .5em;
  right: .5em;
  width: 2em;
  height: 2em;
  background: transparent;
  filter: invert(100%);
  mix-blend-mode: soft-light;
  z-index: 1;
  
}
  
.brightbox1 h3 {
	color: var(--bright1);
	text-shadow: 5px 5px 5px var(--primary1shadow);
}
.brightbox1 h4 {
	color: var(--bright1);
}

.bright2 {
	color: var(--bright2);
}
.brightbox2 {
	background-color: var(--bright2shadow);
	color: var(--light);
	/*-webkit-box-shadow: 5px 5px 5px 2px var(--bright2);
    box-shadow: 5px 5px 5px 2px var(--bright2);*/
    border: solid 2px var(--bright2);
    position: relative;
}

.brightbox2::before {
  content: url('crescent-right.svg');
  position: absolute;
  top: .5em;
  right: .5em;
  width: 2em;
  height: 2em;
  background: transparent;
  filter: invert(100%);
  mix-blend-mode: soft-light;
  z-index: 1;
}
  
.brightbox2 h3 {
	color: var(--bright2);
	text-shadow: 5px 5px 5px var(--primary2shadow);
}
.brightbox2 h4 {
	color: var(--bright2);
    
}