:root {
  --blue-1: #008ab6;
  --blue-2: #007cc8;
  --blue-3: #0068C6;
  --grey: #d5dde6;
}
body, html {
  font-family: 'Work Sans', sans-serif;
  height: 100%;
}

/* Color modifiers */
.bg-white {
  background-color: #ffffff;
}
.bg-blue {
  background-color: var(--blue-1);
}
.bg-blue-darker {
  background-color: var(--blue-2);
}
.bg-blue-darkest {
  background-color: var(--blue-3);
}
.bg-grey {
  background-color: var(--grey);
}

/* Text modifiers */
.txt-blue {
  color: var(--blue-1);
}
.txt-blue-darker {
  color: var(--blue-2);
}
.txt-blue-darkest {
  color: var(--blue-3);
}
.txt-grey {
  color: var(--grey);
}
.txt-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 4em;
  font-weight: 900;
}

/* Spacer elements */
.spacer-medium {
  height: 50px;
}
.spacer-small {
  height: 25px;
}
.spacer-tiny {
  height:2px;
}

/* Project infobox */
.infobox {
  transition: all 0.2s;
}
.infobox:hover {
  transform: scale(1.05);
  z-index: 1;
}

.image-shadow {
  background: linear-gradient(
    to bottom, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(0, 0, 0, 0) 59%, 
    rgba(0, 0, 0, 0.65) 100%), 
    url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
}

/* Video embeds */
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* social media icons */
.socialicons {
  height: 20px;
  max-width: 28px;
}
.socialicons-large {
  height: 50px;
  max-width: 50px;
}