:root {
  /* Variables / Tema renkleri - W3C CSS Validator uyari veriyor! */
  --main-color: darkgreen;
  --nav-color: black;
  --font-color: white;
  --hover-color: dimgray;
  --selection-color: lawngreen;
}

html {
  /* Inherited Properties */
  color: black; background-color: white;
  font: normal normal 400 16px/1.15 'Arial', 'Helvetica', sans-serif;
  letter-spacing: normal; word-spacing: normal;
  text-indent: 0; white-space: normal; word-wrap: normal;
  text-shadow: none; text-transform: none;
  border-collapse: separate;  border-spacing: 2px;
  list-style-position: outside; font-stretch: normal;
  text-align: left; direction: ltr; visibility: visible;
  scroll-behavior: smooth;
}

body {
  background-color: whitesmoke;
  margin: 0;
  padding: 0 20px;
}

::selection {
  color: inherit;
  background-color: var(--selection-color);
}

a, a:link, a:visited {
  color: darkblue;
  text-decoration: underline;
}

a:hover, a:focus, a:active {
  color: darkred;
}

input, textarea, select {
  border: 1px solid darkgray;
}

input:focus, textarea:focus, select:focus {
  background-color: palegreen;
}

mark, mark::selection {
  color: var(--font-color);
  background-color: var(--main-color);
}

.clearfix::after {
  /* clearfix hack */
  content: "";
  clear: both;
  display: table;
}

header img {
  display: inline-block;
  position: absolute;
  top: 1px;
  left: 20px;
  width: auto;
  height: 80px;
  z-index: 3;
}

header, footer {
  border: 1px solid var(--nav-color);
  text-align: center;
  color: var(--font-color);
  background-color: var(--main-color);
  margin: 0;
  padding: 0 80px;
}

header::after {
  content: url(../image/on.jpg);
  transform: scale(.112);
  display: block;
  position: fixed;
  width: 0;
  height: 0;
  top: 0px;
  left: 22px;
  z-index: 2;
}

nav {
  position: sticky;
  top: 0px;
  left: 50px;
  z-index: 1;
}

nav h2 {
  display:none;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 10px;
  overflow: visible;
  background-color: var(--nav-color);
  text-align: center;
}

nav li {
  display: inline-block;
}

nav a {
  display: inline-block;
  color: var(--font-color) !important;
  text-decoration: none !important;
  padding: 5px 10px;
}

nav li:first-of-type {
  background-color: var(--main-color);
}

nav li ~ li:hover {
  background-color: var(--hover-color);
}

hr {
  margin: 0 0 30px 0;
}

main > * {
  width: 70%;
  counter-reset: article 0;
}

article {
  counter-increment: article;
}

article h2::before {
  content: 'Article ' counter(article) '- ' ;
}

figure, fieldset {
  margin: 0;
}

iframe, canvas, svg, video, audio,
embed, object, dialog, fieldset {
  border: 2px groove;
}

aside {
  position: absolute;
  width: 28%;
  height: auto;
  top: 125px;
  right: 10px;
}

aside ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@media print {
/* printer */

  @page {
    size: A4;
    margin: 20px 20px 20px 40px;
  }

  body {
    background-color: white;
    filter: grayscale(100%);
    font-family: 'Times New Roman', 'Times', serif;
  }

  header, nav, aside, footer, iframe, canvas, svg,
  video, audio, embed, object, dialog, .noprint {
    display: none;
  }

  main > * {
    width: 100%;
  }

  .p-b-a {
    page-break-after: always;
  }

  .p-b-b {
    page-break-before: always;
  }

  image, figure, map, picture,
  table, ul, ol, dl {
    page-break-inside: avoid;
  }

} /* @media print end */

@media only screen and (max-width: 992px) {
/* small screen */

  hr {
    margin: 0 0 60px 0;
  }

} /* @media screen small screen end */

@media only screen and (max-width: 768px) {
/* tablet */

  header img, header::after, aside {
    display: none;
  }

  body, header, footer {
    padding: 0 6px;
  }

  nav {
    left: 6px;
  }

  nav ul, nav li:first-of-type {
    text-align: left;
    padding: 0;
  }

  main > * {
    width: 100%;
  }

} /* @media screen tablet end */

@media only screen and (max-width: 576px) {
/* mobile */

  hr {
    margin: 0 0 90px 0;
  }

} /* @media screen mobile end */