html {
    font-size: 16px;
    color: #000;
    font-family: helvetica, sans-serif;
    background-color: #555;
}


/* general link style */
a {
  color: black;
  text-decoration: none;
}


/* link style for italic area */
a.caption {
  color: #666;
  text-decoration: underline;
  padding: 0;
}

/* text style for italic area */
.caption  {
      font-style: italic;
      font-size: 1rem;
      color: #666;
      padding: 1.2rem;
  }


/* horizontal lines */
hr  {
  border: 1px solid black;
}



/* main CYCLOPS title */
h1 {
  font-family: helvetica;
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  color: #000;
}

/* for phones */
@media (max-width:  600px) {
  h1 {
    font-size: 2rem;
  }
}

/* for tablets and small screens */
@media (min-width:  600px) {
  h1 {
    font-size: 3rem;
}
}

/* for large screens */
@media (min-width:  1024px) {
  h1  {
    font-size: 3.5rem;
}
}



/* main content */
#column {
    background-color: #e6e6e6;
    /* dark grey margin at top */
    margin: 2em auto;
    position: relative;
    font-family: serif;
    font-size: 1.25rem;
    text-align: left;
    /* add extra light grey at top */
    padding: 1.3em 1em 2em 1em;
}
/* for phones */
@media only screen and (max-width:  600px) {
    #column {
      max-width: 90%;
      margin: 0.5rem auto;
    }
}
/* for tablets and small screens */
@media only screen and (min-width:  600px) {
    #column {
      max-width: 85%;
    }
}
/* for desktop */
@media only screen and (min-width:  1024px) {
    #column {
      max-width: 80%;
      font-size: 1.3rem;
      text-align: justify;
    }
}
/* large screens */
@media only screen and (min-width: 1200px) {
  #column {
      max-width: 70%;
      text-align: justify;
  }
}
/* extra large screens */
@media only screen and (min-width: 1500px) {
  #column {
      max-width: 50%;
      text-align: justify;
  }
}


/* end links */
#footer   {
        margin: 0 auto;
        max-width: 30em;
        text-align: center;
        font-size: 1.1rem;
        padding: 2em;
}