* {
  padding: 0;
  margin: 0;
  /*box-sizing: border-box;*/
  font-family: "Archivo Black", sans-serif;
}


@font-face {
  font-family: 'Acumin Pro';
  font-style: normal;
  font-weight: normal;
  src: local('Acumin Pro'), url('Acumin-RPro.woff') format('woff');
  }

header {
  display: block;
  /*margin-top: 30px; /* Add a top margin to avoid content overlay */
  padding-left: 30px;
  padding-top: 0px;
  padding-bottom: 20px;
  padding-right: 50px;
}

h2 {
  color: rgb(89, 182, 124);
  background-color: black;
  /*font-style: Archiv;*/
  font-size: 16pt;
  font-weight: normal;
  font-style: normal;
}

p {
  font-family:'Acumin Pro';
  font-size: 14px;
  text-transform: uppercase;
}

.p1 
{
  font-size: 18px;
}

.p2 {
    color: rgb(89, 182, 124);
    font-size: 20px;
  display: inline;
  }

.p3 {
  color:black;
  font-size: 14px;
display: inline;
font-family: 'Courier New', Courier, monospace;
}

span {
  font-family: "Archivo Black", sans-serif;
}

.green
{
  color: rgb(89, 182, 124);
}


#page-container {
  position: relative;
  min-height: 160vh;
}


  



mark.white {
  color: #fcf8f8;
  background: none;
}


 
.button {
 background-color: #4caf50;  
}

.sidebar {
  --offset: var(--space);
  /* ... */
  position: sticky;
  top: var(--offset);
}

.stickbar {
  /*padding-right: 5px;*/
  padding-left: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: right;
  /* background: rgb(10, 10, 10); */
  color: rgb(247, 243, 243);
  font-size: 20px;
  position: fixed;
  right: 25px;
  /*border: 3px solid rgb(7, 7, 7); */
  max-width: 250px;
  /*height: 250px;*/
  max-height: 300px;
}

body {
  
  min-height: 160vh;
  /*display: flex;*/
  background: white;
}

.memory-game {
  zoom: 0.85;
  transform: scale(0.85);
  transform-origin: 0 0;
  -webkit-transform: scale(0.85);
  -webkit-transform-origin: 0 0;
  -moz-transform: scale(0.85);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.85);
  -o-transform-origin: 0 0;

  width: 1360px;
  height: 675px;
  margin-top: 0px;
  margin-bottom: 150px;
  margin-left: 0px;
  margin-right: 50px;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
  flex-direction: row;
}

.memory-game  * {
  flex: 1 1 120px;
}

/*.grid-container {
  width: 1300px;
  /*height: 0px;
  margin-top: 32px;
  display: grid;
}
*/
.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - -5px);
  margin-left: 25px;
  margin-right: 40px;
  margin-top: 24px;
  margin-bottom: 20px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform 0.5s;
  /* box-shadow: 1px 1px 1px rgba(0,0,0,.3);*/
  border-left: 5px;
  border-right: 5px;
  padding-left: 10px;
  padding-right: 10px;
  
}

.memory-card:active {
  transform: scale(0.857);
  transition: transform 0.2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front-face {
  width: 120%;
  height: 100%;
  padding: auto;
  position: absolute;
  border-radius: 10px;
  background: #1c7ccc;
  backface-visibility: hidden;
  margin-left: -34px;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.back-face {
  width: 112%;
  height: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
 /* padding-right: 5px;
  padding-left: 5px; */
  position: absolute;
  border-radius: 5px;
  backface-visibility: hidden;
  border: 1px solid #1111114d;
}

.front-face {
  transform: rotateY(180deg);
}

input {
  padding-bottom: 1px;
  padding-right: 2px;
  /*font-family: 'Acumin Pro Bold';*/
  font-size: 20px;
  /*color: #333;*/
  margin-left: 60px;
  margin-right: 60px;
background-color:black;
border: 1px solid black; /* Green */
/*border-right: 3px;*/
color:white;
/*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);*/
}
.spoiler {
 /* border: 1px solid #ddd;*/
  padding-right: 0px;
  /*background-color: white;*/
  margin: -1px;
  color: black;
}
.inner {
  /*border: 1px solid #eee;*/
  padding: 3px;
  margin: 3px;
}

#footer {
  position: absolute;
  bottom: 20px;
  width: 90%;
  height: 10.5rem;            /* Footer height */
padding-left: 30px;
}