@import 'reset.css';

html {
  height: 100%;
  font-family: Tahoma, Geneva, sans-serif;
  color: #000000;
  font-size: 11pt;
}

body {
  height: 100%;
}

h2 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 14pt;
}

h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: bold;
}

p {
  margin-bottom: 12px;
}

a {
  color: #000000;
}

ul {
  list-style: none;
}

ul > li::before {
  content: "- ";
}

/* layout */
header {
  grid-area: header;
  padding: 12px;
}

main {
  grid-area: main;
  padding: 12px;
  max-width: 900px;
  margin: 0 auto;
}

footer {
  grid-area: footer;
  text-align: center;
  padding: 12px;
  color: #cccccc;
  font-size: 8pt;
}

footer a {
  color: #cccccc;
}

.wrapper {
  height: 100%;
  display: grid;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr 48px;
}
/* end: layout */

#interests-container {
  font-family: "Courier New", Courier, monospace;
  font-size: 32px;
  color: #cccccc;
}

#interests-container .author,
#interests-container .color {
  color: #000000;
}

/* extra small devices (portrait phones, less than 576px); default (like Bootstrap) */

/* small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #interests-container {
    margin-top: 48px;
  }
}

/* large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #interests-container {
    margin-top: 128px;
    font-size: 48px;
  }
}

/* extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #interests-container {
    font-size: 64px;
  }
}