@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:wght@100..900&family=Ribeye&display=swap');
 
 hr {
   width: 100%;
   border: 1px solid black;
 }

 
#main {
  margin-top: 20px;
  width: 90%;
  border-radius: 20px;
  display: flex;
  column-gap: 10px;
  flex-direction: column;
  justify-content: space-between;
  justify-self: center;
}

.section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 0px 50px;
  border: 0px solid black;
  box-shadow: 10px 10px 15px rgb(114, 86, 101);
}

#pageDesc {
  width: 80%;
  font-size: 1em;
  align-self: center;
  font-family: "Ribeye", serif;
}

.header {
  align-self: center;
  font-size: 1.9em;
  font-family: "Bitcount Grid Double", system-ui;
}

.workImg {
  width: 40%;
  border-radius: 25px;
}

.blurb {
  width: 80%;
  font-size: 1em;
  font-family: "Ribeye", serif;
}

.workPost {
  padding: 10px;
  margin: 10px;
  border-radius: 25px;
  border: 2px solid pink;
  background-color: rgba(255,255,255,0.25);
  animation-iteration-count: infinite;
  animation-name: postMotion;
  animation-duration: 3s;
}

@keyframes postMotion {
  0% {transform: translateY(0px)}
  50% {transform: translateY(15px)}
  100% {transform: translateY(0px)}
}


@media (min-width: 700px) {
  #sectionHolder {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .section {
    width: 40%;
  }
  body {
    background-size:cover;
  }
  #pageDesc {
    width: 40%;
    align-self: center;
  }
  hr {
    width: 50%;
  }
  .blurb {
    width: 70%;
  }
}