/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
  color: teal;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  width: 100%;
  background-color: hsla(34, 90%, 85%, 1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='125%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 80% 70%, hsla(40, 90%, 70%, 1) 12%, transparent 70%), radial-gradient(circle at 25% 45%, hsla(30, 80%, 75%, 1) 8%, transparent 65%), radial-gradient(circle at 65% 20%, hsla(20, 70%, 80%, 1) 6%, transparent 75%), radial-gradient(circle at 15% 85%, hsla(15, 60%, 78%, 1) 5%, transparent 80%);
  background-blend-mode: overlay, normal, normal, normal, normal;
  
}

h1{
  padding-top: 20px;
  font-size: 4rem;
  text-align: center;
  margin: auto;
  font-family: "Jacquard 12", sans-serif;
}

h2{
  font-size: 1.5rem;
  text-align: center;
  margin: auto;
  font-family: "eagle lake", serif;
}

img{
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 20px;
  height: 400px;
}

p {
  padding-top: 15px;
  color: rgb(118, 0, 0);
  font-size: 1rem;
  text-align: center;
  margin: auto;
  font-family: arial, sans-serif;
}

.email{
  margin: auto;
  padding: auto;
  font-size: 2rem;
  text-align: center;
  font-family: "jacquard 24", serif;
}

.bottom{
  background: black;
  padding: 1rem 2rem 2rem 2rem;
}

.footer-heading-link {
  color: rgb(0, 238, 255) !important;
  font-style: normal;
  font-size: 3rem;
  text-align: center;
  font-family: "jacquard 24", serif;
}

.footer-intro {
  color: rgb(184, 184, 245);
  font-size: 1.5rem;
}

.footer-pitch {
  color: rgb(0, 203, 156);
  font-family: "eagle lake", serif;
}


.portfolio{
  background-color: hsla(79, 98%, 66%, 1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 94% 95%, hsla(170, 88%, 68%, 1) 3%, transparent 76%), radial-gradient(circle at 89% 34%, hsla(263, 96%, 51%, 1) 1%, transparent 86%), radial-gradient(circle at 86% 50%, hsla(318, 80%, 65%, 1) 7%, transparent 76%), radial-gradient(circle at 89% 79%, hsla(248, 76%, 53%, 1) 7%, transparent 87%), radial-gradient(circle at 15% 44%, hsla(4, 74%, 80%, 1) 15%, transparent 81%), radial-gradient(circle at 99% 20%, hsla(75, 88%, 92%, 1) 1%, transparent 68%);
  background-blend-mode: overlay, normal, normal, normal, normal, normal, normal;
  font-family: "eagle lake", serif;
}

.portfolio img{
  width: 50%;
  height: auto;
}

a{
  color: teal;
  text-decoration: none;
}

section section .portfolio-client{

  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  width: 30vh;
  color: rgb(255, 215, 188);
  text-align: center;
  background: teal;
  padding: auto;
  margin: auto;
  margin-bottom: 4rem;
}

address.contact .email{
  width: 50%;
  margin-top: 2rem;
  color: rgb(184, 184, 245);
  font-style: normal;
  font-size: 2rem;
  text-align: center;
  font-family: "jacquard 24", serif;
}

address.contact a.email-address{
  color: rgb(175, 245, 230);
  width: 50%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-style: normal;
  font-size: 2rem;
  text-align: center;
  font-family: "jacquard 24", serif;
  padding-bottom: 1rem;
}

address.contact .phone{
  width: 50%;
  color: rgb(175, 245, 230);
  font-size: 1.5rem;
  text-align: center;
  font-family: "eagle lake", serif;
}

.bottom > p{
  margin-bottom: 2rem;
}

.bottom{
  width: 90%;
  margin: auto;
  padding: auto;
  text-align: center;
}

address{
  display: block;
  margin: auto;
  padding: auto;
}

@media (max-width: 600px){
  section section .portfolio-client h3{
    font-size: .75rem;
    height: auto;
    width: 70%;
  }

  section section .portfolio-client{
    height: auto;
    width: 50%;
  }

  .portfolio img{
    width: 90%;
    height: auto;
  }

  h1{
    font-size: 2rem;
    padding-top: 1rem;
    margin: 0 1rem;
  }
  h2{
    width: 75%;
    text-align: center;
    font-size: 1rem;
    padding-top: 1rem;
    
  }

  .hot-dog-guy{
    width: auto;
    height: 50%;
    margin: 2vh;
  }

  address.contact a.email-address{
  color: rgb(175, 245, 230);
  width: 70%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-style: normal;
  font-size: 1.5rem;
  text-align: center;
  font-family: "jacquard 24", serif;
  padding-bottom: 1rem;
}

}

@media (max-width: 400px) {
  address.contact a.email-address{
    color: rgb(175, 245, 230);
    width: 70%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-style: normal;
    font-size: 1.25rem;
    text-align: center;
    font-family: "jacquard 24", serif;
    padding-bottom: 1rem;
  }
}

/******************************************
/* LAYOUT
/*******************************************/
header {

}

footer {

}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/