@font-face {
    font-family: 'r3';
    src: url('r3.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'r1';
    src: url('r1.woff2') format('woff2'),
         url('r1.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'r2';
    src: url('r2.woff2') format('woff2'),
         url('r2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-color: #272727; 
    --hd-color: #6B7A8F; 
    --hl-color:#F7C331; 
    --app-color:#F7882F;
    --txt-color:#DCC7AA;
    --light-color:#FDFDFD;
    --link-color:#98aa47;
}

@keyframes rotation {

  0% {

transform: rotate(0deg); }

  100% {

transform: rotate(360deg); } }

#loader-wrapper {
  background-color: var(--bg-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
}

.loader {
  width: 40px;
  height: 40px;
  border: 5px solid #333333;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin-top:calc(50vh - 20px);
  display: inline-block;
  box-sizing: border-box;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}

.nav {
overflow: hidden; 
}

.nav a {
float: left;
margin: 10px;
display: block; 
}

.nav #menu-toggle {
display: none; 
}

html, body { margin: 0; padding: 0; }
body { padding: .5em; position: relative; background-image: url(bg1.webp); background-repeat: repeat; var(--bg-color); color: var(--txt-color); }

img { max-width: 100%; }

h1,h2,h3,h4,h5,h6,p {
  display: block;
  margin-left: 2.5%; padding: 12px; max-width: 750px;
}

h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; margin-top: 1px; margin-bottom: 1px; }
h4 { font-size: 18px; margin-top: 1px; margin-bottom: 1px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

h1.title { margin-bottom: 0; padding-bottom: 0; color: var(--light-color); font: normal 32px 'r3','r1'; }
h2.subheading { font-size: 18px; line-height: 20px; font-style: italic; }
.hl-txt { color: var(--hl-color); }
p.r1 { margin-top: 1px; }
.r1 { font-family: 'r1', 'URW Palladio L', P052, Sylfaen, serif; font-size: 16px; }
.r2 { font-family: 'r2', Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
font-weight: normal; }
a { color: var(--link-color); }

.mail { color: #545454; }
#liametis { background-color: #191919; margin: 2px 0; padding: 2px 6px; border-radius: 3px; }

.data-box { 
  margin: 0;
  background-color: var(--hd-color); border-radius: 0 15px;
  color: var(--txt-color);
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", 
  "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", 
  "Droid Sans Mono", "Consolas", "Courier New", monospace; font-size: 12px;
}

.footer { color: var(--light-color); }

@media screen and (max-width: 600px) {

.nav a:not(:first-child) {
  display: none; 
}

.nav a#menu-toggle {
  float: right;
  display: block; } 
}

@media screen and (max-width: 600px) {

.nav.nav--open {
  position: relative; 
}

.nav.nav--open #menu-toggle {
  position: absolute;
  right: 0;
  top: 0; 
}

.nav.nav--open a {
  float: none;
  display: block;
  text-align: left; } 
}

.menu-toggle__bar1, .menu-toggle__bar2, .menu-toggle__bar3 {
width: 21px;
height: 3px;
background-color: #000000;
margin: 4px 0;
transition: 0.3s; 
}

.menu-toggle--open .menu-toggle__bar1 {
transform: translate(0, 7px) rotate(-45deg); 
}

.menu-toggle--open .menu-toggle__bar2 {
opacity: 0; 
}

.menu-toggle--open .menu-toggle__bar3 {
transform: translate(0, -7px) rotate(45deg); 
}

.flex-container_sm {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: space-around;
}

.flex-item_sm {
  display: block;
  margin: 1.5%;
  width: 30%; max-width: 200px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  border: 0px solid blue;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: stretch;
  align-content: space-around;
}

.flex-item {
  display: block;
  margin: 2.5%;
  width: 45%; max-width: 600px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  border: 0px solid blue;
}

@media (max-width: 650px) {

  .flex-item {
  display: block;
  margin: 2.5%; padding: 12px;
  width: 90%; max-width: 90%;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  border: 0px solid blue;
}

}