.nav-link {
	text-align: center;
	color: black;
	padding: 1rem 1rem;
	font-weight: bold;
}

.nav-link:hover {
	background-color: #589EAA;
	color: black;
}

.active {
	background-color: #589EAA;
}

.header {
	text-align: center;
}

.sections {
    background-color: #b9dfe6;
    border-radius: 25px;
}

.label {
    font-family: 'Open Sans', sans-serif;
}

input.input-box,
textarea.input-box {
    background-color: #616161;
    border: #616161;
    color: #ffffff;
}

input.input-box:focus,
textarea.input-box:focus {
    background-color: #000000;
    color: #ffffff;
}

form .form-control::-webkit-input-placeholder {
    color: #ffffff;
}

input.btn-purple {
    background-color: #5C6BC0;
    color: #ffffff;
}

.rm-border:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffffad;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ffffffad;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #ffffffad;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

p, a {
    font-family: 'Roboto', sans-serif;
}

a {
    display: block;
}

body {
    height: 100vh; 
    margin: 0;
    display: flex;
    flex-direction: column;
}

footer{
    background-color: #272727;
    margin-top: auto;
    min-height: 66px;
}

.nobullets {
    list-style: none;
}

.social {
    display: inline;
    margin-left: 1rem;
    margin-right: 1rem;
}

.projects {
    margin-left: 5rem;
    margin-right: 5rem;
}

.experience {
	margin-left: 10rem;
	margin-right: 10rem;
}

.word {
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    position: relative;
}

.letter {
    width: 10%;
    position: relative;
    border: 1px solid black;
    margin: 3% 1%;
}

.letter:before {
    padding-top: 100%;
    float: left;
    content: "";
}

.input {
    max-width: 40%;
    min-width: 250px;
    background: transparent;
    font-size: 30px;
    letter-spacing: 0.8em;
    text-indent: 15px;
    font-family: monospace;
    text-align: center;
    /* caret-color: transparent; */
    position: relative;
    padding-left: 0.4em;
    text-decoration: none !important;
}

.input:before {
    padding-top: 10%;
    float: left;
    content: "";
}

.input:focus {
    outline: none;
}

.inputbg1, .inputbg2, .inputbg3, .inputbg4, .inputbg5 { 
    z-index: -1;
    position: absolute;
    height: 40px;
    width: 40px;
    border: 1px solid black;
    margin-right: 5px;
}

.inputbg1 {
    left: 260px;
}

.inputbg2 {
    left: 305px;
}

.inputbg3 {
    left: 350px;
}

.inputbg4 {
    left: 395px;
}

.inputbg5 {
    left: 440px;
}

.guess {
    margin: 2em;
}

.letter {
    text-align: center;
    font-size: 2.5vh;
    font-family: monospace;
}

.game {
    background-color: lightslategray;
}