@font-face {
  font-family: 'PT Magistral Bold Cyrillic';
  src: url('MGBOLD.ttf') format('truetype');
}

body {
 font-family: 'PT Magistral Bold Cyrillic';
 background: linear-gradient(45deg,#0c000c,#2d003a);
}

.a7-footer {
    color: #fffa;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.footer-bar {
    width: 100%;
    left: 0px;
    top: 0px;
}

.grid {
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      to right,
      #00FF0D 0px,
      #00FF0D 1px,
      transparent 1px,
      transparent 50px
    ),
    repeating-linear-gradient(
      to bottom,
      #00FF0D 0px,
      #00FF0D 1px,
      transparent 1px,
      transparent 50px
    );

-webkit-mask: 
    radial-gradient(circle 500px at 0% 0%, black 100%, transparent 101%),
    radial-gradient(circle 500px at 100% 100%, black 100%, transparent 101%);
  -webkit-mask-composite: destination-over;

  mask: 
    radial-gradient(circle 500px at 0% 0%, black 100%, transparent 101%),
    radial-gradient(circle 500px at 100% 100%, black 100%, transparent 101%);
  mask-composite: add; 

     z-index: -1;
}

.footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 100px;
    left: 0px;
    background-color: #1f0027;
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 15vw;
  max-width: 200px;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  top: calc(50% - 15vw - 5rem);
}

.releasetime {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 90vh);
  aspect-ratio: 11 / 2;

  background-color: #1f0027;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vw;

  justify-items: center;
  align-items: center;
  padding: 2vw;
}

.num {
  width: 80%;
  height: 80%;
  color: #00FF0D;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 125px;
  border-radius: 12px;
  text-align: center;
}

@media (max-width: 500px) {
    .logo {
        width: 35vw;
        max-width: 300px;
        top: 8%;
        transform: translateX(-50%);
    }
}

@media (max-width: 750px) {
    .footer {
        height: 120px;
    }
    .grid {
        -webkit-mask: 
            radial-gradient(circle 400px at 0% 0%, black 100%, transparent 101%),
            radial-gradient(circle 400px at 100% 100%, black 100%, transparent 101%);
        -webkit-mask-composite: destination-over;

        mask: 
            radial-gradient(circle 400px at 0% 0%, black 100%, transparent 101%),
            radial-gradient(circle 400px at 100% 100%, black 100%, transparent 101%);
        mask-composite: add;
    }   
}
@media (max-width: 400px) {
    .footer {
        height: 140px;
    }
        .grid {
        -webkit-mask: 
            radial-gradient(circle 300px at 0% 0%, black 100%, transparent 101%),
            radial-gradient(circle 300px at 100% 100%, black 100%, transparent 101%);
        -webkit-mask-composite: destination-over;

        mask: 
            radial-gradient(circle 300px at 0% 0%, black 100%, transparent 101%),
            radial-gradient(circle 300px at 100% 100%, black 100%, transparent 101%);
        mask-composite: add;
    }  
}

@media (max-width: 800px) {
    .num {
        font-size: 80px;
    }
}
@media (max-width: 500px) {
    .releasetime {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        width: 80vw; 
        height: auto;
        aspect-ratio: auto;
    }
    .num {
        font-size: 10vw;
    }
}
@media (max-width: 1400px) {
    .releasetime {
        width: 80%;
    }

}