body {
	font-family: sans-serif;
}

body p img{
  width: 100%
}

/*make .side elements go to the right side of the text in desktops, mostly for images*/
  /*phone inclusion and p based*/
  .side{width:100%}
  p:has(.side){
    margin:0;
    max-width: 30em;
    float: right;
    clear: right; /*makes sure it's not next to other .sides if no heading between*/
  }

  :is(h1,h2,h3,h4,h5,h6):has(+ p :is(.side, picture .side)) {
    clear: right; /*make headings catch up to their images*/
  }
  @media (max-width: 800px){ /*if a phone*/
    p:has(.side){
  	  float: none;
  	  width:fit-content;
      margin: auto;
    }
  }
  /* phone exclusion based */
    /* p:has(.side) { */
    /*   width: fit-content; */
    /*   margin: auto; */
    /* } */
    /* @media (min-width: 800px) { /*if not a phone*/ */
    /*  .side { */
    /*    float: right; /*makes selected elements go to the side of the container.*/ */
    /*    clear: right; /*makes sure it's not next to other .sides if no heading between*/ */
    /*  } */
    /*   p:has(.side) { */
    /*     width:unset; */
    /*     margin:unset */
    /*   } */
    /* } */
    /* .side{ */
    /*   width: 100%; /*applies on phone*/ */
    /*   max-width: 30em; */
    /*   align-self:center; */
    /* } */
    /* :is(h1,h2,h3,h4,h5,h6):has(+ p > .side) { /*make headings catch up to their images*/ */
    /*   clear: right; */
    /* } */