/* ======================
   Body
   ====================== */

html {
  min-width: 375px;
}

a:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

body {
  min-width: 816px;
  margin: 0px;
  overflow-x: auto;
}

.home {
  background-position: center;
  background-color: black;
  background-image: url("https://photos.smugmug.com/Alexs-Images/Alexrodabaughwork/i-K7hxT94/1/NSk2hXCTD7gGcDsxZrDSWZxRMwsgDnrpjmRHhVvhj/S/work1_biggerl-S.gif");
  background-repeat: repeat;
  background-size: 200px;
  height: 100%;
  width: 100%;
  cursor: url('curs.cur'), progress !important;
}

.subtitle {
  font-size: 75%;
}

.year {
  font-size: 50%;
}

/* ======================
   Header
   ====================== */
header pre {
  background-color: black;
  border: 2px solid white;
  box-sizing: border-box;
  color: white;
  display: block;
  margin: -150px 50px 10px 50px;
  min-width: 616px;
  padding-top: 20px;
  text-align: center;
  text-decoration: none;
  white-space: pre-wrap;
}

header img {
  height: 100%;
  width: 100%;
}

.header_gifs {
  display: flex;
  /* Use Flexbox for layout */
  justify-content: space-between;
  /* Space out the left and right divs */
  align-items: flex-start;
  /* Align items to the top */
  width: 100%;
  /* Ensure the container spans the full width */
  min-width: 816px;
  /* Match the body's min-width */
  margin-top: -25px;
}

/* ======================
   Footer
   ====================== */

footer {
  min-width: 816px;
  width: 100%;
  overflow: hidden;
}

/* Flexbox container for the header GIFs */
#left,
#right {
  flex: 1;
  /* Each div takes up equal space */
  min-width: 408px;
  /* Set the minimum width for each div */
  box-sizing: border-box;
  /* Include padding and border in the element's total width */
}

#right {
  text-align: right;
}

#left img,
#right img {
  max-width: 60%;
  /* Ensure images don't exceed their container's width */
  height: auto;
  /* Maintain aspect ratio */
}

#bottom {
  clear: both;
  /* Ensure the bottom div clears the floated elements above */
  width: 100%;
}

#bottom span {
  display: inline-block;
  /* Ensure spans behave as blocks */
  width: 50%;
  /* Each span takes up half the width */
}

#bottom img {
  max-width: 100%;
  /* Ensure images don't exceed their container's width */
}

#butt {
  width: 100%;
  max-width: 500px;
}

/* ======================
    BIO
    ====================== */
.angel pre {
  display: block;
  white-space: pre-wrap;
  color: white;
  background-color: black;
  margin: -75px auto 0px;
  box-sizing: border-box;
  min-width: 616px;
  max-width: 616px;
  border: 2px solid white;
}

.bio {
  margin: 0px 100px 100px;
}

.bio p {
  background-color: white;
  padding: 30px;
  font-size: 150%;
  border: 5px solid black;
}

.bio_image {
  border: 5px solid;
  border-color: white;
  opacity: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
  box-sizing: border-box;
}

/* ======================
   Work
   ====================== */
/* .ongoing {
  margin: 100px;
  text-align: center;
}

.ongoing img {
  padding: 5px;
  border: 5px solid white;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.ongoing p {
  background-color: white;
  border: 5px solid black;
  font-size: 400%;
} */

.title_of_work {
  margin: 100px 100px 0px;
}

.title_of_work img {
  padding: 5px;
  border: 5px solid white;
  max-width: 80%;
  box-sizing: border-box;
}

.work_banner {
  border: 5px solid #ec722e;
  margin: 0 50px;
  text-align: center;
}

#work_words {
  background-color: black;
  margin: 0 auto;
  padding-top: 10px;
}

/* ======================
    OTHER SHOWZ
   ====================== */
.showz {
  margin: 100px 100px 0px;
}

.showz :last-child {
  margin-bottom: 0px;
}

.showz img {
  padding: 5px;
  border: 5px solid white;
  max-width: 80%;
  box-sizing: border-box;
}

.showz p {
  font-size: 400%;
  background-color: white;
  border: 5px solid black;
  text-align: center;
}

.showz_email img {
  background-color: black;
  border: 2px solid white;
  max-width: 100%;
  padding: 5px 20px;
  margin: 0px;
  box-sizing: border-box;
}

@media screen and (max-width: 700px) {

  body {
    min-width: 0px;
  }

  header {
    margin-top: -90px;
  }

  header pre {
    font-size: 7pt;
    margin: -50px 0px 10px;
    min-width: 0;
  }

  footer {
    min-width: 0px;
  }

  .header_gifs {
    min-width: 0px;
  }

  .angel pre {
    font-size: 80%;
    min-width: 0px;
    width: 500px;
    margin: -75px auto 0px;
  }

  .bio {
    margin: 0px 0px 100px;
  }

  .bio p {
    padding: 20px;
    text-align: justify;
  }

  .showz,
  .title_of_work {
    margin: 25px 0px 0px;
  }

  .showz img,
  .title_of_work img {
    max-width: 100%;
  }

  .showz img {
    border: 5px solid white;
  }

  .work_banner {
    margin: 50px 0px 0px;
  }

  #left,
  #right {
    min-width: 0px;
  }

}

@media screen and (max-width: 500px) {

  header pre {
    font-size: 5pt;
    margin: 20px 0px 10px;
  }

  .header_gifs {
    margin: 0px;
  }

  .angel pre {
    font-size: 6pt;
    min-width: 0px;
    width: 375px;
    margin: -75px auto 0px;
  }

  .credit_text {
    font-size: 100%;
  }

  #mc_embed_signup {
    width: 400px;
  }

  #work_words img {
    width: 375px;
  }
}