/*dodaj czcionkę ze strony google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/*dla elementu body zastosuj wybraną czcionkę*/
body{
  
  font-family: 'Roboto', sans-serif;

}

/*odwołaj się do klasy kontener*/
.kontener{
  
display:flex;/*ustawiamy kontener jako flexbox*/
flex-wrap: wrap;/*jeśli elementy nie będą się mieścić w jednym wierszu zostaną przeniesione*/
justify-content:space-evenly;/*wyjustowanie elementów względem kontenera */

}

/*odwołaj się do klasy karta*/
.karta{

  margin:20px;/*margines z każdej stron-20px */
  width:300px;/*szerokość-300px */
  height:430px;/*wysokość-430px */
  /*zastosuj wybrany gradient dla karty  https://uigradients.com/#Anwar*/
  
  background: #aa4b6b;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #3b8d99, #6b6b83, #aa4b6b);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #3b8d99, #6b6b83, #aa4b6b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius:15px 15px 0px 0px; /*zaokrąglenie rogów karty ustaw-15px 15px 0px 0px*/
  text-align:center;   /*ustaw wyśrodkowanie tekstu */
}

/*dla paragrafu dodaj wypełnienie na 5 px*/
p{
  padding:5px;

}
/*odwołaj się do diva w którym wyświetlisz obrazek z gry jak tło */
#gra1,#gra2,#gra3,#gra4{
  border-radius:15px 15px 0px 0px;/*zaokrąglenie rogów karty ustaw-15px 15px 0px 0px*/ 
  width:100%;/*ustaw szerokość na 100%*/
  height:170px;/*ustaw wysokość na 170px;*/
  background-size: cover;/*ustaw aby zdjęcie na tło obrazkowe odpowiednio się skalowało */
  margin-bottom:10px;/*ustaw margines z dołu na 10px*/
 
}

/*odwołaj się do diva w którym wyświetlisz obrazek z gry jak tło  i ustaw konkretny obrazek na tło*/
#gra1{
  background-image:url('fortnite.png');

}
#gra2{
   background-image:url('brawlstars.png');
 
}

#gra3{
   background-image:url('minecraft.png');
 
}

#gra4{
  background-image:url('amongus.png');
}

/*sformatuj przycisk według własnego pomysłu*/
 button{

    background: #FF8008;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFC837, #FF8008);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FFC837, #FF8008); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
    padding:20px;/*wypełnienie odstęp pomiędzy elementem a jego obramowaniem*/
    font-family: 'Roboto', sans-serif;
    font-size:18px;/*wielkość czcionki*/
    border:none;
    border-radius:25px;
    transition-duration:0.6s;/*czas na załadowanie styli*/
    text-transform:uppercase;
  }
/*stwórz efekt po najechaniu kursorem myszki na przycisk*/
  button:hover{
    opacity:0.8;
    cursor:pointer;/*zmiana kursora myszki na łapkę*/ 

  }