@font-face {
  font-family: "DuctusRegular";
  font-weight: normal;
  src: url("fonts/Ductus/DuctusRegular.otf") format("opentype");
}

@font-face {
  font-family: "CascadiaCode VTT";
  font-weight: normal;
  src: url("fonts/Cascadia/otf/CascadiaCode-Light.otf") format("opentype");
}

@font-face {
  font-family: "CascadiaCode VTT";
  font-weight: bold;
  src: url("fonts/Cascadia/otf/CascadiaCode-Bold.otf") format("opentype");
}

body,
html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0 0;
  padding: 0 0;
  background-color: white;
  grid-template-columns: min-content 1fr min-content;
  grid-template-rows: min-content min-content 1fr min-content;
  grid-gap: 1rem 1rem;
  grid-template-areas:
    "header header header"
    ". s-top s-top"
    "s-left main aside"
    "s-left footer footer";
  max-width: 1200px;
  width: calc(100% - 4rem);
  margin: auto;
  height: calc(100svh - 4rem);
  margin: 2rem;
}

h3,
h4{
  font-family: "DuctusRegular";
  font-weight: normal;
  margin: 0 0;
  color: black;
}
h3{
  font-size: 3rem;
}
h4{
  font-size: 2rem;
  margin-bottom: 1rem;
}
h1,
h2 {
    font-family: "DuctusRegular";
    margin: 0 0;
    font-size: 1.5rem;
}
mark{
    font-family: "DuctusRegular";
    padding: 5px 5px;
    font-size: 0.95rem;
    background-color: rgb(128,128,128);
    color: white;
}
main {
  grid-area: main;
  overflow: hidden;
  position: relative;
}

article h1,
article h2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

article h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

header {
  grid-area: header;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slider--top {
  grid-area: s-top;
}

.slider--left {
  grid-area: s-left;
}
.preface{
  top: 2rem;
  right: 2rem;
  max-width: 700px;
  width: calc(100% - 2rem);
  margin: 2rem auto;
  overflow-x: hidden;
  color: white;
  font-family: "CascadiaCode VTT";
  background-color: rgb(128,128,128);
  border: solid black 1px;
  padding: 1rem;
}

article {
  max-width: 700px;
  width: calc(100% - 2rem);
  margin: 2rem auto;
  overflow-x: hidden;
  color: var(--text-color-light);
  display: flex;
  flex-direction: column;
  font-family: "CascadiaCode VTT";
  background-color: white;
  border: solid black 1px;
  padding: 1rem;
}

article p,
article pre,
article li {
  margin: 0 0;
  font-size: 14px;
  line-height: 1.5;
}

article ul,
article ol {
  list-style-type: none;
  padding: 0 0;
  margin: 0 0;
}

article li {
  margin-bottom: 0.15rem;
}

article p,
article li {
  word-break: break-word;
}

article .hostname {
  color: green;
  padding-right: 1ch;
}

footer {
  grid-area: footer;
}

footer h3,
aside h3 {
  line-height: 1;
}

p{
    font-family:"CascadiaCode VTT";
    font-weight: normal;
}

hr {
  width: 100%;
  margin: 2rem auto;
}

#wiki-intro-text {
  border: solid black 1px;
  max-width: 40vw;
}

.wiki-frame {
  width: 80vw;
  height: 80vh;
  margin-top: 1rem;
  position: relative;
  left: calc(10vw - 2rem) ;
}