co* {
    text-decoration: none;
}
        
* {
  box-sizing: border-box;
}

:root {
	--font-family-main: "Roboto";
	--font-family-mono: "Roboto Mono";
	--font-family-narrow: "Roboto Condensed";
	--font-family-main4: "PT Sans";
	--font-family-main3: "Raleway";
	--font-family-main2: "Martian Mono";
	--color-background:#ffffff;
	--color-light1: #ffefff;
	--color-light2: #FFDDCC;
	--color-light3: #eeeeff;
	--color-light4: #ffffde;
	--color-strong: #FF0404;
	--color-main: #111111;
	--color-dark1: #220000;
	--color-dark2: #000055;
	--color-dark3: #005500;
	--color-dark4: #006666;
}

.c1 {
	background-color: var(--color-light1);
	color: var(--color-dark1);
}
.c2 {
	background-color: var(--color-light2);
	color: var(--color-dark2);
}
.c3 {
	background-color: var(--color-light3);
	color: var(--color-dark3);
}
.c4 {
	background-color: var(--color-light4);
	color: var(--color-dark4);
}
.i1 {
	background-color: var(--color-dark1);
	color: var(--color-light1);
}



html {
    height: 100%;
}
body {
    background-color: var(--color-background);
    color: var(--color-main);
    font-family: var(--font-family-main);
    font-weight: 100;
    font-size: 16pt;
    margin: 0px;
    padding: 0px;
    line-height: 135%;
    height: 100%;
}



h1, h2, h3, h4 {
  text-transform: uppercase;
    font-size: 14pt;
	font-weight: 600;
	font-size: 30pt;
	padding-top: 0px;
	margin-top: 0px;
  }

p {
	font-weight: 100;
    margin: 0px;
    padding: 5px 0px 25px 0px;
    font-family: var(--font-family-main);
}


table {
	padding: 10px 0px 10px 0px;
}

td,th,tr {
	font-weight: 100;
    margin: 0px;
    padding-bottom: 21px;
    padding-right: 10px;
    vertical-align: top;
    line-height: 155%;
    border: 0px;
    font-family: var(--font-family-narrow);
}

td.creditYr {
	font-weight: 100;
}

ul {
  list-style-type: none; 
  padding: 0px; 
  padding-left: 0px; 
  padding-bottom: 5px; 
  margin: 0px; 
}

li {
	padding-top: 15px;
}

.tableheading {
	padding-top: 0px;
	font-weight: 800;
}

.credit.title {
	font-weight: 600;
	padding-top: 20px;
}

.recent {
	font-weight: 400;
	xtext-decoration: none;

}

hr {
	margin: 0px 0px 0px 0px;
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-color: var(--color-main);
    padding-bottom: 10px;
}

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

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

a.cat {
	font-weight: 100;
}

a.menu {
  color: var(--color-main-dark);
}

b {
	font-weight: 400;
	color: var(--color-main);
}

.mainbody {
	text-align: left;
	padding: 0px;
	margin: 0px;
}

.maintitle {
	font-weight: 150;
	font-size: 60pt;
	margin: 0px;
	padding: 60px 0px 30px 0px;
	text-align: left;
	width: 100%;
	font-family: var(--font-family-main);
	text-transform: uppercase;
}



/* Top navigation bar */
.topnav {
  overflow: hidden;
  width: 100%;
  text-align: left;
  padding: 0px 0px 30px 0px;
  border-color: var(--color-main);
  color: var(--color-main-dark);
  font-family: var(--font-family-mono);
  text-transform: uppercase;
  font-weight: bold;
}

.menu {
  color: var(--color-main-dark);
    text-decoration: underline;
    padding:  0px 8px 2px 8px;
  }

.menu.selected {
  background-color: var(--color-light4);
  color: var(--color-strong);
}


.row {
	width: 100%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 5px ;
    text-align: left;
}

.header {
	padding: 5px 5px 0px 5px;
}

.cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
 .col {
 }

 .catalog {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 3px;
		font-size: 16px;
		padding-bottom: 25px;
 }

.imagewrap1 {
	display: inline;
}

img.portrait {
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

.blender {
	mix-blend-mode: color-burn;
}
.blender2 {
	
}
.blender2 img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  padding: 0px;
}

/* spotify embeds */
.spot {
	opacity: 0.8;
	height: 100%;
	display: flex;
    align-items: center;
    padding-right: 20px;
}
.spotdark {
	opacity: 0.9;
	height: 100%;
	display: flex;
    align-items: center;
    padding-right: 20px;
}
.spotiframe {
	height: 450;
}
/* wavekit embeds */
.wk {
	height: 100%;
	display: flex;
    align-items: center;
    padding-right: 5px;
}

.portfolio1 {
 padding: 35px;
 background: #FEE;
 margin-bottom: 10px;
}

.foot1 {
	padding: 10px;
}


/* make text bigger for phones */
@media (max-width: 800px) {
	.maintitle{
		font-size: 40px;
		padding-top: 15px;
	}
	.menu {
		font-size: 30px;
	}
	body, p, menu {
		font-size: 20px;
	}


	h1, h2, h3, h4 {
		font-size: 30px;
	}
	.portrait {
		width: 100%;
	}
	.cols{
		grid-template-columns: 1fr;
		gap: 20px;
  	}
	.catalog {
		grid-template-columns: 1fr;
	}
}