nav ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0px; }
  nav ul li {
    /*margin-right: .5em;*/
    /*margin-top: 4em;*/
    width: 42px;
    height: 42px;
    margin-right: 30em;
    margin-left: 3em; }
    nav ul li a {
      padding: .5em 1em; }

#content ol li {
  padding: 0;
  list-style: none; }

#content nav ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0px; }
  #content nav ul li {
    /*margin-right: .5em;*/
    /*margin-top: 4em;*/
    width: 42px;
    height: 42px;
    margin-right: 68em;
    margin-left: 3em; }
    #content nav ul li a {
      padding: .5em 1em; }

.pages ul li {
  padding: 0;
  list-style: none;
  margin-right: 2em; }

@media screen and (min-width: 1024px) {
  ol li {
    margin-left: 2em; }

  .pages ul li {
    margin-right: 7em; } }
h1 {
  font-family: Arial, sans-serif;
  color: #EA0909;
  font-size: 32px;
  text-align: center;
  margin-top: 2.5em; }

nav ul li a {
  font-family: 'Roboto', sans-serif;
  color: #0E218A;
  font-size: 16px; }

.about,
.pages,
.details {
  font-family: 'Roboto', sans-serif;
  color: #0E218A;
  font-size: 16px; }

.details {
  margin: 0 1em 0 1em; }

p {
  font-family: 'Roboto', sans-serif;
  color: #0E218A;
  font-size: 16px;
  text-align: center;
  margin: 0 2em 0 2em; }

h2 {
  font-family: Arial, sans-serif;
  color: #0E218A;
  font-size: 24px;
  margin-left: 1em; }

h4 {
  font-family: 'Roboto', sans-serif;
  color: #0E218A;
  font-size: 24px;
  margin-left: 1em; }

td,
th {
  font-family: 'Roboto', sans-serif;
  color: #0E218A;
  font-size: 16px;
  margin: 4em; }

.arial td {
  font-family: 'Arial', sans-serif; }

.ital td {
  font-style: italic; }

.bold td {
  font-family: 'Arial Black', sans-serif; }

.bol-it td {
  font-family: 'Arial Black', sans-serif;
  font-style: italic; }

.ital1 td {
  font-weight: 400;
  font-style: italic; }

.bold1 td {
  font-weight: 700;
  font-style: bold; }

.bol-it1 td {
  font-weight: 700;
  font-style: italic; }

@media screen and (min-width: 1024px) {
  h2 {
    font-size: 30px;
    margin-left: 2.5em; }

  h4 {
    font-size: 30px;
    margin-left: 2.5em; }

  h1 {
    font-size: 56px;
    margin-top: 2em; }

  .about,
  .pages {
    font-size: 24px; }

  .details {
    font-size: 20px;
    margin: 2em 3em 0 0; }

  p {
    font-size: 24px;
    margin: 0 3em 0 3em; }

  .explain p {
    margin: 2em auto;
    text-align: left;
    font-size: 18px;
    width: 45%; }

  td {
    font-size: 18px; } }
.explain p {
  margin: 2em 1em 0 1em; }

#home p {
  color: white;
  margin-top: 3em; }

table {
  margin-left: 1em; }

@media screen and (min-width: 640px) {
  table {
    margin-left: 5em; } }
@media screen and (min-width: 1024px) {
  .badge,
  .history,
  .mascot {
    display: flex;
    jstify-content: space-between; }

  .elements {
    width: 100%; }

  .details,
  .story {
    width: 60%; } }
.text {
  padding: 0 2em 0 3em; }

@media screen and (min-width: 1024px) {
  .container2 {
    display: flex;
    justify-content: space-between; }

  #pallet .container2 {
    margin-left: 5em; }

  .explain p {
    margin-left: 17em; }

  #pallet .explain p {
    margin-left: 25em; }

  .typefaces {
    display: flex;
    justify-content: space-between; }

  .arialtype {
    margin-left: -2em; }

  .robototype {
    margin-right: 5em;
    margin-top: -1em; } }
.typefaces {
  margin-top: 3em; }

.typos {
  margin-top: 3em;
  font-size: 20px; }

@keyframes englarge {
  from {
    transform: scaleY(1); }

  to {
    transform: scaleY(0.4); } }
.scale {
  animation: englarge 2s infinite alternate; }

@keyframes spin {
  from {
    transform: rotate(0deg); }

  to {
    transform: rotate(180deg); } }
.rotate {
  animation: spin 5s infinite alternate; }

@keyframes spin {
  from {
    transform: rotate(0deg); }

  to {
    transform: rotate(360deg); } }
.next {
  animation: spin 5s infinite; }

@keyframes spin1 {
  from {
    transform: rotate(0deg); }

  to {
    transform: rotate(-360deg); } }
.back {
  animation: spin1 5s infinite; }

@keyframes try {
  0% {
    transform: skew(0deg); }

  25% {
    transform: skew(-40deg); }

  75% {
    transform: skew(0deg); }

  100% {
    transform: skew(40deg); } }
.skew {
  animation: try 5s infinite alternate; }

@keyframes color {
  from {
    -webkit-filter: hue-rotate(0);
    filter: hue-rotate(0); }

  to {
    -webkit-filter: hue-rotate(85deg);
    filter: hue-rotate(85deg); } }
.hue-rotate {
  animation: color 5s infinite alternate; }

@keyframes pic {
  from {
    -webkit-filter: blur(0);
    filter: blur(0); }

  to {
    -webkit-filter: blur(5px);
    filter: blur(5px); } }
.blur {
  animation: pic 5s infinite alternate; }

@keyframes new {
  from {
    -webkit-filter: invert(0);
    filter: invert(0); }

  to {
    -webkit-filter: invert(75%);
    filter: invert(75%); } }
.invert {
  animation: new 5s infinite alternate; }

#home body {
  background-image: url(../images/background.png); }

#content,
#about,
#names,
#badge,
#history,
#usage,
#colour,
#typo,
#mascot,
#pallet body {
  background-image: url(../images/decor.png);
  background-repeat: repeat-x;
  background-position: top; }

.container {
  margin: 5em auto;
  width: 50%;
  padding: 10px;
  text-align: center; }

/*.usage img{
	max-width: 30%;
}
.row img{
	max-width: 30%;
}*/
img {
  max-width: 100%; }

.elements img {
  max-width: 120%; }

.pic img {
  max-width: 80%;
  margin-left: 2.5em; }

.logo img {
  max-width: 100%;
  margin-left: 4em; }

.story {
  margin-top: 2em; }

/*div .red-circle,
div .blue-circle,
div.yellow-circle,
div .white-circle,
div .black-circle,
div .light-circle{
	margin-left: 5em;
}*/
.red-circle {
  width: 80px;
  height: 80px;
  background: #D91521;
  border-radius: 50%; }

.gray-circle {
  width: 80px;
  height: 80px;
  background: #6D7797;
  border-radius: 50%; }

.white-circle {
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 50%;
  border: 1px solid black; }

.blue-circle {
  width: 80px;
  height: 80px;
  background: #293484;
  border-radius: 50%; }

.light-circle {
  width: 80px;
  height: 80px;
  background: #FAE484;
  border-radius: 50%; }

.black-circle {
  width: 80px;
  height: 80px;
  background: #161413;
  border-radius: 50%; }

.yellow-circle {
  width: 80px;
  height: 80px;
  background: #F5C900;
  border-radius: 50%; }

.scheme table {
  border-collapse: separate;
  border-spacing: 1px 0;
  width: 70%; }

.scheme table td {
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center; }

.frontimg img {
  -webkit-filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.9));
  filter: drop-shadow 16px 16px 10px rgba(0, 0, 0, 0.9); }

#home h1 {
  color: #ffffff;
  font-size: 32px;
  text-shadow: 2px 2px 2px black, 0 0 25px black, 0 0 5px darkblue;
  margin-top: 2em; }

#home h3 {
  color: #ffffff;
  font-size: 24px;
  text-shadow: 2px 2px 2px black, 0 0 25px black, 0 0 5px darkblue; }

.scheme table {
  margin-left: 3em;
  margin-top: 2em; }

@media screen and (min-width: 1024px) {
  /*div .red-circle,
  div .blue-circle,
  div.yellow-circle,
  div .white-circle,
  div .black-circle,
  div .light-circle{
  	margin-left: 1em;
  }*/
  .scheme table {
    margin-left: 5em;
    width: 150%; }

  img {
    max-width: 100%; }

  .usage img {
    max-width: 45%; }

  .row img {
    max-width: 30%; }

  .elements img {
    max-width: 100%; }

  .pic img {
    max-width: 90%; }

  .logo img {
    max-width: 90%;
    margin-left: 2em; }

  .frontimg img {
    -webkit-filter: drop-shadow(20px 20px 10px rgba(0, 0, 0, 0.9));
    filter: drop-shadow 20px 20px 10px rgba(0, 0, 0, 0.9); }

  #home h1 {
    font-size: 56px;
    margin-top: 1em; }

  #home .container {
    margin: 3em auto; }

  #home h3 {
    font-size: 30px; }

  .arial td,
  .roboto td {
    padding: .5em 1.5em .5em 0; } }
.content {
  display: flex;
  justify-content: space-between; }

.year {
  width: 35%; }

/*table {
    border-collapse: collapse;
}*/
.hisname td,
.cells td {
  padding-top: 1em;
  padding-bottom: 1em; }

.arial td,
.roboto td {
  padding: .5em 1em .5em 0; }