* {
  box-sizing: border-box;
}

body {
  padding: 10px;
  font: 16pt "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  body {
    padding: 0px;
    margin: 0px;
    font-size: 8pt;
  }


  ul {
    list-style-type: none;
    /* Removes the bullets */
    padding: 0;
    /* Removes default indentation */
    margin: 0;
    /* Removes default spacing */
  }

  .userContainer {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin: 0px;
    /* border: 1px solid red; */
  }

  .userHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-bottom: 10px; */
    /* border: 1px solid red; */
  }

  .userItem {
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-bottom: 10px;
    /* border: 1px solid red; */
  }

  .userItem img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .userPhoto {
    margin-left: 5px;
    align-items: left;
    width: 10%;
  }

  .userName {
    margin-left: 10px;
    align-items: left;
    width: 20%;
  }

  .userBuilding {
    /* margin-left: 10px; */
    align-items: center;
    width: 7%;
  }

  .userRoom {
    /* margin-left: 10px; */
    align-items: center;
    width: 10%;
  }

  .userDate {
    margin-left: 10px;
    align-items: left;
    width: 15%;
  }

  .userElectric {
    margin-left: 10px;
    align-items: left;
    width: 10%;
  }

  .userWater {
    margin-left: 10px;
    align-items: left;
    width: 10%;
  }

  .userTotal {
    margin-left: 10px;
    align-items: left;
    width: 10%;
  }

}


@media screen and (orientation: landscape) {
  body {
    padding: 0px;
    margin: 0px;
    font-size: 12pt;
  }

  .userContainer {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin: 0px;
    /* border: 1px solid red; */
  }

  .userHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-bottom: 10px; */
    /* border: 1px solid red; */
  }

  .userItem {
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-bottom: 10px;
    /* border: 1px solid red; */
  }


  .userPhoto {
    margin-left: 5px;
    align-items: left;
    width: 5%;
  }

  .userPhoto img {
    width: 100%;
    height: auto;
  }

  .userName {
    margin-left: 10px;
    align-items: left;
    width: 10%;
  }

  .userBuilding {
    /* margin-left: 10px; */
    align-items: center;
    width: 7%;
  }

  .userRoom {
    /* margin-left: 10px; */
    align-items: center;
    width: 10%;
  }

  .userDate {
    margin-left: 10px;
    align-items: left;
    width: 15%;
  }

  .userElectric {
    margin-left: 10px;
    align-items: left;
    width: 10%;
  }

  .userWater {
    margin-left: 10px;
    align-items: left;
    width: 10%;
  }

  .userTotal {
    margin-left: 10px;
    align-items: left;
    width: 10%;
  }
}