/*  Mariano Santillan Portfolio Styles  */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;900&display=swap');



body {
	width: 100%;
	padding: 0;
	margin: 0;
	background: #000;
	color: #fff;
}

img {
	height: auto;
}
* {
  box-sizing: border-box;
}


/* ======== NAV ================= */

nav {
  padding: 0;
  background: linear-gradient(to bottom, #53417c, #000);
  color: #fff;
  display: flex;
  flex-flow: row wrap;
}
nav div:first-of-type {
  width: 40%;
  text-align: right;
}
nav div:last-of-type {
  width: 60%;
  text-align: left;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
nav h1, nav h2, nav p {
  font-family: Raleway, Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: clamp(1.875rem, 4vw, 3.75rem);
  padding: 0;
  margin: 0 0 10px;
  width: 100%;
}
nav h2 {
  font-weight: 300;
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.msphn, .mseml {
  font-weight: 300;
  font-size: 1.25rem;
  padding: 5px 0;
}
.msphn::before {
  content: "";
  width: 35px;
  height: 30px;
  display: inline-block;
  margin-bottom: -7px;
  background: url('../images/phone.png') no-repeat top left /contain;
}
.mseml::before {
  content: "";
  width: 35px;
  height: 35px;
  display: inline-block;
  margin: 0 5px -7px 0;
  background: url('../images/email.png') no-repeat top left /cover;
}
nav p a {
  text-decoration: none;
  color: #fff;
}
nav p a:hover, nav p a:focus {
  border-bottom: 2px solid #fff;
}

@media (max-width: 800px){
  nav div:first-of-type, nav div:last-of-type {width: 100%; text-align: center;}
}



/* ======== Gallery ================= */
main {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

main figure {
  width: 48%;
  max-width: 250px;
  padding: 0 ;
  margin: 1%;
}

main figure a {
  display: block;
  padding: 0;
}

main figure a img {
  width: 100%;
  border: 6px solid #000;
  padding: 0;
  margin: 0;
}

main figure a:hover img,
main figure a:focus img {
  border-color: #f2c744;
}

main h3 {
  font-family: Raleway, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1.875rem;
  padding: 20px 0;
	text-align: center;
  margin: 40px 0 10px;
  width: 100%;
	border-bottom: 1px solid #53417c;
}




/* ======== FOOTER ================= */

footer {
  font-family: Raleway, Arial, Helvetica, sans-serif;
  padding: 10px;
  background: #53417c;
  color: #fff;
  text-align: center;
}

footer p {
  font-weight: 300;
  font-size: 1.25rem;
}
footer p a {
  color: #fff;
  text-decoration: none;
}
footer p a:hover, footer p a:focus {
  border-bottom: 2px solid #fff;
}