body {
    font-family: EB Garamond, serif;
    background: #3b3b37;
    color: #d4d5de;
}
.tri-title {
    font-size: 32px;
    text-decoration-line: underline;
    text-align: center;
}
.blog > p {
    width: 85vw;
    font-size: 18px;
    margin-left: 10vw;
    font-family: EB Garamond, serif;
    background: #3b3b37;
    color: #d4d5de;
}


/* This applies to the "sub-header" in the navbar. */
.flex-container > .flex-column > .tri-elem,
.flex-container > .flex-column > .tri-elem > a {
    margin-left: 3vw;
}
    
.flex-container {
    margin-left: 2vw;
    flex-wrap: nowrap;
    display: none;
}


.flex-container > div {
	width: 1000px;
	font-family: EB Garamond, serif;
	background: #3b3b37;
	color: #d4d5de;
	background: #3b3b37;
	color: #d4d5de;
}

.flex-container > .flex-column {
    display: flex;
    flex-direction: column;

    width: 100px;
    flex-basis: 100%;
    font-size: 24px;
    justify-content: flex-start;
}

.flex-container > .flex-column:hover > div,
.flex-container > .flex-column:hover > div > a {
    color: #ba9073;
}
.flex-container > .flex-column:hover > div > a:hover {
    color: #6f4e37;
}

a:link, a:visited, a:active {
    color: #ba9073;
}
a:hover {
    color: #6f4e37;
}

.imgflex {
    display: flex;
    margin-left: 3vw;
}
.imgholder {
    width: 27vw;
    margin-left: 2vw;
    text-align: center;
    cursor: pointer;
}
.imgholder > img {
    max-width: 100%;
}
.attribution {
    font-size: 10px;
}

.form-button {
    margin-left: 20vw;
    font-weight: bold;
}
.form-button > .tri-button {
    margin-top: 10px;
    margin-left: 0px;
}
.tri-button {
    text-align: center;
    color: #505975;
    background-color: #f6a74d;
    font-weight: bold;
    margin-bottom: 3vh;
    width: 40vw;
    border-radius: 10px;
    line-height: 5vh;
    margin-left: 20vw;
    cursor: pointer;
}



/* For Desktops?... */
@media (min-width: 1000px) {
    .flex-container > .flex-column > .tri-elem,
    .flex-container > .flex-column > .tri-elem > a {
	color: #3b3b3b;
	margin-left: 0;
    }

    .tri-title {
	font-size: 48px;
	margin-left: 3vw;
	margin-top: 1vw;
	text-align: left;
    }
    .column {
	width: 50%;
    }
    .flex-container {
	margin-left: 30vw;
	width: 30vw;
	display: flex;
    }
    .blog > p {
	width: 60vw;
	margin-left: 10vw;
	font-family: EB Garamond, serif;
	font-size: 24px;
	background: #3b3b37;
	color: #d4d5de;
    }

    footer {
	margin-top: 5vw;
	margin-bottom: 5vw;
	bottom: 100;
	left: 20;
    }
    footer.flexbox {
	display: flex;

	flex-wrap: nowrap;
	margin-left: 25vw;
	width: 50vw;
    }
    footer.flexbox > div {
	margin-right: 70px;
	font-size: 30px;
    }

    .attribution {
	font-size: 14px;
    }
    
    .tri-button {
	width: 10vw;
    }
}




/*
TODO: remove eventually...
body {
    font-family: Tahoma, sans-serif;
}

.footer {
    bottom: 100;
    left: 20;
}


.flex-container > .blog {
	width: 1000px;
	font-family: EB Garamond, serif;
	background: #3b3b37;
	color: #d4d5de;
	background: #3b3b37;
	color: #d4d5de;
}


.flex-container > .blog > p {
    font-size: 30px;
    margin-left: 20px;
    
}

.column {
    width: 100%;
}

*/