:root {
  /* Scale */
  --measure: 60ch;
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1em;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --border-thin: 1px;

  /* Box colors. */
  --box-color-light: #fff;
  --box-color-dark: #000;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 33vw;
}

body {
  min-height: 100vh;

  --border: 4px solid black;
  --padding: calc(1em * 1.4);
  --border-thick: 4px;

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  font:
    400 "Palatino Linotype",
    "Book Antiqua",
    Palatino,
    serif;
  color: #333;
}

body nav {
  position: sticky;
  display: flex;
  justify-content: center;
  top: 0;
  border-bottom: 2px solid #c22a09;
  background: white;
  line-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

nav ul {
  width: 99%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  box-sizing: border-box;
  background: #fff;
  padding: 0;
  margin: 1em 0 0.5em;
}

li {
  /* margin-right: 20px; */
  color: #333;
}

nav li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl {
  margin: 0;
  padding: 0.9em 0;
}

h1 {
  clear: both;
  font:
    600 1.6em Arial,
    Helvetica,
    sans-serif;
  color: #333;
  letter-spacing: 1px;
  letter-spacing: 0;
  text-align: left;
}

h2 {
  font:
    400 1.3em Arial,
    Helvetica,
    sans-serif;
  color: #333;
  margin: 1rem 0 0;
  line-height: 150%;
}

p {
  font-size: 1.1em;
}

a {
  text-decoration: none;
  color: #c22a09;
}

nav ul li a {
  text-decoration: none;
  padding: 6px 12px 5px;
  padding: 0.6em 0.2em 0.5em;
  font:
    400 "Palatino Linotype",
    "Book Antiqua",
    Palatino,
    serif;
  color: #333;
  letter-spacing: 0;
}

a:link {
  /* color: #c22a09; */
  color: #333;
}

.content a {
  color: #c22a09;
}

.header--logo-wrapper a {
  text-decoration: none;
}

nav ul li a:hover {
  color: #c22a09;
}

nav ul li a.here {
  color: #333;
  font-style: italic;

  /* border-bottom: 1px solid #000; */
}

blockquote.blockquote {
  width: 100%;
}

blockquote.blockquote p.p1 {
  width: 90%;
  padding: 0 0 0 5%;
  border-left: solid 1px #ccc;
  font-style: italic;
}

blockquote.blockquote p.p2 {
  width: 90%;
  padding: 0 0 0 5%;
  border-left: solid 1px #ccc;
  font-style: italic;
}

.container {
  margin: 4em auto 0;
  padding: 2em;
}

.wrapper {
  /* border-width: var(--border-thick);
  border: var(--border-thick) solid;
  padding: var(--padding); */
  min-height: 100vh;
}

.center {
  box-sizing: content-box;
  display: block;
  margin-left: auto;
  margin-right: auto;

  /* ↓ Intrinsic Centering: That is, centering elements based on their natural, content-based widths. */

  /* display: flex;
  flex-direction: column;
  align-items: center; */

  /* ↓ Gutters (i.e. 1em) */

  /* padding-left: 1em;
  padding-right: 1em; */
}

.center-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content ul {
  list-style-type: none;
}

.content ul li::before {
  content: "\2013 ";
  position: absolute;
  margin-left: -22px;
}

.content table {
  margin-left: auto;
  margin-right: auto;
}

.header {
  height: 12em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 -1em;
}

/* prettier-ignore */
.header--logo-wrapper {
  display: flex;
  flex-direction: column;
  place-content: center center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: white;
  color: black;
  text-align: center;
}

.header--logo-text span {
  font:
    550 45px arial,
    helvetica,
    sans-serif;
  font-size: 4.5em;
  letter-spacing: 0;
  color: #333;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-right: 0.2em;
}

.header--logo-text:hover > a span {
  color: #c22a09;
}

.header--logo-text span a:hover {
  color: #c22a09;
}

.header--logo-wrapper h2 {
  font:
    400 18px "Palatino Linotype",
    "Book Antiqua",
    Palatino,
    serif;
  font-size: 1.8em;
  color: #333;
  margin-top: -0.8rem;
  padding-top: 0;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: small;
  position: fixed;
  height: 5em;
  bottom: 0;
  background-color: white;
  color: #333;
  text-align: center;
  border-top: #333 1px solid;
  box-sizing: content-box;
  max-width: none;
}

.article {
  height: 100%;
  width: 100%;
  background: white;
  padding-bottom: 4em;
  /* padding: var(--padding); */
}

.content {
  text-align: left;

  /* font-size: 2em; */
  padding: 0 2rem;
  line-height: 150%;
}

.textured {
  background-attachment: fixed;
  background-image: url("http://ketboga.com/images/texture.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 10px 0;
  margin: 1em 0;
}

.blocky {
  width: auto;
}

.inner_no_overflow {
  padding: 3.5em;
}

img.floatRight {
  margin: 5px 0 10px 15px;
  margin: 0.5rem 0 1rem 1.5rem;
}

img.floatLeft {
  margin: 5px 15px 10px 0;
  margin: 0.5rem 1.5rem 1rem 0;
}

.width100 {
  width: 100%;
}

.floatLeft {
  float: left;
}

#strateji {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  border-collapse: collapse;
}

#strateji {
  font-size: 80%;
}

#strateji th[colspan="2"] {
  text-align: center;
}
#swot,
#swot th,
#swot td {
  border: 1px solid gray;
  border-collapse: collapse;
}

#swot th,
#alis-veris th,
#strateji th,
#swot td,
#alis-veris td,
#strateji td {
  padding: 3px 15px;
  text-align: left;
}

.gridjs-container {
  color: #000;
  display: inline-block;
  overflow: hidden;
  padding: 2px;
  position: relative;
  z-index: 0;
  font-size: 70%;
}

.gridjs-wrapper:nth-last-of-type(2) {
  border-bottom-width: 1px;
  border-radius: 8px;
}

.gridjs-wrapper {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-color: #e5e7eb;
  border-radius: 8px 8px 0 0;
  border-top-width: 1px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.26);
  display: block;
  overflow: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

.gridjs *,
.gridjs ::after,
.gridjs ::before {
  box-sizing: border-box;
}

.gridjs-container {
  color: #000;
}

table.gridjs-table {
  border-collapse: collapse;
  display: table;
  margin: 0;
  max-width: 100%;
  overflow: auto;
  padding: 0;
  table-layout: auto;
  text-align: left;
  width: 100%;
}

.gridjs *,
.gridjs ::after,
.gridjs ::before {
  box-sizing: border-box;
}

.gridjs-tr {
  border: none;
}

.gridjs-tr:last-child {
  font-weight: bold;
}

.gridjs-th {
  height: 1.4; /* You might want to remove this if line-height is sufficient, or adjust as needed */
  line-height: 1.4; /* Increased for better spacing, adjust as needed (e.g., 1.6, 2) */
  font-size: 85%; /* Increased for better readability, adjust as needed (e.g., 85%, 100%, or a fixed px value like 14px) */
  color: white;
  background-color: #2d6c98;
  font-family: Arial, sans-serif; /* Added Arial font */
  font-weight: normal;
  text-align: center;
}
/* Align text in the FIRST header row's TH elements to the bottom */
.gridjs-thead .gridjs-tr:nth-of-type(1) .gridjs-th {
  vertical-align: bottom;
  padding: 5px 2px 0 2px; /* Add some padding for better spacing around text, adjust as needed */
}

/* Align text in the SECOND header row's TH elements to the top */
.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th {
  vertical-align: top;
  padding: 0 2px 5px 2px; /* Add some padding for better spacing around text, adjust as needed */
}

/* 1. Make the FIRST column of the FIRST header row bold */
.gridjs-thead .gridjs-tr:nth-of-type(1) .gridjs-th:nth-of-type(1) {
  font-weight: bold;
}

/* 2. Make the FIRST column of the SECOND header row bold */
.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th:nth-of-type(1) {
  font-weight: bold;
}

.gridjs-thead .gridjs-tr:nth-of-type(1) .gridjs-th {
  border: 1px solid pwhite;
}

.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th {
  border: 1px solid #c2c2b9;
}

.gridjs-thead .gridjs-tr:nth-of-type(1) .gridjs-th:nth-of-type(1),
.gridjs-thead .gridjs-tr:nth-of-type(1) .gridjs-th:nth-of-type(2),
.gridjs-thead .gridjs-tr:nth-of-type(1) .gridjs-th:nth-of-type(3),
.gridjs-thead .gridjs-tr:nth-of-type(1) .gridjs-th:nth-of-type(4) {
  background-color: RGB(202, 63, 66);
}

.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th:nth-of-type(1),
.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th:nth-of-type(2),
.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th:nth-of-type(3),
.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th:nth-of-type(4),
.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th:nth-of-type(5),
.gridjs-thead .gridjs-tr:nth-of-type(2) .gridjs-th:nth-of-type(6) {
  background-color: RGB(202, 63, 66);
}
table.gridjs-table {
  border-collapse: collapse;

  text-align: left;
}

td.gridjs-td {
  border: 1px solid #e5e7eb;
  box-sizing: content-box;
  text-align: center;
  font-size: 70%; /* Made slightly smaller than the default 70% from .gridjs-container */
  padding: 3px 5px; /* Added some padding for better cell spacing */
}

#gridjs-temp,
.gridjs-temp {
  position: relative;
}

table.cisco-table td:nth-child(1) {
  height: 1.1;
  line-height: 1.1;
  font-size: 75%;
  text-align: left;
  padding-left: 3px;
}

table.cisco-table td:nth-child(2),
.cisco-table td:nth-child(3),
.cisco-table td:nth-child(4),
.cisco-table td:nth-child(5),
.cisco-table td:nth-child(6) {
  background-color: rgb(238, 238, 227, 0.4);

  border: 1px solid #e5e7eb;
}

/* Background for the first group of 2 columns (e.g., light blue) */

.alt-group-1 {
  background-color: #e6f7ff; /* Light sky blue */
}

/* Background for the second group of 2 columns (e.g., light yellow) */

.alt-group-2 {
  background-color: #fffbe6; /* Light yellow */
}

.canvas-wrapper {
  width: 650px;
  height: 650px;
  margin: 0 auto;
}

.canvas-wrapper .vb-canvas {
  width: 100%;
  height: 100%;
  /* border: 2px solid red; */
}

/********************************
RESPONSIVE CSS * MEDIA QUERIES
********************************/

/*
The site structure is .header nav .content and .footer. There is also article but it is excluded.
when you arrange each divisions font-size with rem units  These will arrange itself according to the html {font-size: NNpx}. This provides the opportunity to arrange each division relatively and according to screen size. For example you need the paragraph elements text to be bigger in iPhones and the logo doesn't need to be that big. Everything in the division's font-size should be em units.
*/

@media screen and (width <= 1920px) {
  .header--logo-text {
    display: flex;
    flex-direction: row;
  }

  html {
    font-size: 13px;
  }

  .center-flex,
  .center {
    max-width: 130ch;
  }

  .header {
    font-size: 1rem;
  }

  nav {
    font-size: 1.8em;
  }

  .content {
    font-size: 1.8rem;
  }

  .footer {
    font-size: 1rem;
    width: 130ch;
  }
}

/* iPad Landscape */
@media screen and (width <= 1024px),
  screen and (device-width <= 1024px),
  screen and (width <= 1200px) {
  .header--logo-text {
    display: flex;
    flex-direction: row;
  }

  html {
    font-size: 13px;
  }

  .center-flex,
  .center {
    max-width: 76vw;
  }

  .header {
    font-size: 1rem;
  }

  nav {
    font-size: 1.7em;
  }

  .content {
    font-size: 1.8rem;
  }

  .footer {
    font-size: 1rem;
    width: 76vw;
  }
}

/* iPad Portrait */
@media handheld and (width <= 767px),
  screen and (device-width <= 767px),
  screen and (width <= 960px) {
  .header--logo-text {
    display: flex;
    flex-direction: row;
  }

  html {
    font-size: 14px;
  }

  .center-flex,
  .center {
    max-width: 76vw;
  }

  .header {
    font-size: 1rem;
  }

  nav {
    font-size: 1.5em;
  }

  .content {
    font-size: 1.8rem;
  }

  .footer {
    font-size: 1rem;
    width: 76vw;
  }
}

/* iPhone Landscape */
@media screen and (width <= 480px),
  screen and (device-width <= 480px),
  screen and (width <= 750px) {
  .header--logo-text {
    display: flex;
    flex-direction: row;
  }

  html {
    font-size: 14px;
  }

  .center-flex,
  .center {
    max-width: 76vw;
  }

  .header {
    font-size: 0.8rem;
  }

  nav {
    font-size: 1.1em;
  }

  .content {
    font-size: 1.6rem;
  }

  .footer {
    font-size: 1rem;
    width: 76vw;
  }

  .header--logo-wrapper h2 {
    margin-top: 0;
    padding-top: 0;
  }
}

/* iPhone Portrait */
@media screen and (width <= 320px),
  screen and (device-width <= 320px),
  screen and (width <= 450px) {
  .header--logo-text {
    display: flex;
    flex-direction: row;
  }

  html {
    font-size: 13px;
  }

  .center-flex,
  .center {
    max-width: 90vw;
  }

  .header {
    font-size: 0.5rem;
  }

  nav {
    font-size: 1em;
  }

  .content {
    font-size: 1.6rem;
  }

  .footer {
    font-size: 1rem;
    width: 90vw;
  }

  .header--logo-wrapper h2 {
    margin-top: 0;
    padding-top: 0;
  }
}