:root
{
  --foregroundColor: #ffffff;
  --backgroundColor: #000000;
  --borderColor: rgba(255, 255, 255, 0.1);
  --border: 1px solid var(--borderColor);

  --shadowRadius: 25px;
  --rainbowColor: 0, 100%, 100%;
  --shadow: 0px 0px var(--shadowRadius) hsla(var(--rainbowColor), 0.8);
  --lightShadow: 0px 0px var(--shadowRadius) hsla(var(--rainbowColor), 0.4);
  --border: 1px solid rgba(255, 255, 255, 0.5);
  --borderRadius: 10px;
  --rainbow: hsl(var(--rainbowColor));
}


body
{
  width: auto;
  text-align: justify;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: var(--backgroundColor);
  color: var(--foregroundColor);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}


@media (max-width: 1024px)
{
  body{
    width: auto;
    font-size: 16px;
  }

  nav li{
    font-size: 1.2em;
    padding: 15px;
  }

  section
  {
    margin-left: 30px;
    margin-right: 30px;
  }
}


#pageTitle
{
  margin-top: 0px;
}


#content>h2:first-of-type
{
  margin-top: 0;
}


/*h1, h2, h3, h4*/
#pageTitle
{
  text-shadow: 0px 0px 50px hsla(var(--rainbowColor), 1.0);
}


pre
{
  border: 1px solid var(--foregroundColor);
  border-radius: var(--borderRadius);
  padding: 20px;
}


footer
{
  text-align: center;
  border-top: var(--border);
  padding: 0px;
}


footer>p
{
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px;
}


#mainSection
{
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--borderRadius);
  text-align: justify;
}


#content
{
  padding: 40px;
}


a, a:visited
{
  color: var(--rainbow);
  text-decoration: none;
}


#content a, #content a:visited
{
  text-decoration: underline;
}


ul>a, ul>a:visited
{
  color: var(--foregroundColor);
  display: table-cell;
}


nav ul
{
  padding: 0px;
  margin: 0px;
}


nav li{
  width: 120px;
  display: inline-block;
  border: var(--border);
  border-top: none;
  border-left: none;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}


.currentPage
{
  box-shadow: inset var(--shadow);
}

nav > ul > a > li:hover:not(.currentPage)
{
  box-shadow: inset var(--lightShadow);
}


nav > ul > a:first-of-type > li
{
  border-radius: var(--borderRadius) 0px 0px 0px;
}


nav > ul > a:last-of-type > li
{
  border-radius: 0px 0px var(--borderRadius) 0px;
}


hr.separator
{
  margin-top: 30px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--foregroundColor);
}


hr.separator:last-child
{
  display: none;
}


.paragraph:not(:last-child)
{
  margin-bottom: 40px;
}


/* Begin form-specific */
.formSection
{
  width: 880px;
  margin-left: auto;
  margin-right: auto;
}


.formField
{
  display: inline-block;
  background-color: var(--backgroundColor);
}


.fieldContainer
{
  width: 880px;
  display: inline-block;
  margin-bottom: 20px;
}


input, textarea
{
  padding-left: 10px;
  background-color: var(--backgroundColor);
  color: var(--foregroundColor);
  border: var(--border);
  border-radius: var(--borderRadius);
}


#subjectField, #subjectCopy
{
  width: 410px;
}


textarea.formField, #messageCopy
{
  width: 874px;
  height: 300px;
  resize: vertical;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  color: var(--foregroundColor);
  border: var(--border);
}


#messageField
{
  margin-bottom: 30px;
}


textarea.formField:focus,
#nameField:focus, #emailField:focus, #subjectField:focus, #captchaField:focus
{
  outline: none !important;
  box-shadow: 0 0 25px hsla(var(--rainbowColor), 0.4);
}


#captchaImage
{
  cursor: pointer;
}


button
{
  width: 200px;
  height: 30px;
  background-color: var(--backgroundColor);
  color: var(--foregroundColor);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--borderRadius);
}


button:hover
{
  box-shadow: inset var(--shadow);
}


.errorMessage
{
  display: none;
  color: #ff8800;
  font-size: smaller;
}


#contactSubmitButton
{
  margin-left: auto;
  margin-right: auto;
}


#contactSucceeded
{
  display: none;
}

/* End form-specific */