/*
    APGW-Styles 2022 and following
    copyleft
*/

/* desktop ///// default */

@font-face {
  font-family: 'DejaVu Sans';
  src: url('../fonts/dejavu-sans-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 200;
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-ExtraLight.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 200;
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-ExtraLightIt.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 300;
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-Light.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 300;
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-LightIt.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 400;
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-Regular.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 400;
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-It.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 600;
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-Semibold.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 600;
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-SemiboldIt.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 700;
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-Bold.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 700;
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-BoldIt.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 900;
  font-display: swap;
  font-style: normal;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-Black.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif';
  font-weight: 900;
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  src: url('../fonts/source/WOFF2/TTF/SourceSerif4Display-BlackIt.ttf.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../fonts/fira/woff2/FiraSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../fonts/fira/woff2/FiraSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../fonts/fira/woff2/FiraSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/fira/woff2/FiraMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/fira/woff2/FiraMono-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../fonts/fira/woff2/FiraSans-Hair.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}

body {
  --color-cmdline-green: #3f3;
  --color-apgw-green: #6f6;
  --color-apgw-blue: #3f288d;
  --color-apgw-red: #b01233;
  --color-apgw-grey: #666;
  --color-bg-dark: #111;
  --color-linktext: #f8f1e1;
  --color-text: #f8f1e1;
  --color-apgw-solar: #ddcc7b;
  --color-apgw-alpha: rgba(255, 255, 255, 0.2);
  --color-apgw-fullalpha: rgba(255, 255, 255, 0.5);
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  --color-info: var(--color-apgw-solar);
  /*
  background-image:
    // top, transparent black, faked with gradient
    linear-gradient(rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)),
    // bottom, image
    url("../files/slrhng2021kuloko_night.jpg");
  // background-position: center; Center the image
  background-repeat: no-repeat;
  // Do not repeat the image
  background-size: cover;
  // Resize the background image to cover the entire container
*/
  font-size: max(1vw, 11px);
  font-family: "Fira Mono";
  line-height: 1.25;
  margin-top: 1vh;
}

.layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto;
}

nav {
  font-family: "Fira Sans";
  font-weight: 400;
}

nav ul {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
}

.submenu {
  margin-right: 1vw;
}

.submenu,
.submenu>ul {
  display: flex;
  flex-direction: column;
}

ul li::marker,
div.li::marker {
  color: var(--color-apgw-green);
}

nav li {
  list-style-type: square;
  align-items: flex-start;
  margin-left: 1vw;
}

nav a {
  font-weight: 500;
}

nav>ul>div>li,
nav>ul>li {
  text-transform: uppercase;
  list-style-type: none;
}

/* div.icon>img {
  height: 1em;
  width: 1em;
  filter: brightness(44%);
}

div.icon {
  margin-left: 0em;
} */

main,
footer {
  width: 100%;
}

footer {
  margin-top: 1vw;
  margin-bottom: 1vw;
  align-items: normal;
  color: var(--color-apgw-grey);
}

footer div {
  text-align: center;
}

footer a:link,
footer a:visited {
  color: var(--color-apgw-grey);
}

.b1 {
  animation: animate 1s steps(12, end) infinite;
  animation-direction: alternate;
}

.b2 {
  animation: animate 1s steps(12, end) infinite;
  animation-delay: 0.333s;
  animation-direction: alternate;
}

.b3 {
  animation: animate 1s steps(12, end) infinite;
  animation-delay: 0.666s;
  animation-direction: alternate;
}

@keyframes animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.t {
  color: var(--color-text);
}

.r {
  color: var(--color-apgw-red);
}

.g {
  color: var(--color-apgw-green);
}

.b {
  color: var(--color-apgw-blue);
}

h1 {
  margin-top: 3.33vh;
  margin-bottom: 6.66vh;
  font-size: 10vw;
}

b {
  display: block;
  font-size: max(1vw, 11px);
  border-top: 0.5vw solid var(--color-bg-dark);
}

h3 {
  font-family: "Fira Sans";
  font-size: 3.33vw;
  font-weight: normal;

  color: var(--color-apgw-green);

  text-transform: uppercase;
  padding-top: 0vw;
  padding-left: 1.5vw;

  margin: 0vw;

  border-left: var(--color-apgw-green) solid 2.22vw;
}

h4 {
  margin-left: 10vw;
  margin-top: -1vw;
  font-size: 2vw;
  font-weight: normal;
  font-family: sans-serif;
  font-weight: bold;
  text-align: left;
  color: var(--color-apgw-green);
}

pre,
code {
  font-size: 1.3vw;
  columns: 1;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  font-family: "Fira Mono";
  color: var(--color-cmdline-green);
  white-space: pre-wrap;
  word-break: break-word;
}

li {
  margin-top: 0vh;
  float: left;
}

#intro {
  max-width: 20vw;
}

.distance {
  margin-top: 2.5vw;
}

.break {
  margin-left: 0vw;
  columns: 15vw 2;
  column-gap: 1vw;

  word-break: break-word;

  orphans: 2;
  widows: 2;
}

div.break {
  padding: 1.5vw;
  margin-top: 1vw;
  margin-left: 33vw;
}

div.break>ul {
  list-style-type: square;
  margin-left: 1.3em;
  margin-top: 0em;
  margin-bottom: 0em;
  line-height: 1.3em;
}

div.break>ul>li {
  margin-top: 0;
  margin-bottom: 1.3em;
  line-height: 1.3em;
}

video, .insteadvideo {
  width: 100%;
  margin-right: 0vw;
  margin-top: .75vw;
}

img {
  width: 100%;
  margin-top: 0vw;
  margin-bottom: 0vw;
}

.bottommargin {
  margin-bottom: .8vw;
}

#headimg {
  margin-top: 1vw;
}

table {
  width: 100%;
}

td.info {
  /* background-color:var(--color-apgw-green);
  color: var(--color-bg-dark); */
  font-family: "Fira Mono";
  font-weight: bold;
  padding-left: 2vw;
  padding-right: 0vw;
  padding-top: 1vw;
  padding-bottom: 1vw;

  margin-right: 1vw;
  border-left: var(--color-apgw-green) solid 2.22vw;
}

#logo,
#logo>a {
  font-family: "DejaVu Sans";
  border: 0;
  width: calc(99vw / 4);
  margin-bottom: 1vh;
}
#logo>a {
  color: var(--color-text);
}

p {
  font-family: "Fira Mono";
  font-weight: normal;
  line-height: 1.3em;
  margin-bottom: 1.3em;

  /* hyphens */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

  orphans: 2;
  widows: 2;
}

p.first,
p.first a {
  font-family: "Fira Mono";
  font-weight: bold;
}

a {
  text-decoration: none;
  font-weight: normal;
}

a:link {
  color: var(--color-linktext);
}

a:visited {
  color: var(--color-linktext);
}

a:hover {
  color: var(--color-apgw-green);
}

a,
a img {
  outline: none;
  border-width: 0vw;
  margin: 0vw;
}

p a {
  font-weight: normal;
}

li>a:link,
li>a:visited,
p>a:link,
p>a:visited {
  color: var(--color-apgw-green);
}

li>a:hover,
p>a:hover {
  color: var(--color-bg-dark);
  background-color: var(--color-apgw-green);
}

.now {
  font-size: 1vw;

}

button {
  font-size: 1vw;
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-text);
  border-top: 0.5vw solid var(--color-bg-dark);
  border-left: none;
  border-bottom: none;
  border-right: none;
  background-color: var(--color-apgw-grey);
}

button:hover {
  background-color: var(--color-apgw-green);
  color: var(--color-bg-dark);
}

b:active {
  transform: translateY(0.5vw);
}

blockquote {
  margin-left: 0vw;
  font-size: 1.1vw;
  columns: 1;
  font-style: italic;
  color: #6666ff;
  word-break: break-word;
}

.clear {
  clear: both;
}

div.triple,
div.double {
  margin-top: .75vw;
  padding: 0vw;
}

.triple {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 1vw;
}

.double {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1vw;
}

.doublealpha {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10vw;
}

.triple img {
  max-width: 32.34vw;
  min-width: 10vw;
}

.greenbg {
  margin-bottom: 0.75vh;
  white-space: nowrap;
}

.greenbg a,
b {
  font-weight: bold;
  padding-top: 0.1vw;
  padding-bottom: 0.1vw;
  padding-left: 0.3vw;
  padding-right: 0.3vw;
  background-color: var(--color-apgw-green);
  color: var(--color-bg-dark);
}

.greenbg a:hover,
b:hover {
  color: var(--color-text);
  background-color: var(--color-apgw-grey);
}

div.break>p>b, div.break>p>b:hover{
  background-color: none;
  color: var(--color-text);
  padding: o;
  margin:0;
}

strong {
  font-weight: bold;
}

nav>ul>div>ul {
  margin-left: 1.5vw;
}

.half {
  width: 98vw;
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 0vw;
}


.hl {
  margin-left: 1vw;
}

.hr {
  margin-right: 1vw;
}

div.up {
  margin-top: 3vw;
  margin-right: 0vw;
  margin-bottom: 9.99vw;
  text-align: right;
}

.up a {
  font-family: "Fira Sans";
  font-size: 8vw;
  font-weight: bold;
  color: var(--color-bg-dark);
  background-color: var(--color-apgw-green);
  border-left: var(--color-apgw-green) solid 1.6vw;
  border-right: var(--color-apgw-green) solid 1.6vw;
  border-top: var(--color-apgw-green) solid 0.3vw;
  border-radius: 2vw;
}


div.icons {
  position: relative;
  justify-content: center;
  display: flex;
  flex-direction: row;
  margin-top: 1.5vh;
  max-width: 100vw;
  margin-bottom: 0em;
}

div.icons>figure {
  position: relative;
  color: var(--color-apgw-green);
}

div.icons>figure>img {
  filter: brightness(44%);
  width: auto;
  height: auto;
  margin: 1vw;
  max-width: 9vw;
}

div.icons>figure:hover {
  background-color: var(--color-apgw-green);
  color: var(--color-bg-dark);
}

div.icons>figure:hover>img {
  filter: brightness(0%);
}


.caption {
  font-size: 1vw;
  position: absolute;
  bottom: 0%;
  left: 8%;
}

div.icons>figure.catselect {
  background-color: var(--color-apgw-green);
  color: var(--color-bg-dark);
}

div.icons>figure.catselect>img {
  filter: brightness(0%);
}

/*.submenu>ul>li>table { */
.projectrotate {
  rotate: 90deg;
  z-index: -1;
}

.projectrotate a {
  color: var(--color-apgw-grey);
}

.catselect a {
  position: relative;
  margin-left: -1.05em;
  padding-left: .5em;
  color: var(--color-text);
  border-left: dotted var(--color-apgw-green) .77em;
}

.catselect a:hover {
  background-color: var(--color-apgw-green);
  color: var(--color-bg-dark);
}

.catselect {
  position: relative;
  z-index: 5;
}

#futur21 .triple, #futur21 .half, .bright {
  filter: brightness(150%);
}

/* ################################################### mobile ############################################################### */
@media screen and (max-width: 666px) {

  div>a>img {
    margin-top: -.75vw;
    padding: 0vw;
  }

  div.up {
    margin-top: 3vw;
    margin-right: 3vw;
  }

  .half {
    width: 100%;
    display: inline;
    margin-top: 0vw;
  }

  .hl {
    margin-left: 0vw;
  }

  .hr {
    margin-right: 0vw;
  }

  h3 {
    font-size: 6.66vw;
  }

  .layout {
    min-height: 100vh;
    display: grid;
    grid-template-rows: min-content auto min-content;
  }

  nav ul {
    flex-direction: column;
    justify-content: start;
    margin-top: 1vh;
  }

  nav>ul>div>ul {
    margin-left: 3vw;
  }

  .submenu {
    margin-top: 1vw;
    margin-left: 8vw;
  }

  nav>ul>div>li {
    margin-right: 0;
    margin-top: 1vh;
  }

  .break {

    margin-top: 1vw;
    columns: auto 1;
    column-gap: 2vw;
    column-fill: balance;
    word-break: break-word;
  }

  div.break {
    font-size: 1.8vh;
    padding: 1.5vw;
    margin-top: 8vw;
    margin-left: 10vw;
    margin-right: 4vw;
  }

  .langselect {
    margin-top: 2vh;
    margin-bottom: 3vh;
  }

  #logo,
  #logo>a {
    font-family: "DejaVu Sans";
  }

  td.info {
    padding-left: 1.5vw;
    padding-right: 0vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
  }

  .greenbg {
    margin-bottom: 0vh;
  }

  .greenbg a {
    padding-left: 0.5vw;
    padding-right: 0.5vw;
  }

  p {
    margin-bottom: 1.3em;
  }

  video {
    margin-top: 0vw;
    margin-left: 0;
    margin-bottom: 0vw;
  }

  #headimg {
    margin-top: 2.5vh;
  }
}

/* ###################################################  end mobile ############################################################ */