.my-projects {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* background-color: blueviolet; */
    justify-content: center;
}

.project {
    width: 30%;
    /* flex: 1 0 30%; */
    padding: 10px;
    margin: 40px;
    /* float: left; */
    border: 2px solid black;
	font-family: Bodoni;
	font-size: 16pt;
}

.project-link {
	padding: 15px 10px;
	text-decoration: none;
	background-color: #1ca;
	margin: auto;
	text-align: center;
	color: #444;
	border: 1px solid black;
}

.project-link:hover {
	background-color: #1fb;
}

.label {
    margin: auto;
    text-align: center;
    background-color: #099;
    color: #dfdfdf;
    font-size: 25px;
    font-family: Bodoni;
}

.sites {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* background-color: blueviolet; */
    justify-content: center;
}

.site-link {
    text-decoration: none;
    font-size: 30px;
    text-align: center;
    background-color: #088;
    color: #fff;
    width: 30%;
    padding: 20px 10px 20px 10px;
    margin: 40px;
    border: 2px solid black;
}

@keyframes linkcolor {
	from {background-color: #088; color: #fff;}
	to {background-color: #055; color: #fff;}
}

.site-link:hover {
	background-color: #055; 
	color: #fff;
	animation-name: linkcolor;
	animation-duration: 1s;
}

.year {
	margin: auto;
	width: 25%;
	text-align: center;
	padding: 20px 0px 20px 0px;

	font-family: Bodoni;
	font-size: 40px;
	border: 1px solid black;
	border-radius: 12px;
	background-color: #0aa;
	color: #444;
}

/* Mobile friendly css */
@media screen and (max-width: 800px) {
	.project {
		width: 70%;
	}

    .project-link {
        width: 100%;
    }
}