/* Import czcionki */
@font-face {
  font-family: Nexa-Heavy;
  src: url("Upload/Libraries/Nexa-Heavy.ttf")
}

/* Animacja otwierania menu */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Główny styl i tło
#2C3E50 gray
#E74C3C red
#ECF0F1 brudny bialy
#A8C545 olive
#2980B9 blue
#E2DFD0 kremowy*/

.bodyGlowne{
  font-family: 'Tahoma', sans-serif;
  color: #2C3E50;
  text-align: center;
  background: linear-gradient(59deg, rgba(226,223,208,1) 32%, rgba(236,240,241,1) 62%);;
}

/* Nagłówek strony tytułowej */
.divNaglowek{
  background: 
  linear-gradient(32deg, rgba(226,223,208,0.2) 1%,
   rgba(226,223,208,1) 29%,
    rgba(226,223,208,1) 74%,
     rgba(226,223,208,0.1) 97%),
      url("Upload/Libraries/naglowek.png");
  border-top: 30px solid #2C3E50;
  border-bottom: 20px solid #2C3E50;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-areas:
  'o o o o o A z z z z z z'
  'o o o o o A B C F F F F'
  'o o o o o A D D D D D f';
}
.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;
  padding-left: 0px
}
.d{
  grid-area: D;
  text-align: left;
  font-size: 22px;
  font-family: 'Arial Black';
  color: #2C3E50
}

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

/* Guziki główne, na górnym pasku */
.btn-dark:active, .btn:active, .guzik:active{
  color: #ffffff !important;
  background-color: #ffffff !important;
}

.guzikMenuGorne{
  font-size: 28px;
  font-family: 'Arial Black';
  margin: 2px;
  color: #ECF0F1;
  background-color:#2C3E50;
  width: 460px;
}

.guzikSubMenu{
  font-size: 22px;
  font-family: 'Arial Black';
  margin: 6px;
  color: #ECF0F1;
  background-color: #E74C3C;
  width: 400px;
  height: 80px;
  border-radius: 0px;
  border: 0px;
}


.b1{grid-area: B1;}
.b2{grid-area: B2;}
.b3{grid-area: B3;}
.b4{grid-area: B4;}
.d1, .d2, .d3, .d4 {grid-area: RR;}
.divMenuGorne{
  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;
}

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

.logo{
  width: 160px;
}

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

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

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

  .strona {
    font-size: 30px;
  }
    .divMenuGorne {
      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; }

  .guzikMenuGorne{
    font-size: 18px;
    width: 300px;
  }

  .guzikSubMenu{
    font-size: 16px;
    width: 280px;
  }
  .logo{width: 60px}
  .hM93{font-size: 32px}
  .c{font-size: 12px;}
  .d{font-size: 8px;}
 
}