@charset "UTF-8";
/* CSS Document */

*,
*::before,
*::after {
     margin: 0;
    padding: 0;
    box-sizing: border-box;}




	

h1{ text-align: center;
	  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
	font-size:75px;
	margin:0px;
}
	h2{ 
	}
	

header{  width:100%; position:sticky; top:0; z-index: 100; background-color:rgba(126,85,163,.6);  padding-top: 30px; padding-bottom:30px; }
.jaycafe{border-bottom:#000000 solid 6px}
 
h1{margin-bottom: 0; font-size:50px }
	
nav{  text-align: center;
	display:flex;
	justify-content: center;
    padding: 0px 0px 0px 0px;
	margin-right: auto; margin-left:auto;
		
}
hr{border-top: 1px solid black;}

h2{
	  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
	display:flex;align-content: center;
	margin-bottom: 15px;
}

body {
	 background-image:url("../images/background-grayscale.png");
	 background-size: 1400px 900px;
	  background-repeat: no-repeat;
  background-attachment: fixed;
	
	background-color:#7e55a3;
  margin: 0;
	font-family: "Protest Riot", sans-serif;
  font-weight: 400;
  font-style: normal;
	
	padding:0px;
}
footer
{border-top:#000000 solid 6px}
.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}
.single-day-regular {
  font-family: "Single Day", cursive;
  font-weight: 400;
  font-style: normal;
}
.protest-strike-regular {
  font-family: "Protest Strike", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.protest-riot-regular {
  font-family: "Protest Riot", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.screen{height:100%;  min-width: 500px;}
.navbar{display:flex;justify-content: center; margin-top:20px;}
.navbar li{list-style:none; font-size:18px;}
.navbar li a {padding:0px 12px; color: black; text-decoration: none;}
.navbar li a:hover{color:green;}
.container{width:100%;margin-left:auto; margin-right: auto; }
.portfolio-items{display:flex;justify-content:center;flex-wrap:wrap; padding-bottom: 200px;}
.portfolio-item{width:25%;height:30%;flex-grow:0;flex-shrink:0; padding:10px;}
.portfolio-item img{width:100%; height:150%;}
.portfolio-item:hover img{border: #6C00C8 solid 10px;}
.DA1{position:absolute;width:17%;height:47%; display:none;}
.DA1:hover {background-color:grey;opacity:80%; border:#6C00C8 solid 8px; }
.portfolio-item:hover .DA1{display:flex; }
.DA1:hover .datecreated{display:flex; }
.datecreated {flex-wrap:wrap;font-size:13px; position:absolute;display:none;}
.DA2{position:absolute;width:17%;height:56%; display:none;}
.DA2:hover {background-color:grey;opacity:90%; border:#6C00C8 solid 10px; }
.portfolio-item:hover .DA2{display:flex; }
.DA2:hover .datecreated{display:flex; }
.DA3{position:absolute;width:17%;height:47%; display:none;}
.DA3:hover {background-color:grey;opacity:85%; border:#6C00C8 solid 10px; }
.portfolio-item:hover .DA3{display:flex; }
.DA3:hover .datecreated{display:flex; }
.stats img{width:50%; height:50%;}
.logo img{display:flex; align-content: flex-start; float: right; width:200%; background-color: #E5A9A9; border: black solid 10px;  }
.row{display:flex; flex-direction: row; width:100%;}
.column{font-size: 30px;}
.column2{display:flex; flex-direction:column; width:100%;font-size: 30px;float:right;}
.image-wrap{}
.back-link{ color:#ffffff; text-decoration:none}
.contact-info{ margin-left:auto; margin-right: auto; display:flex; flex-wrap: wrap; justify-content: center;}
.contact-info img{ width:100%; height:100%; padding: 0px; float:right;  }
.sketches{display:flex; padding-left:10px;   }
.sketches img{float:right;}
.section{padding-bottom: 30px; padding-top:30px;}

/* X-Small devices (portrait phones, less than 576px) */
		/* No media query for `xs` since this is the default in Bootstrap */

		/* Small devices (landscape phones, 576px and up) */
@media (min-width: 300px) {
			.portfolio-item{  width:100%;}
	.navbar li { font-size: 20px;}
	.box { width: 50%; } }
		
	
	@media (min-width: 576px) {
			.portfolio-item{  width:100%;}
			.navbar li { font-size: 25px;}
			.box { width: 50%; }
			
		}

		/* Medium devices (tablets, 768px and up) */
		@media (min-width: 768px) {
			.portfolio-item{  width:50%;}
			
			
			.logo { width: 250px; margin: 20px auto; padding: 20px; }
		
		}

		/* Large devices (desktops, 992px and up) */
		@media (min-width: 992px) {
			.box { width: 20%; }
			.portfolio-item{  width:25%;}
			.navbar li { font-size: 30px;}
			.container{width: 800px;}
		}

		/* X-Large devices (large desktops, 1200px and up) */
		@media (min-width: 1200px) {
			.container{width: 1100px;}
			
		}

		/* XX-Large devices (larger desktops, 1400px and up) */
	@media (min-width: 1400px) {.container{width: 1100px;}}