/* a minimalist set of CSS resets */

/* default to border-box */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* adjust typography defaults */
body {
  background-image: linear-gradient(to bottom right, #c6e0bd, #dde8f2);
  color: #222222;
  margin: 32px;
  font-family: monospace;
  line-height: 1.5;
}

/* images and videos max out at full width */
img,
video {
  height: auto;
  max-width: 100%;
}

span {
  color: deeppink;
  font-size: 22px;
}

/* creating the top header area */
.site-header {
  border-top: 5px solid #87ab88;
  position: top;
}

/* creating a table */
table {
  width: 100%;
  padding: 2px 2px;
}

td {
  word-wrap: break-word;
  max-width: 100px;
  font-size: smaller;
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-style: solid;
  border-color: thistle;
}

/* creating a text area */
.text-area {
  border-top: 1px solid #87ab88;
  padding: 30px 0;
  font-size: smaller;
}

/* for a shadow*/
.box {
  box-shadow: 10px 10px white;
}

/* some special text classes */
.site-title {
  font-size: 22.75px;
  font-weight: 300;
  color: #87ab88;
  letter-spacing: 1px;
}

.emoji {
  font-size: 22.75px;
}