@font-face {
  font-family: Nexa-Heavy;
  src: url("Upload/Libraries/Nexa-Heavy.ttf")
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.body1{
  font-family: 'Tahoma', sans-serif;
  color: #1ed92a;
  text-align: center;
  background: linear-gradient(to bottom,#000000 50%, #098712 100%);
}

.grid1{
  display: grid;
  align-items: center;
  grid-template-areas:
  'o o o o o A B z z z z z'
  'o o o o o A B C C f f f'
  'o o o o o A D D D D D D';
}
.a{grid-area: A;text-align: right;}
.b{grid-area: B;text-align: left; font-family: 'Nexa-Heavy';}
.c{grid-area: C;text-align: left; font-family: 'Nexa-Heavy'; margin: auto;}
.d{grid-area: D;text-align: left; font-size: 22px;}

.strona{
  text-align: left;
  font-family: 'Nexa-Heavy';
  font-size: 70px;
}

.btn-dark:active, .btn:active, .guzik:active{
  color: #ffffff !important;
  background-color: #ffffff !important;
}

.guzik{
  font-size: 28px;
  margin: 20px;
  color: #1ed92a;
  background-color:#123615 ;
  width: 330px;
}

.guzik2{
  font-size: 22px;
  margin: 20px;
  color: #1ed92a;
  background-color: #d7f5d0;
  width: 400px;
}


.b1{grid-area: B1;}
.b2{grid-area: B2;}
.b3{grid-area: B3;}
.b4{grid-area: B4;}
.d1, .d2, .d3, .d4 {grid-area: RR;}
.grid2{
  justify-content: center;
  display: grid;
  grid-template-areas: "B1  B2  B3  B4"
                       "RR  RR  RR  RR";
}

.ramka{
  animation: fadeIn 0.5s ease-out forwards;
  justify-content: center;
  display: none;
}

.rama{
  animation: fadeIn 0.5s ease-out forwards;
  justify-content: center;
  display: none;
}

@media (max-width: 768px) {
  .grid1 {

    display: grid;
    grid-template-areas:
      'A B'
      'C C'
      'D D';
  }

  .a, .b, .c, .d {
    text-align: center;
  }

  .strona {
    font-size: 50px;
  }
    .grid2 {
      justify-self: center;
      text-align: center;
        grid-template-areas:'B1'
                            'R1'
                            'R2'
                            'R3'
                            'R4'
                            'B2'
                            'B3'
                            'B4';
    }
    .b1m { grid-area: B1; }
        .r1 { grid-area: R1; }
    .b2m { grid-area: B2; }
        .r2 { grid-area: R2; }
    .b3m { grid-area: B3; }
        .r3 { grid-area: R3; }
    .b4m { grid-area: B4; }
       .r4 { grid-area: R4; }

  .guzik2{
    width: 330px;
  }

 
}