@font-face {
  font-family: "airstrike";
  src: url("./fonts/airstrike/airstrike.ttf") format("truetype");
}
body,
html {
  font-family: airstrike;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  /**
    *Gallery plan 
     - make the p element have a bakcground image, of whateber the project is,
        make the text appear when hovered with mouse
    - Delete DEMO button, only with github link. DEMO button if only links to actual project right away
    - PUT DEMO GITHUB BUTTON INSIDE DISAPPEARING 
    - 
    */
}
body body,
html body {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
body header,
html header {
  width: 100%;
  background-color: black;
}
body header img,
html header img {
  width: 20rem;
  margin: 2%;
}
body main,
html main {
  background-color: white;
  display: flex;
  margin-top: 3%;
  justify-content: center;
  width: 100%;
}
body .gallery,
html .gallery {
  display: flex;
  width: 80%;
  justify-content: flex-end;
  font-family: "airstrike", serif;
  margin-bottom: 8%;
}
body .gallery section,
html .gallery section {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2%;
}
body .gallery .gallery-desc,
html .gallery .gallery-desc {
  background-image: url("https://via.placeholder.com/150");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 18rem;
  transform: blur(40px);
  transition: all 0.2s;
}
/* I need to add each ID for each project Like I added burley maids */
#burley-maids{
  background-image: url('../img/burley-maids.png');
}
body .gallery .gallery-desc:hover, body .gallery .gallery-desc:active,
html .gallery .gallery-desc:hover, #burley-maids:hover,
html .gallery .gallery-desc:active, #burley-maids:active {
  background-image: none;
  background-color: black;
  border-radius: 1rem;
  transform: scale(110%);
  transform: blur(40px);
  transition: 0.2s;
}

body .gallery > section > div > p,
html .gallery > section > div > p {
  text-align: center;
  height: 100%;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  margin: auto;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  filter: blur(20px);
}
body .gallery > section > div > p:hover,
html .gallery > section > div > p:hover {
  opacity: 1;
  filter: blur(0);
  transition: 0.2s;
}
body .gallery section img,
html .gallery section img {
  width: 80%;
  display: flex;
  margin: auto;
}
body main a img,
html main a img {
  width: 5rem;
  height: 5rem;
}
body main section div,
html main section div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
body main section div a,
html main section div a {
  color: black;
  margin-top: 13%;
  height: 0;
  font-size: x-large;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body main section h2,
html main section h2 {
  color: black;
  display: flex;
  justify-content: center;
  margin: 5%;
  font-size: large;
}
body .link-bar,
html .link-bar {
  background-color: black;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
body .link-bar img,
html .link-bar img {
  width: 5rem;
  margin: 2rem;
}
@media (max-width: 1024px) {
  body .gallery,
  html .gallery {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
    color: white;
  }
  body .gallery-desc,
  html .gallery-desc {
    height: 18rem;
    transform: blur(40px);
    transition: all 0.2s;
    color: white;
  }
  body .gallery-desc:target,
  html .gallery-desc:target {
    background-image: none;
    background-color: black;
    border-radius: 1rem;
    transform: scale(110%);
    transform: blur(40px);
    transition: 0.2s;
    width: 80vw;
  }
  body .gallery-desc:hover, body .gallery-desc:active, body .gallery-desc:target,
  html .gallery-desc:hover,
  html .gallery-desc:active,
  html .gallery-desc:target {
    background-image: none;
    border-radius: 1rem;
    transform: scale(110%);
    transform: blur(40px);
    transition: 0.2s;
    width: 80vw;
    background-color: red;
    height: 30vh;
    font-size: 1.4em;
    position: relative;
  }
  body .gallery section,
  html .gallery section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30rem;
    margin: 4%;
  }
  body .gallery section a img,
  html .gallery section a img {
    margin-top: 5rem;
    width: 6rem;
  }
  body .gallery h2,
  html .gallery h2 {
    margin-top: 4%;
    padding: 4%;
    padding-bottom: 1%;
  }
}/*# sourceMappingURL=style.css.map */