body {
  background-color: #B8C0F9;
  font-family: "Roboto", sans-serif;
	font-family: "Offside", sans-serif;
}
main {
	background-color: #B8C0F9;
  padding: 1em;
}
h1, h2, h3 {
	font-family: "Domine", serif;
  text-align:center;
}

#workcontact ul{
  list-style:none;
}
#side-nav {
  display: flex;
	flex-direction:column;
  gap: 1em;
	background: #1E14BC;
  color: white;
  padding: 1em 2em;
  border-radius:80px 0 0 0;
  border:3px white solid;
}
#goals{
  margin:8px;
}
#web div { 
  margin:8px;
}
#documents{
  margin:8px;
}
#projects{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  flex-direction:column;
}
#side-link:link{
  color:white;
}
#side-link:visited{
  color:#E1E0FF;
}
.caption{
  text-align:center;
}
.caption:hover{
  color: #1E14BC;
  background:linear-gradient(to left, #E1E0FF 5%, #B8C0F9);
}
.caption:visited{
  color:#E1E0FF;
}
.img{
  display:flex;
}
.imgborder:hover {
  box-shadow:-10px -10px #1E14BC;
}
.imgborder:focus {
  box-shadow:-10px -10px #1E14BC;
}
.img-responsive {  
  width:325px;
}
.container {
	background: #E1E0FF;
  max-width:100%;
  padding: 1em;
  margin-bottom: 2em;
  border-radius:0 0 80px 0;
  box-shadow:2px 2px 2px grey;
}
.offside-regular {
  font-family: "Offside", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* 
	Media Query 

	Recommended Breakpoints
	• Mobile ~ 576px
	• Tablet ~ 768px or 992px
	• Small Desktop/Laptop ~ 1200px
	• Large Desktop ~ 1400px
*/
@media (min-width: 576px) {
  main {
	display:flex;
  }
  .caption{
  text-align:right;
}  
  .img-responsive{
    width:450px;
  }
  #contact h2{
    color:grey;
  }
}
@media (min-width: 768px){
  .img-responsive{
    width:650px;
  }
  .caption{
    text-align:center;
  }
}