@charset "UTF-8";


/* ===== fullpage.js bits, uncss'ed ===== */
.fp-enabled body,html.fp-enabled{margin:0;padding:0;overflow:hidden;-webkit-tap-highlight-color:transparent}.fp-section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fp-section.fp-table{display:table;table-layout:fixed;width:100%}.fp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}
/*.fp-controlArrow.fp-next{right: 15px;border-width: 18.5px 0 18.5px 14px;border-color: transparent transparent transparent #fff;}
.fp-controlArrow.fp-prev{left: 15px; border-width: 18.5px 14px 18.5px 0; border-color: transparent #fff transparent transparent;}*/



html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	color: #ccc;
	background: #111;
}

.this-color {
	color: rgba(176,252,195,1);
}

.bg-this-color {
	background-color: rgba(176,252,195,1);
;
}


.maroon {
	color: maroon;
}

.bg-maroon {
	background-color: maroon;
}


.pen-blue {
	color: #3351c4;
}


.voice-font {
	font-family: "Barlow Semi Condensed", "Trebuchet MS", Helvetica, sans-serif;
}

.head-font {
	font-family: "Inconsolata", Monaco, monospace;
}

.lh-tight {
	line-height: 0.95;
}

.blend-difference {
	mix-blend-mode: color-dodge;
}

.pointer:focus {
	cursor: pointer;
}

.z--1 {
	z-index: -1;
}
.z--2 {
	z-index: -2;
}

.h0 {
	height: 0;
}

.top--20 {
	top: -20%;
}

.crosshair {
	cursor: crosshair;
}

.scanline {
	__background: transparent url(img/scanline.gif) repeat top left;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEElEQVQImWNgYGBIw4KpDgC5rwH/8DuPGAAAAABJRU5ErkJggg==) repeat;
	mix-blend-mode: overlay;
}

.of-cover {
	object-fit: cover;
}

.video-content {
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-position: center center;
}

.text-shadow-11 {
	text-shadow: 2px 2px 0.1em white;
}

.text-shadow-1-black {
	text-shadow: 2px 2px 0.1em rgba(0,0,0,0.5);
}

code {
	font-family: "Inconsolata", Monaco, monospace;
}

abbr[title] {
	text-decoration: none;
}


.active.down, .active.up, .next.down, .prev.up {
    animation-name: fadeIn;
    animation-fill-mode: backwards;
    animation-duration: 0.4s;
    animation-timing-function: ease-in;
}

.next.up, .prev.down {
    animation-name: fadeOut;
    animation-duration: 0.4s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}


.nofade.active.down, .nofade.active.up, .nofade.next.up, .nofade.prev.down {
	animation : none;
	animation-name : none;
}

.darthFadeIn {
    animation-name: fadeIn;
    animation-fill-mode: backwards;
    animation-duration: 0.20s;
    animation-timing-function: ease-in;
    __animation-delay: 0.10s;
}

.darthFadeOut {
    animation-name: fadeOut;
    animation-duration: 0.20s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

#hinthint {
	animation-name: bubbaboo;
	animation-duration: 10s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

/*
#sect1 {
	animation-name: boxup;
	animation-duration: 4s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
*/
.slideUpFaked {
	animation-name: boxup;
	animation-delay: 0.25s;
	animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

#pane1 {
	animation-name: boxup1;
	animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;	
}


.section {
	height: 100vh;

}


.section.mindlessness {
	background: linear-gradient(45deg, rgba(9, 9, 9, 0.7), rgba(18, 18, 18, 0.7)), 
	#555 url(img/static-2.gif) center center;
	background-size: cover;
}

#d-hello {
	background: -moz-linear-gradient(to right bottom, #071048, #004b84, #0087a8, #2fc3b8, #b0fcc3);
	background: -webkit-linear-gradient(to right bottom, #071048, #004b84, #0087a8, #2fc3b8, #b0fcc3);
	background-image: linear-gradient(to right bottom, #071048, #004b84, #0087a8, #2fc3b8, #b0fcc3);
}

#d-bio {
	background: 
	#f9f7f6
	url(img/paper.jpg) no-repeat bottom right;
	background-size: cover;
}

.the-mess {
	background: transparent url(img/bio-messy.png) center center;
	width: 100%;
	height: 0;
	padding-bottom: 14.5%; /* height of image divided by width */
}

#d-about-me {
	background: 
	linear-gradient(32deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
	url(img/aboutme-metacarpal_s.jpg) no-repeat bottom right;
	background-size: cover;
}
#d-about-me.active {
	background: 
	linear-gradient(32deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
	url(img/aboutme-metacarpal.jpg) no-repeat bottom right,
	linear-gradient(32deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
	url(img/aboutme-metacarpal_s.jpg) no-repeat bottom right;
	background-size: cover;
}


#d-design-school {
	background: #eeeeee url(img/designschool-pencil.jpg) no-repeat top center;
}



#d-advertising {
	background: 
	linear-gradient(32deg, rgba(8, 8, 8, 0.1), rgba(16, 16, 32, 0.1)),
	url(img/pasir-panjang-road_s.jpg) no-repeat center center;
	background-size: cover;
}
#d-advertising.active {
	background: 
	linear-gradient(32deg, rgba(8, 8, 8, 0.1), rgba(16, 16, 32, 0.1)),
	url(img/pasir-panjang-road.jpg) no-repeat center center,
	url(img/pasir-panjang-road_s.jpg) no-repeat center center;
	background-size: cover;
}


#d-coffee {
	background: 
	linear-gradient(45deg, rgba(8, 8, 8, 0.3), rgba(16, 16, 16, 0.3)),
	url(img/coffee-tbb.jpg) no-repeat center right;
	background-size: cover;
}


#d-email {
	background: 
	linear-gradient(180deg, rgba(8, 8, 8, 0.5), rgba(8, 8, 8, 0.5)),
	url(img/inbox-email.gif) repeat center center;
}

#d-email_o {
	background: 
	linear-gradient(2deg, rgba(8, 8, 8, 0.6), rgba(16, 32, 48, 0.8)),
	url(img/email-consult.jpg) no-repeat top center,
	url(img/email-consult_s.jpg) no-repeat top center;
	background-size: cover;
}


#d-linkedin {
	background-color: #f5f5f5;
}



#d-unfunny {
	background: #111;
}

#d-observer {
	background: #e9e9a1	url(img/talk-daria.png) no-repeat bottom right;
	background-size: auto 40%;
}


#d-intentionally-blank, #d-intentionally-pageleft, #d-intentionally-blanks, #d-intentionally-intent, #d-intentionally-quiet, #d-intentionally-tense {
	background: #fdfdfd url(img/intentionally-paper.jpg) no-repeat top right;
	background-size: auto 100%;
}


#d-my-weblog {
	background: #202040;
}
#d-my-weblog.active {
	background: #202040 url(img/blog-flamesbackground.gif) repeat center center;
}

#d-spam {
	background: 
	linear-gradient(45deg, rgba(20, 20, 20, 0.4), rgba(22, 22, 22, 0.4)),
	url(img/spam-wall_s.jpg) no-repeat bottom center;
	background-size: cover;
}

#d-spam.active {
	background: 
	linear-gradient(45deg, rgba(20, 20, 20, 0.4), rgba(22, 22, 22, 0.4)),
	url(img/spam-wall.jpg) no-repeat bottom center;
	background-size: cover;
}



#d-exit-report {
	background: #c2c1fd;
}

#d-exit-report .buttOK {
	right: 6%;
	bottom: 12%;
	width: 17%;
	height: 12.5%;
}


#d-asteroids.mindlessness {
	background: linear-gradient(32deg, rgba(9, 9, 9, 0.74), rgba(18, 18, 18, 0.74)), 
	url(img/asteroids-attack.gif) no-repeat center center;
	background-size: cover;
}


#d-brekkie {
	background: linear-gradient(180deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/breakfast-punch_s.jpg) no-repeat center center;
	background-size: cover;
}
#d-brekkie.active {
	background: linear-gradient(80deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/breakfast-punch.jpg) no-repeat center center;
	background-size: cover;
}


#d-flac {
	background: linear-gradient(32deg, rgba(9, 9, 9, 0.15), rgba(18, 18, 18, 0.5)), 
	url(img/flac-music_s.jpg) no-repeat bottom center;
	background-size: cover;	
}
#d-flac.active {
	background: linear-gradient(32deg, rgba(9, 9, 9, 0.15), rgba(18, 18, 18, 0.5)), 
	url(img/flac-music.jpg) no-repeat bottom center;
	background-size: cover;	
}


#d-slow-down {
	background: linear-gradient(45deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/slowdown-dark-corner_s.jpg) no-repeat center right;
	background-size: cover;	
}
#d-slow-down.active {
	background: linear-gradient(45deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/slowdown-dark-corner.jpg) no-repeat center right;
	background-size: cover;	
}

.bg-hexo {
	background: #1BACF7;
}
.bg-amazon {
	background: #FF9900;
}
.bg-runkeep {
	color: #2DC9D7;
}
.bg-pinterest-scaled {
	background: white; transform: scale(-1,-1);
}


#d-search {
	background-color: #f15e30;
}

.duckframe {
	width: 320px;
}

#d-unnecessary-venn-diagram {
	background: 
	#f9f7f6
	url(img/paper.jpg) no-repeat bottom right;
	background-size: cover;
}

#d-apps {
	background: linear-gradient(32deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/apps-nexuswallpaper_s.jpg) no-repeat center center;
	background-size: cover;	
}
#d-apps.active {
	background: linear-gradient(32deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/apps-nexuswallpaper.jpg) no-repeat center center;
	background-size: cover;	
}


#d-90s {
	background: linear-gradient(45deg, rgba(9, 9, 9, 0.7), rgba(9, 9, 9, 0.7)), 
	url(img/90s-crap.gif) no-repeat 25% 70%, #555 url(img/static-2.gif) center center;
	background-size: contain;	
}


#d-booklist {
	background: linear-gradient(45deg, rgba(9, 9, 9, 0.6), rgba(18, 18, 18, 0.6)), 
	url(img/acquisition-crap_s.jpg) no-repeat center left;
	background-size: cover;	
}
#d-booklist.active {
	background: linear-gradient(45deg, rgba(9, 9, 9, 0.6), rgba(18, 18, 18, 0.6)), 
	url(img/acquisition-crap.jpg) no-repeat center left;
	background-size: cover;	
}

#d-inbox {
	background: linear-gradient(45deg, rgba(9, 9, 9, 0.8), rgba(18, 18, 18, 0.8)), 
	url(img/inbox-email.gif) no-repeat right bottom, #555 url(img/static-2.gif) center center;
	background-size: contain;		
}


#d-cheat {
	background: linear-gradient(32deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/cheat-mudskipper_s.jpg) no-repeat center left;
	background-size: cover;	
}
#d-cheat.active {
	background: linear-gradient(32deg, rgba(9, 9, 9, 0.5), rgba(18, 18, 18, 0.5)), 
	url(img/cheat-mudskipper.jpg) no-repeat center left;
	background-size: cover;	
}


#d-openbook {
	background: 
	url(img/book-eternalsunshine.jpg) no-repeat bottom center;
	background-size: cover;
}

#d-clementine {
	background: 
	url(../img/clementine-book.jpg) no-repeat bottom center;
	background-size: cover;
}


/* not small indulgences */
@media screen and (min-width: 30em) {

	/* The animation code */
	@keyframes fadeIn {
	    from { opacity: 0.01; }
	    to { opacity: 1; }
	}

	@keyframes fadeOut {
	    from { opacity: 1; }
	    to { opacity: 0.01; }
	}

}


/* Batshit boring arrow animation */

@keyframes bubbaboo {
	from {
		transform: translate3d(0,-0.75rem,0);
		opacity: 0;
	}
	2% {
		transform: translate3d(0,-0.25rem,0);
		opacity: 1;
	}
	5% {
		transform: translate3d(0,0,0);
	}
	95% {
		transform: translate3d(0,0,0);
	}
	98% {
		transform: translate3d(0,0.5rem,0);
		opacity: 1;
	}
	to {
		transform: translate3d(0,1.5rem,0);
		opacity: 0;
	}
}



@keyframes boxup {
	from {
		transform: translate3d(0,0,0);
	}
	35% {
		transform: translate3d(0,0,0);
	}
	70% {
		transform: translate3d(0,-20%,0);
	}
	to {
		transform: translate3d(0,-450%,0);
	}
}

@keyframes boxup1 {
	from {
		margin-top: 0;
	}
	35% {
		margin-top: 0;
	}
	70% {
		margin-top: -2.25rem;
	}
	to {
		margin-top: -2.25rem;
	}
}

@keyframes reveal {
	from {
		clip-path: polygon(0% 0%, 100% 0%, 100% 1%, 0% 1%);
	}
	to {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}