@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono[wght].ttf') format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: 'JetBrains Mono Italic';
  src: url('fonts/JetBrainsMono-Italic[wght].ttf') format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: 'MozillaHeadline Variable';
  src: url('fonts/MozillaHeadline-Variable.ttf') format("truetype-variations");
  font-weight: 1 999;
}

@font-face {
  font-family: 'MozillaHeadlineItalic Variable';
  src: url('fonts/MozillaHeadlineItalic-Variable.ttf') format("truetype-variations");
  font-weight: 1 999;
}

.quote {

}
body {
//  all: unset;
  font-size: 100%;
    font-family: 'JetBrains Mono';
   text-transform: lowercase;
   //background-image: url('images/texture_07.png');
   //background-color: #E2FA19;
   display: block;
   max-width: 90%;
   margin:auto;

  // border-style: solid;
  // border-width: 1px;
   //border-color: #e8fc03;
}
.logo{
  width: auto;
  /* /min-width: 400px; */
  height: 15vw;
  position: fixed;
  bottom:0%;
  right:2%;
  /* /left: 50%; */
  transform: translateX(-50%);
  transform: rotate(-15deg);
}

.box {
            width: 400px;
            height: 300px;
          }
section{
  border-style: solid;
  border-width: 1px;
  border-color: black;
border-top-style: none;
margin: auto;
  //margin-bottom: 10px;
  padding: 5px;
  //background-color: #007A75;
}

section::after{
  content: "Placeholder";
  position: absolute;
  transform-origin: 0 0;
  //top: 0;
 left: 0;
 margin-left: calc(4.8% - 1vh);
  transform: rotate(270deg);
  font-size:1vh;
  font-weight: 100;
  text-align: right;

}
 section.introduction::after  {
   content: "01 Introduction" !important;
}
section.protoype::after  {
  content: "02 protoype" !important;
}
section.development::after  {
  content: "03 development" !important;
}
section.support::after  {
  content: "04 join the community" !important;
}

.quote blockquote {
    font-size: 4em;
font-weight: 600;
}
.quote figcaption{
    font-family: 'JetBrains Mono';
  display: inline;
  font-size: 0.2em;
  font-weight: 300;
}

figure{
  width:90%;
  max-width: 900px;
  margin: auto;
}
a{
  text-transform: uppercase;
  color: #EB1748;
}

h1{
  font-family: 'MozillaHeadline Variable';
//font-variation-settings: "wght" 200;
text-shadow: 2px 2px #e8fc03;

  font-size: 6em;
  font-weight: 250;
  text-align: left;
  margin-top: -8px;
  margin: 0;
  //color: #B8002B;
    display: inline;
}
h1.descriptor{
  margin: 0;
  font-size: 1.5em;
  font-weight: 250;
  display: inline;

}
h2{

    font-size: 2em;
    font-weight: 250;
    text-align: left;
    margin-top: -8px;child
    margin: 0;
}
h2.descriptor{
    font-size: 1em;
    margin-bottom: -7px;
    //margin-bottom: 5px;
  font-style: italic;
}
p{
  margin: 0;
  font-weight: 400;
}

div.fundamental{
  margin-top: 20px;
  margin-bottom: 10px;
}
.quote{
    font-family: 'JetBrains Mono Italic';
}


.fa {
  padding: 20px;
  font-size: 150px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  font-size: 3em !important; /*size whatever you like*/
  background: black;
  color: white;
}

.fa:hover {
    opacity: 0.7;
}

.row{
    //width:90%;
    margin: auto;
}
.column3 {
  float: left;
  width: 32%;
  height: 60vh;
  margin: 0.5%;
}

.column4 {
  float: left;
  width: 24%;
  height: 60vh;
  margin: 0.5%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.game {
  background: url(images/WorldInProgress_Screenshot_01.png);
  background-size: cover;

  background-position: 30% 46%;
  transition: height 2s, width 2s;
}

.character {
  background: url(images/WorldInProgress_Screenshot_02.jpg);
  background-size: cover;
  background-position: 76% 46%;
  transition: height 2s, width 2s;
  color: white;
}

.tower {
  background: url(images/WorldInProgress_Screenshot_03.png);
  background-size: cover;
  background-position: 54% 46%;
  transition: height 2s, width 2s;
}
.foss {
  background:
    /* top, transparent red */
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    /* bottom, image */
    url(images/foss.png);
  //background: url(images/foss.png), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
  background-size: cover;
  background-position: 54% 46%;
  transition: height 2s, width 2s;
  color: white;

}
.community {
  background:
    /* top, transparent red */
    linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5)
    ),url(images/community.png);
  background-size: cover;
  background-position:10% 46%;
  transition: height 2s, width 2s;
  color: white;
}
.educational {
  background:
    /* top, transparent red */
    linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5)
    ),url(images/education.png);
  background-size: cover;
  background-position: 5% 90%;
  transition: height 2s, width 2s;
  color: white;
}

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction
     and if we allow the items to wrap
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: center;
  margin: 50px 0px;
}

.flex-item {
  width: 15%;  /* Or whatever */
  height: 150px; /* Or whatever */
  margin: auto;  /* Magic! */
  text-align:center;

  border-style: solid;
  border-width: 1px;
  border-color: black;
}

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

@media (hover: hover) {  a:hover {  background-color: red;  color: white; }}