:root {
  --blue-1: #1795e1;
  --blue-2: #2483d5;
  --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;
}

/* Button colors */
.btn-large{
  background-color: white;
  color:            black;
}
.btn-large:hover {
  background-color: var(--blue-1);
}
.btn-large:active {
  background-color: var(--blue-2);
}
.button_ring{
  border:             2px solid var(--grey)
}

/* 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;
}

.download_icon img{
  margin-top:     5px;
  margin-right:   5px;
}
.download_icon a{
  margin-top:     -30px;
}