/*layout*/
@font-face {
	font-family: 'Penthouse';
	src: url(penthouse-web.woff);
}

@font-face {
	font-family: 'Anglo';
	src: url(anglo.woff);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

::selection {
	background-color: magenta;
}

main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	height: 100vh;
}

section{
	 overflow-y: scroll;
}

section::-webkit-scrollbar {
  display: none;
}

section > *{
 width: 100%;
 /*padding: 0px 5px;*/
}

a > img {
	width: 100%;
}

img {
	vertical-align: top;
}

video {
	vertical-align: top;
}

.left {
	padding: 35px;

}

aside#others {
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    padding: 40px;
}

#collaborations {
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 20px;
}

#collaborations h3{
	color: whitesmoke;
}

.collab {
	margin-bottom: 20px;
	border-top: whitesmoke dashed 2px;
}

.collab img {
	width: 100%;
	margin: 15px 0;
}

.collab p{
	color: whitesmoke;
}

.project {
	/*border-top: .5px solid black;*/
	padding-top: 5px;
	margin: 15px 0 50px 0; 
}

.project p, 
ul {
	margin-top: 15px;
}


#people, .comingsoon, #news {
	border-top: .5px solid black;
	padding-top: 5px;
	margin-top: 15px
}

#people ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.nutritionfacts{
	/*display: flex;
	justify-content: space-between;*/

	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
}

.year {
	font-weight: bold;
	margin-top: 10px;
	text-align: right;
}

#pfp{
	display: none;
	object-fit: cover;
    height: 100vh;
}

#info {
	display: none;
}

nav {
	position: fixed;
	bottom: 20px;
	left: 20px;
	display: flex;
	justify-content: space-around;
	padding-right: 20px;
	width: 100%;
	z-index: 10;
}

#btn, #btn2{
	background-color: white;
	border-radius: 50%;
	padding: 10px;
	cursor: pointer;
	transition: color .3s, background-color .3s;
}

#btn:hover,
#btn2:hover {
	background-color: magenta;
	color: white;
}

/*typography*/
body, h1, h2, h3 {
font-size: 16px;
font-weight: normal;
}

.new-burst {
	display: inline-block;
	height: 40px;
	vertical-align: middle;
}

a {
	text-decoration: none;
	color: black;
	transition: .3s color ease-out;
}

a:hover {
	color: magenta;
}

a::before {
content: "→ ";
color: magenta;
}

a.big-link::before {
    content: '';
}

a.big-link:hover {
background: magenta;
color: white;
}

a.big-link {
    border: magenta 1px dashed;
    border-radius: 25px;
    padding: 10px 20px;
    margin: 20px auto;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
}

aside a {
    color: magenta;
}

.project > a::before {
	content: "";
}

.right div > a::before {
	content: "";
}

#people a::before{
	content: "☻ ";
}

#people li{
	list-style: none;
}

#people{
	margin-bottom: 40px;
}

/* project tabs*/

/* 2022 */

/* 2021 */

/* 2020 */

/* collaborations */

#pj-grammys, #grammys,
#pj-lms, #lms {
background-color: mediumpurple;
}

#pj-lagbath,
#liquidator, #pj-liquidator,
#pj-shy, #shy {
background-color: lime;
}
	
#pj-twobridges,
#pj-paparazzi,
#pj-kokito {
background-color: lightgoldenrodyellow;
}

#pj-chilleando,

#pj-rand{
background-color: darkseagreen;
}

#pj-acting, #method-acting,
#pj-penthouse, #penthouse,
#pj-stereo {
background-color: gold;
}

#fulanita, #pj-fulanita,
#pj-girl6 {
background-color: tomato;
}

#nothingimportant, #pj-nothingimportant,
#pj-immaterial, #immaterial,
#pj-luddite{
background-color: thistle;
}

#superficialerrata, #pj-errata,
#pj-mechanicalbull,
#pj-clay, #clay {
background-color: tan;
}


#anglo, #pj-anglo,
#pj-smile {
background-color: aliceblue;
}

/* #pj-wendys, #wendys {
background-color: olive;
} */

/* custom one offs  */
img.logo{
	padding: 20px;
}

img#ludd-book {
	padding: 30vh 0;
    background: black;
}

p#pent {
	width: 100%;
	height: 100vh;
	font-size: 85px;
	line-height: .9;
	letter-spacing: -2px;
	font-family: 'Penthouse';
	text-align: center;
	padding: 20px;
}

p#ang {
	width: 100%;
	height: 100vh;
	font-size: 40px;
	line-height: .9;
	letter-spacing: -2px;
	font-family: 'Anglo';
	text-align: center;
	padding: 20px;
}

@media screen and (max-width: 600px) {
	main{
		display: block;
	}

	.left {
		padding: 30px;
	}
}