/* HTML and Body
---------------------------------------- */
body {
  font-family: var(--body-font);
  background: var(--body-bg);
  color: var(--text-color);
}
/* Regions
---------------------------------------- */
summary {
  color: var(--text-color);
}

/* Typography
---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--bold-color);
}
strong {
  color: var(--bold-color);
}
em {
  color: var(--theme-color);
}
a {
  -webkit-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease;
}
a,
a:active,
li a.active {
  color: var(--theme-color);
}
a:hover {
  color: var(--theme-color-two);
}

/* Typography-> code tags */
code,
kbd,
pre,
samp {
  background: var(--dark);
  color: #ffffff;
}
mark {
  background: var(--theme-color);
  color: #ffffff;
}
figcaption {
  background: var(--theme-color-two);
  color: #ffffff;
}
/* Form
---------------------------------------- */
/* Form -> Button */
a.button,
.button,
button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: var(--theme-color-two);
  color: #ffffff;
  border: 4px solid var(--theme-color);
  border-radius: 8px;
  -webkit-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
a.button:hover,
.button:hover,
button:hover,
[type="button"],
[type="reset"]:hover,
[type="submit"]:hover {
  background-color: var(--dark);
  color: var(--theme-color);
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  color: var(--text-color);
  background-color: var(--light);
  border: 1px solid var(--border);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border: 1px solid var(--theme-color);
  background: #f0f0f0;
}
fieldset {
  border: 1px solid var(--border);
}
/* Form -> Label */
.form-item label,
form label {
  font-weight: 700;
  color: var(--bold-color);
}
summary {
  font-family: var(--heading-font);
  font-weight: 700;
}
/* Form -> Radio buttons */
input[type="radio"],
input[type="checkbox"] {
  border: 2px solid var(--theme-color-two);
}
input[type="radio"]:hover,
input[type="checkbox"]:hover {
  border: 2px solid var(--theme-color);
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: var(--theme-color);
  color: #000000;
}
input[type="checkbox"] {
  appearance: none;
}
input[type="checkbox"]::after {
  content: '\2714';
  text-align: center;
  display: none;  
}
input[type="checkbox"]:checked::after {
  display: block;
}
select {
  color: var(--text-color);
  background: #eeeeee;
  border: 1px solid var(--border);
}
::-webkit-input-placeholder {
  color: var(--border);
}
::placeholder {
  color: var(--border);
  opacity: 1;
}
:-ms-input-placeholder {
  color: var(--border);
}
::-ms-input-placeholder {
  color: #969696;
}
:-moz-placeholder {
  color: var(--border);
}
::-moz-placeholder {
  color: var(--border);
}
/* Common HTML Elements
---------------------------------------- */
hr {
  background-color: var(--border);
}
dt {
  color: var(--bold-color);
}
blockquote {
  background: var(--light);
  box-shadow: 2px 2px 6px var(--border);
  border-left: 8px solid var(--theme-color-two);
}

/* Table
---------------------------------------- */
th {
  background: var(--theme-color-two);
  color: #fff;
  border: 1px solid var(--header-top-bg);
}
td {
  border: 1px solid var(--border);
}


/* Selection
---------------------------------------- */
::-moz-selection {
  background: var(--theme-color);
  color: #fff;
  text-shadow: none;
}
::selection {
  background: var(--theme-color);
  color: #fff;
  text-shadow: none;
}