:root {
  --cor-header: #f1f1f1;
  --cor-bg-header: #0d0e56;
  --min-height-header: 4rem;
  --cor-nav: #f1f1f1;
  --cor-bg-nav: #272787;
  --min-height-nav: 2rem;
  --cor-main: #f1f1f1;
  --cor-bg-main: #cecece;
  --min-height-main: 87%;
  --cor-sec: #f1f1f1;
  --cor-bg-sec: #272787;
  --min-height-sec: 4rem;
  --cor-footer: #f1f1f1;
  --cor-bg-footer: #0d0e56;
  --min-height-footer: 3rem;
  --cor-footer-copyryght: #f1f1f1;
  --cor-bg-footer-copyryght: #0d0e56;
  --min-height-footer-copyryght: 1rem;
  --font-size-footer-copyryght: 0.7rem;
  --text-align-footer-copyryght: center;
}
@font-face {
  font-family: "Serpentine Std";
  src: url("../font/SerpentineStd-BoldOblique.eot");
  src: local("Serpentine Std Bold Oblique"),
    local("../font/SerpentineStd-BoldOblique"),
    url("../font/SerpentineStd-BoldOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../font/SerpentineStd-BoldOblique.woff2") format("woff2"),
    url("../font/SerpentineStd-BoldOblique.woff") format("woff"),
    url("../font/SerpentineStd-BoldOblique.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Serpentine Std";
  src: url("../font/SerpentineStd-Bold.eot");
  src: local("Serpentine Std Bold"), local("../font/SerpentineStd-Bold"),
    url("../font/SerpentineStd-Bold.eot?#iefix") format("embedded-opentype"),
    url("../font/SerpentineStd-Bold.woff2") format("woff2"),
    url("../font/SerpentineStd-Bold.woff") format("woff"),
    url("../font/SerpentineStd-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Serpentine Std";
  src: url("../font/SerpentineStd-MediumOblique.eot");
  src: local("Serpentine Std Medium Oblique"),
    local("../font/SerpentineStd-MediumOblique"),
    url("../font/SerpentineStd-MediumOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../font/SerpentineStd-MediumOblique.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Serpentine Std";
  src: url("../font/SerpentineStd-Light.eot");
  src: local("Serpentine Std Light"), local("../font/SerpentineStd-Light"),
    url("../font/SerpentineStd-Light.eot?#iefix") format("embedded-opentype"),
    url("../font/SerpentineStd-Light.woff2") format("woff2"),
    url("../font/SerpentineStd-Light.woff") format("woff"),
    url("../font/SerpentineStd-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Serpentine Std";
  src: url("../font/SerpentineStd-Medium.eot");
  src: local("Serpentine Std Medium"), local("../font/SerpentineStd-Medium"),
    url("../font/SerpentineStd-Medium.eot?#iefix") format("embedded-opentype"),
    url("../font/SerpentineStd-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Serpentine Std";
  src: url("../font/SerpentineStd-LightOblique.eot");
  src: local("Serpentine Std Light Oblique"),
    local("../font/SerpentineStd-LightOblique"),
    url("../font/SerpentineStd-LightOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../font/SerpentineStd-LightOblique.woff2") format("woff2"),
    url("../font/SerpentineStd-LightOblique.woff") format("woff"),
    url("../font/SerpentineStd-LightOblique.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Roboto-Regular";
  src: url("../font/Roboto/Roboto-Regular.ttf");
  src: local("Roboto"),
    url("../font/Roboto/Roboto-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "fontawesome";
  src: url("../font/fontawesome/fontawesome-webfont.woff2");
  src: local("Roboto"),
    url("../font/fontawesome/fontawesome-webfont.woff2") format("woff2");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Roboto, Verdana, Tahoma, sans-serif;
  font-size: 1rem;
}
.__site {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(6, auto);
}
.___header {
  grid-row: 1;
  color: var(--cor-header);
  background-color: var(--cor-bg-header);
  min-height: var(--min-height-header);
}
.___nav {
  grid-row: 2;
  color: var(--cor-nav);
  background-color: var(--cor-bg-nav);
  min-height: var(--min-height-nav);
}
.___main {
  grid-row: 3;
  color: var(--cor-main);
  background-color: var(--cor-bg-main);
  min-height: var(--min-height-main);
  padding-top: 15px;
  padding-bottom: 15px;
}
.___section {
  grid-row: 4;
  color: var(--cor-sec);
  background-color: var(--cor-bg-sec);
  min-height: var(--min-height-sec);
}
.___footer {
  grid-row: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10vh;
  color: var(--cor-footer);
  background-color: var(--cor-bg-footer);
  min-height: var(--min-height-footer);
}
.footer-copyright {
  grid-row: 6;
  color: var(--cor-footer-copyryght);
  background-color: var(--cor-bg-footer-copyryght);
  min-height: var(--min-height-footer-copyryght);
  line-height: var(--min-height-footer-copyryght);
  font-size: var(--font-size-footer-copyryght);
  text-align: var(--text-align-footer-copyryght);
}

.footer-copyright span {
  color: var(--cor-footer-copyryght);
  background-color: var(--cor-bg-footer-copyryght);
  font-size: var(--font-size-footer-copyryght);
}