body {
  background-color: #000000;
  color: #F3E0F5;
  font-family: 'gohu14', Verdana;
  margin: 0;
  padding: 0;
}

.window {
  margin: 5% 30% 5% 30%;
}

.window2 {
  margin: 0% 30% 0% 30%;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class="window"] {
    margin: 5% 5% 5% 5%;
  }
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class="window2"] {
    margin: 0% 5% 0% 5%;
  }
}

@font-face {
  font-family: spacemono;
  src: url('SpaceMono-Regular.ttf');
}

@font-face {
  font-family: quicksand;
  src: url('Quicksand.ttf');
}

@font-face {
  font-family: encodesans;
  src: url('EncodeSans.ttf');
}

@font-face {
  font-family: pressstart;
  src: url('PressStart2P.ttf');
}

@font-face {
  font-family: outfit;
  src: url('Outfit.ttf');
}

@font-face {
  font-family: newsreader;
  src: url('Newsreader.ttf');
}

@font-face {
  font-family: teko;
  src: url('Teko.ttf');
}

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.dark-pools-title {
    font-family: 'pressstart';
    font-size: 64px;
    margin-bottom: 200px;
}

.big-pix-text {
    font-family: 'pressstart';
    font-size: 48px;
    color: #ffffff;
}

.empty-block {
    margin-bottom: 6666px;
}

.black-white-transition-block {
    background-color: #000000;
    background-image: linear-gradient(#000000, #B1DBFC);
    height: 6666px;
    width: 100%;
}

.white-black-transition-block {
    background-color: #000000;
    background-image: linear-gradient(#B1DBFC, #000000);
    height: 6666px;
    width: 100%;
}

.story-font {
    font-family: 'outfit';
    font-size: 28px;
}

.white-background {
    width: 100%;
    background-color: #B1DBFC;
    margin: 0px;
}

.black-background {
    width: 100%;
    background-color: #000000; 
}

.red-background {
    width: 100%;
    background-color: #ff3838;
}

.story-font-black-background {
    color: #F3E0F5;
    font-family: 'outfit';
    font-size: 28px;
}

.story-font-red-background {
    color: #FFFFFF;
    text-align: right;
}

.story-font-black {
    background-color: #B1DBFC;
    color: #000000;
    font-family: 'outfit';
    font-size: 20px;
    text-align: justify;
}

.story-font-final {
    font-family: 'outfit';
    font-size: 20px;
    text-align: justify;
}

.agreement-block {
    background-color: #ffffff;
    color: #000000;
    font-family: 'newsreader';
    font-size: 20px;
    padding: 10px 15px 10px 15px;
    text-align: justify;
}

.blood-text {
    color: #FF3838
}

.blue-text {
    color: #0033FF
}

.light-blue-text {
    color: #38AAFF
}

.pala-text {
    color: #D91EBE
}

.eating-block {
    background-color: #000000;
    background-image: linear-gradient(#FF3838, #000000);
    color: #ffffff;
    font-family: 'outfit';
    font-size: 20px;
    padding: 10px 15px 10px 15px;
    text-align: justify;
}

.ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #000000;
    padding: 0px;
    border: 40px solid #FF3838;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

.black-door {
    width: 200px;
    height: 300px;
    background-color: #000000;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

.pane-one {
    display: grid;
    grid-template-areas:
        "a1 a2 a3 a4"
        "b1 b2 b3 b4"
        "c1 c2 c3 c4"
        "d1 d2 d3 d4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 5px;
    background-color: #2196F3;
    padding: 5px;
}

.utpala-knock {
    color: #D91EBE;
    font-size: 18px;
    font-family: 'pressstart';
    text-align: right;
    font-style: italic;
}

.utpala-gen {
    color: #D91EBE;
    font-size: 14px;
    font-family: 'pressstart';
}

.utpala-teko-text {
    color: #D91EBE;
    font-size: 28px;
    font-family: 'teko';
}

.utpala-teko-text-agreement {
    color: #000000;
    font-size: 20px;
    font-family: 'teko';
}


.cube-centering {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.cubecontain {
    width: 100px;
    height: 100px;
    perspective: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    margin-bottom: 80px;
}

.cube {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: turn 5s linear infinite;
}

.face {
    width: 100px;
    height: 100px;
    background-color: #D91EBE;
    border: 2px solid rgba(0, 0, 0, 1.0);
    position: absolute;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 500ms;
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: translateZ(-50px) rotateY(180deg);
}

.left {
  transform: translateX(-50px) rotateY(-90deg);
}

.right {
  transform: translateX(50px) rotateY(90deg);
}

.top {
  transform: translateY(-50px) rotateX(90deg);
}

.bottom {
  transform: translateY(50px) rotateX(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .cube {
    animation: none;
    transform: rotate3d(1, 1, 0, 45deg);
  }
}

@keyframes turn {
  from { transform: rotate3d(0, 0, 0, 0); }
  to { transform: rotate3d(1, 1, 0, 360deg); }
}