@charset "UTF-8";

/* =========================================================
   THEME COLORS (easy to revert)
   - Change these variables to revert/adjust the theme.
   ========================================================= */
:root{
	/* previously: white backgrounds */
	--theme-surface: #ffffff;
	--theme-surface-strong: rgba(255, 255, 255, 0.95);
	--theme-surface-soft: rgba(255, 255, 255, 0.85);
	--theme-surface-overlay: rgba(255, 255, 255, 0.98);
	--theme-on-accent: #FFF;

	/* readable text on light surface */
	--theme-text: #2d2d2d;
	--theme-text-strong: #2d2d2d;
	--theme-border: #2d2d2d;
}

/* ----------------- Reset all styles ----------------- */
*{
	margin:0;
	padding:0;
	border:0;
}

/* Prevent mobile browsers auto-adjusting text sizes */
html{
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ----------------- Website background and general text colour ----------------- */
body{
	background-color: var(--theme-surface);
	color: var(--theme-text);
}


/* ----------------- Wrapper - keeps all content in the center of page -----------------  */
.wrapper{
	margin:auto;
	width:70%;
	height:auto;
}

/* The rest is pretty self explanatory - it appears in the order that it occurs on the HTML document */
.wrapper{
	padding-top: 70px;
	position: relative;
}

#top{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background-color: var(--theme-surface-soft);
	backdrop-filter: blur(8px) saturate(180%);
	-webkit-backdrop-filter: blur(8px) saturate(180%);
	z-index: 1002;
	padding: 10px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
	transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}


#top.scrolled{
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: var(--theme-surface-strong);
}

#top::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100%;
	background-color: transparent;
	z-index: -1;
	margin-left: calc(50% - 50vw);
}

/* Inner container to constrain header content to match wrapper width */
.top-inner {
	width: 70%;
	margin: 0 auto;
	position: relative;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Clear floats inside the header container so it has height */
.top-inner::after{
	content: "";
	display: block;
	clear: both;
}

#logo{
	margin-top:0;
	text-decoration:none;
	overflow: hidden;
	max-width: calc(100% - 50px);
	flex-shrink: 0;
}
#cbp-rfgrid{
	margin-top:5%;

}
#personal_work{
	margin-top:5%;
	margin-bottom:5%;
}

#logoimage{
	width:27px;
	padding-right:10px;
	float:left;
}

#logotitle{
	float:left;
	font-family: montserrat, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 150%;
	margin: 0;
	line-height: 1.2;
}

#logotitle a{
	color: var(--theme-text-strong);
	text-decoration:none;
}

nav{
	width:540px;
	display:block;
	flex-shrink: 0;
	margin-left: auto;
}

/* Hamburger menu button - hidden by default */
.menu-toggle {
	display: none;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1003;
	background: transparent;
	border: none;
	cursor: pointer;
	width: 30px;
	height: 24px;
	padding: 0;
}

.menu-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--theme-text-strong);
	transition: all 0.3s ease;
	border-radius: 2px;
	position: absolute;
	left: 0;
}

.menu-toggle span:nth-child(1) {
	top: 0;
}

.menu-toggle span:nth-child(2) {
	top: 10px;
}

.menu-toggle span:nth-child(3) {
	top: 20px;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	top: 10px;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	top: 10px;
	transform: rotate(-45deg);
}

/* Full-screen overlay menu - hidden by default */
.menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--theme-surface-overlay);
	z-index: 999;
	justify-content: center;
	align-items: flex-start;
	padding-top: 15%;
}


.menu-overlay.active {
	display: flex;
}

.menu-overlay-nav {
	text-align: center;
}

.menu-overlay-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
}

.menu-overlay-nav li {
	margin: 20px 0;
	display: block;
	float: none;
	width: 100%;
}

.menu-overlay-nav a {
	font-family: montserrat, Arial, Helvetica, sans-serif;
	font-size: 32px;
	color: var(--theme-text-strong);
	text-decoration: none;
	display: block;
	padding: 15px 0;
	transition: color 0.3s ease;
}

.menu-overlay-nav a:hover {
	color: #41A0FF;
}

nav ul li{
	display:block;
	width:25%;
	float:left;
	text-align:center;	
}

nav ul li a{
	font-family: montserrat, Helvetica, Arial, sans-serif;
	font-size: 20px;
	width:100%;
	text-decoration:none;
	line-height: 1.2;
	display:block;
	color: var(--theme-text-strong);
}

nav ul li a:hover{
	color:#41A0FF;
}

nav ul li p{
	font-family:Lato, Helvetica, Arial, sans-serif;
	width:90%;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:400;
	line-height:250%;
	display:block;
	color:#41A0FF;
}

hr{
	height:1px;
	width:100%;
	background-color: var(--theme-border);
	margin:3% 0;
}

header{
	width:100%;
	margin:5% 0 5% 0;
}

header h1{
	font-family: Lato, Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:140%;
	font-weight:normal;
	letter-spacing:1px;
	margin-bottom:1%;
}

header h1 span{
	color:#41A0FF;
}

header h2{
	font-family: Lato, Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:100%;
	font-weight:normal;
}
	
#slideshow{
	width:100%;
	height:100%;
	margin-top:6%;
}


/* - - - - - - - - - - - - - - -  Slider START  - - - - - - - - - - - - - - - */

/* Prevent scroll adjustment during carousel transitions */
#slideshow,
#slideshow *,
.html_carousel,
.html_carousel * {
	overflow-anchor: none;
}

.html_carousel div.slide {
	position: relative;
}	
.html_carousel div.slide img {
	width: 100%;
	height: 100%;
	-webkit-box-shadow: 0 1px 1px #c1c1c1;
    -moz-box-shadow: 0 1px 1px #c1c1c1;
    box-shadow: 0 1px 1px #c1c1c1;
	border-radius:3px;
	opacity: 0;
	visibility: hidden;
	animation: slideUp 0.6s ease-out forwards;
}

.clearfix {
	float: none;
	clear: both;
}

/* - - - - - - - - - - - - - - -  Slider END  - - - - - - - - - - - - - - - */

.left{
	margin-top:4%;
	width:48%;
	float:left;
	margin-bottom:2%;
}

.left h3{
	font-family:montserrat, Arial, Helvetica, sans-serif;
	font-size:150%;
	font-weight:normal;
	text-align:center;
	color:#41A0FF;
	margin-bottom:5%;
}

.left p{
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:100%;
	line-height:140%;
	margin-bottom:10%;
}

.left p a{
	color:#41A0FF;
	text-decoration:none;
}
	
.right{
	margin-top:4%;
	width:48%;
	float:right;
	margin-bottom:2%;
}

.right h3{
	font-family:montserrat, Arial, Helvetica, sans-serif;
	font-size:150%;
	font-weight:normal;
	text-align:center;
	color:#41A0FF;
	margin-bottom:5%;
}

.right p{
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:100%;
	line-height:140%;
}

.right p a{
	color:#41A0FF;
	text-decoration:none;
}

/* About/Contact were previously centered via <center> tags */
#about p,
#contact p{
	text-align:center;
}

#about{
	text-align:center;
}

#about .skills-title{
	font-family: montserrat, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 120%;
	color:#41A0FF;
	text-align:center;
	margin: 18px 0 10px;
}

/* Highlight animation for section titles when already in view */
@keyframes highlight-pulse {
	0% { transform: scale(1); color: inherit; }
	50% { transform: scale(1.6); color: #41A0FF; }
	100% { transform: scale(1); color: inherit; }
}

@keyframes particle-fly {
	0% {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
	100% {
		transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y)));
		opacity: 0;
	}
}

.highlight-flash {
	animation: highlight-pulse 0.5s ease;
	position: relative;
}

.highlight-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #41A0FF;
	pointer-events: none;
	z-index: 9999;
	animation: particle-fly var(--duration, 600ms) ease-out forwards;
}

#about .skills-list{
	list-style: disc;
	list-style-position: inside;
	padding: 0;
	margin: 0 auto 60px;
	display: inline-block;
	max-width: 520px;
	font-family: Lato, Arial, Helvetica, sans-serif;
	line-height: 1.6;
	text-align: left;
}

#about .skills-list li{
	margin: 2px 0;
}

/* Replace removed <br> spacing in contact */
#contact{
	padding-bottom:40px;
}

/* Stack work sections vertically (override .left columns) */
#personal-work,
#professional-work{
	width:100%;
	float:none;
	clear:both;
	margin-top:4%;
}

/* Add spacing between work sections */
#personal-work{
	margin-bottom:4%;
}

#professional-work{
	margin-top:0;
	padding-top:4%;
}

/* Center Resources page title */
#resources-content h3 {
	text-align: center;
}

/* Stack Tutorials and Tools sections vertically (like work sections) */
#tutorials,
#tools{
	width:100%;
	float:none;
	clear:both;
	margin-top:4%;
}

/* Add spacing between sections */
#tutorials{
	margin-bottom:4%;
}

#tools{
	margin-top:0;
	padding-top:4%;
}


/* ----------------------- WORK LINKS START ------------------------- */
#personal_work{
	width:100%;

}

.item{
	border-radius:15px;
	width:180px;
	height:180px;

	margin:10px;
	float:left;
	position:relative;
	left:auto;
	text-align:left;
	overflow:hidden;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	-moz-transition: box-shadow 0.2s ease-in-out;
	-o-transition: box-shadow 0.2s ease-in-out;
	-ms-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}

.item:hover{
	-webkit-box-shadow: 0 0 8px #41A0FF, 0 0 8px #41A0FF;
    -moz-box-shadow: 0 0 8px #41A0FF,  0 0 8px #41A0FF;
    box-shadow: 0 0 8px #41A0FF,  0 0 8px #41A0FF; 
}
	

.item img{
	display:block;

	-webkit-box-shadow: 0 2px 1px #c3c3c3;
    -moz-box-shadow: 0 2px 1px #c3c3c3;
    box-shadow: 0 2px 1px #c3c3c3;
	border-radius:15px 15px 0 0;
	opacity:0;
	visibility: hidden;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	animation: slideUpItem 0.6s ease-out forwards;
	
}

.item img:hover{
	opacity:1;
}


.item h3{
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:105%;
	font-weight:normal;
	padding:5px 0 0 8px;
	color: var(--theme-text-strong);
	text-decoration:none;
}

.item h3 a{
	text-decoration:none;
	color: var(--theme-text-strong);
}

.item p{
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:70%;
	font-weight:normal;
	padding:0 0 0 8px;
	color:#41A0FF;
	text-decoration:none;
}
/* ----------------------- WORK LINKS END ------------------------- */


#bottom h3{
	margin:4% 0 3% 0;
	font-family:montserrat, Arial, Helvetica, sans-serif;
	font-size:150%;
	font-weight:normal;
	text-align:center;
	color:#41A0FF;
}


footer{
	width:100%;
	padding:10px 0;
	background-color: var(--theme-border);
}

.icon{
	float:right;
	width:32px;
	margin:95px 0 2px 4%;
	opacity:0.85;
}

.icon:hover{
	opacity:1;
}

.social{
	color:#41A0FF;
}


	

/* -- Make the highlight colours pretty -- */
::selection      { background:#41A0FF; color: var(--theme-on-accent);}
::-moz-selection  { background:#41A0FF; color: var(--theme-on-accent);}

/* Image upward motion animation - opacity appears instantly, then slides up */
@keyframes slideUp {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
  }
  1% {
    opacity: 1;
    visibility: visible;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes slideUpItem {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
  }
  1% {
    opacity: 0.8;
    visibility: visible;
    transform: translateY(20px);
  }
  100% {
    opacity: 0.8;
    visibility: visible;
    transform: translateY(0);
  }
}
/* ---------------------- RESPONSIVE STUFF - ONLY TOUCH IF YOUR'E CONFIDENT WITH CSS ---------------------- */


@media only screen and (max-width: 1279px) {
	.wrapper{
		width:80%;
	}
	
	.top-inner {
		width: 80%;
	}
}

@media only screen and (max-width: 1105px) {
	
	#personal_work{
		width:90%;
}

	.item{
		width:190;
		height:190;
		margin:8px;
	}
}

@media only screen and (max-width: 999px) {
	
	#personal_work{
		width:100%;	
}

	.item{
		width:180;
		height:180;
		margin:7px;
	}
	
	.item h3{
		font-size:90%;
	}
	
	.item p{
		font-size:60%;
	}
}

@media only screen and (max-width: 835px) {
	
	#personal_work{
		width:100%;	
}

	.item{
		width:170;
		height:170;
		margin:7px;
	}
	
	.item h3{
		font-size:75%;
	}
	
	.item p{
		font-size:40%;
	}
}

@media only screen and (max-width: 860px) {
	header h1{
		font-size:110%;
	}
	
	header h2{
		font-size:80%;
	}
}

/* Show hamburger menu when logo and nav don't fit in content width */
/* At 70% content width (default), nav (500px) + logo (~200px) need ~1000px viewport */
/* At 80% content width (1279px breakpoint), need ~875px viewport */
/* Using 1000px as breakpoint to ensure menu fits within content width */
@media only screen and (max-width: 1000px) {
	/* Show hamburger button, hide regular nav */
	.menu-toggle {
		display: block;
		right: 0;
	}
	
	nav#main-nav {
		display: none;
	}
}

@media only screen and (max-width: 720px) {
	/* Make page content full-width on small screens */
	.wrapper{
		width:100%;
		box-sizing:border-box;
		padding-left:20px;
		padding-right:20px;
	}
	
	.menu-toggle {
		right: 20px;
	}
	
	nav{
		width:100%;
	}
	
	.top-inner {
		width: 100%;
		padding: 0 20px;
	}
	
	#logo {
		max-width: calc(100% - 50px);
	}
	
	header h1{
		font-size:100%;
		margin-bottom:5%;
	}
	
	header h2{
		font-size:60%;
	}
	
	.left{
		width:100%;
	}
	
	.right{
		width:100%;
	
	}
	
	#personal_work{
		width:100%;	
}

	.item{
		width:140;
		height:140;
		margin:10px;
	}
	
	.item h3{
		font-size:130%;
	}
	
	.item p{
		font-size:90%;
	}
}

@media only screen and (max-width: 510px) {
	
	#personal_work{
		width:100%;	
	}

	.item{
		width:90;
		height:90;
		margin:7px;
	}
	
	.item h3{
		font-size:75%;
	}
	
	.item p{
		font-size:40%;
	}
}

.cbp-rfgrid{

	width:100%;
	height:100%;
    position: relative;
	margin-bottom: 5%;
}
 
.cbp-rfgrid li {

    float: left;
	overflow: hidden;
	margin:.5%;
    width: 16,66666666666667%; /* Fallback */
    width: -webkit-calc(94% / 6);
    width: calc(94% / 6);
	height:100%;
	text-align:center;	
	
}
 
.cbp-rfgrid li a,
.cbp-rfgrid li a img {
	margin-top:0%;
	float: inherit;
	border-radius:3px;
    display: block;
    width: 100%;
    cursor: pointer;
	opacity: 1
}
 
.cbp-rfgrid li a img:hover{
    opacity: 0.9;
	cursor: pointer;
}

/* Example for media query: change number of items per row */
 
@media screen and (max-width: 1000px) {
    .cbp-rfgrid li {
		margin:.5%;
        width: 20%; /* Fallback */
    width: -webkit-calc(95% / 5);
    width: calc(95% / 5);
	height:auto;
	text-align:center;	
    }
}
 
@media screen and (max-width: 800px) {
    .cbp-rfgrid li {
		margin:.5%;
        width: 25%; /* Fallback */
    width: -webkit-calc(96% / 4);
    width: calc(96% / 4);
	height:auto;
	text-align:center;	
    }
}
 
@media screen and (max-width: 600px) {
    .cbp-rfgrid li {
		margin:.5%;
        width: 33,33333333333333%; /* Fallback */
    width: -webkit-calc(97% / 3);
    width: calc(97% / 3);
	height:auto;
	text-align:center;	
    }
}
 
@media screen and (max-width: 400px) {
    .cbp-rfgrid li {
		margin:.5%;
        width: 50%; /* Fallback */
    width: -webkit-calc(98% / 2);
    width: calc(98% / 2);
	height:auto;
	text-align:center;	
    }
}
 
@media screen and (max-width: 200px) {
    .cbp-rfgrid li {
	margin:.5%;
        width: 100%; /* Fallback */
    width: -webkit-calc(99% / 1);
    width: calc(99% / 1);
	height:auto;
	text-align:center;	
    }
}
 
@media screen and (max-width: 300px) {
    .cbp-rfgrid li {
        width: 100%;
    }
}

/* ----------------- Scroll reveal (animate when in view) ----------------- */
/* Activated only when JS adds `js` class to <html>. */
html.js .cbp-rfgrid li a img,
html.js #about,
html.js #contact,
html.js #personal-work h3,
html.js #professional-work h3,
html.js #resources-content h3,
html.js #resources-content p {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms ease, transform 600ms ease;
	will-change: opacity, transform;
}

html.js .cbp-rfgrid li a img.is-inview,
html.js #about.is-inview,
html.js #contact.is-inview,
html.js #personal-work h3.is-inview,
html.js #professional-work h3.is-inview,
html.js #resources-content h3.is-inview,
html.js #resources-content p.is-inview {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html.js .cbp-rfgrid li a img,
	html.js #about,
	html.js #contact,
	html.js #personal-work h3,
	html.js #professional-work h3,
	html.js #resources-content h3,
	html.js #resources-content p {
		transition: none;
		transform: none;
		opacity: 1;
	}
}