<style>

body {
  background-color: white;
  color: black;
  font-size: 25px;
  border-color: black;
  margin: 0px;
}
.dark-mode {
  background-color: black;
  color: white;
  border-color: white;
}



body {
  font-family: Arial, sans-serif;
  margin: 0;
}

#navbar {

}

div.head {
  padding: 30px;
  color: white;
  background-image: url('thumbnail_IMG_5091.jpg');
  background-attachment: relative;
  background-size: 50%;
  position: sticky;
  border-radius: 10px;
  margin: 10px;
  top: 10px;
}

button {
  border: 2px solid DarkSlateGrey;
  border-radius: 8px;
  padding: 5px;
  margin-left: 5px;
}


ol {
  list-style-type: none;
  border-bottom: 4px solid DimGrey;
  border-top: 4px solid DimGrey;
  padding-left: 0;
}

ol li {
  display: flex;
}

.flash {
  animation: flash 1s ease-out ;
}

@keyframes flash {
  0% { background-color: #FFFFFF; }
  50% { background-color: #FFFF00; }
  100% { background-color: #FFFFFF; }
}

img {
  float: left;
  display: inline-block;
  padding: 5px;
  border-radius: 20px;
  width: 35%;
}

div.content {
  list-style-type: none;
  padding: 50px;
}

div.content, ol li {
  background-color: white;
  color: black;
  border-style: solid;
  border-width: 4px 4px 4px 4px;
  border-radius: 25px;
  content: "";
  clear: both;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  ol {
    display: flex;
    flex-wrap: wrap;       /* allow items to wrap to next row */
    justify-content: center; /* center items in row */
    padding-left: 0;
  }

  ol li {
    flex-direction: column; /* stack image on top of text */
    width: 45%;             /* two items per row, with some margin */
    margin: 10px;           /* space between items */
    display: flex;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-between;
    height: auto;
    padding: 5px;
  }

  .flash {
    animation: flash 1s ease-out ;
  }

  @keyframes flash {
    0% { background-color: #FFFFFF; }
    50% { background-color: #FFFF00; }
    100% { background-color: #FFFFFF; }
  }

  img {
    width: 90%;            /* full width on top */
    margin-bottom: 10px;    /* spacing between image and text */
    float: none;            /* remove float */
    display: block;
    padding: 5px;
    margin: 5px auto
  }

  div.content {
    width: 90%;             /* keep content full width on smaller screens */
    margin: 25px auto;
  }
</style>