body {
	font-family: var(--main-font), sans-serif;
}

a:not(.no-col), a:visited:not(.no-col) {
	background-color: transparent;
	color: var(--accent);
}

a:active:not(.no-col),
a:hover:not(.no-col) {
	outline: 0;
	color: var(--accent);
}

.most-used-langs {
	margin-top: 10%;
	width: 70%;
}

.prog-lang {
	background: var(--accent);
    color: white;
    display: inline-block;
	padding: 0.5vh;
	margin-top: 2%;
}

.prog-lang-nav {
	width: 100%;
}

.pull-right {
	position: absolute;
    right: 0;
    margin-right: 20px;
}

#top, #bottom {
	background: var(--accent);
	position: fixed;
}		
#top, #bottom {
	left: 0; right: 0;
	height: var(--border-width);
}
#top { top: 0; }
#bottom { bottom: 0; }

.progress-item {    
    width: 100%;
    background: darkgray;
    position: relative;
}

.completion {
	background-color: var(--accent);
	margin-top: 3%;	
	color: white;
	padding: 1.5%;
}

.completion .subject {
    text-align: left;
}

.completion .percent {
    position: absolute;
	right: 2%;
	bottom: 10%;
}

.footer {
	text-align: center;
}

.form-custom {
	max-width: 25em;
	margin: 0 auto;
	font-weight: 400;
	margin-top: 5%;
}

.field-custom, .textarea-custom {
	border: solid 1px;
	outline: none;
	width: 100%;
	padding: 1em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	border-radius: none;
	color: black;
}

.field-custom:focus, .textarea-custom:focus {
	-moz-box-shadow: var(--accent) 0 0 0 2px inset;
	-webkit-box-shadow: var(--accent) 0 0 0 2px inset;
	box-shadow: var(--accent) 0 0 0 2px inset;
}

.textarea-custom {
	max-width: 25em;
	min-height: 5.625em;
	max-height: 12.5em;
	width: 100%;	
}

.btn-custom {
	background: black;
	color: white;
	margin: auto auto;
}
  
.btn-custom:focus {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	background: darkgray;
}

.btn-custom:active {
	background: darkgray;
  }
  @media (max-width: 30em) {
	form input[type=submit] {
	  width: 100%;
	}
}

label, .custom-field, .custom-textarea {
    display: block;
}

label {
    margin-bottom: 20px;
}

.centered-text {
	text-align: center;
}