body {
  background-color: #282828;
  color: #f0f0f0;
  font-family: sans-serif;
  height:100%;
}
html { height:100%; }

/* phone */
@media screen and (max-height: 5in) {
  body {
    font-size: 0.16in;
  }
  #cnt {
    width: 7in;
    max-width: 95%;
    margin:auto;
  }
  h1 {
    font-size: 0.22in;
    font-weight: bold;
    margin: 0.12in;
    text-align: center;
  }

  h2 {
    font-size: 0.18in;
    font-weight: bold;
    margin: 0.12in;
    text-align: center;
  }

  p {
    margin: 0.12in;
    text-align: justify;
  }
  
}

/* desktop */
@media screen and (min-height: 5in) {
  body {
    font-size: 0.16in;
  }
  #cnt {
    width: 7in;
    max-width: 95%;
    margin:auto;
  }
  h1 {
    font-size: 0.22in;
    font-weight: bold;
    margin: 0.12in;
    text-align: center;
  }

  h2 {
    font-size: 0.18in;
    font-weight: bold;
    margin: 0.12in;
    text-align: center;
  }

  p {
    margin: 0.12in;
    text-align: justify;
  }
  
}

#bkg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  min-height: 2in;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: top;
  z-index: -1;
}
#hdr {
  width: 100%;
  height: 30%;
  min-height: 2in;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#flr {
}

.dlctn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

.dlitm {
  display: flex;
  min-width: 2in;
  margin: 0.2in;
  padding: 0.2in;
  background: #00a000;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dlitm1 {
  background: #008000;
}
.dlitm2 {
  background: #00a000;
}
.dlitm3 {
  background: #00c000;
}

.dlitm:hover {
  background: #10e000;
}

.dlinn {
  text-align: center;
}