@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
img { width: 100%; }
a { text-decoration: none; }

body { margin: 0; padding: 0; background: #191A19; font-family: 'Montserrat', sans-serif; }
.container { width: 866px; margin: 0 auto; padding: 50px 20px; }
header { background: #1E5128; width: 100%; }
header img { height: 60px; }
header .logo { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Heebo', sans-serif; }
header .logo-row { display: flex; flex-direction: row; align-items: center; }
header .logo h2 { font-size: 40px; color: white; margin-left: 20px; }
header .logo p { font-size: 18px; color: white; margin-top: 15px; font-weight: 400; text-align: center; }

#search { width: 100%; border-radius: 50px; padding: 10px 0px; text-align: center; border: none; border: 2px solid #fff; transition: 0.5s; font-size: 16px; }
#search:focus { outline: none; border: 2px solid #ffbc00; transition: 0.5s; }

.row { width: 100%; display: flex; overflow: hidden; margin-top: 30px; justify-content: space-between; flex-wrap: wrap; }
.column { width: 49%; margin: 10px 0px; display: flex; background: #4E9F3D; border-radius: 15px; padding: 10px 25px; align-items: center; border: 2px solid #D8E9A8; }
.c-img { min-width: 25%; max-width: 25%; margin-right: 20px; }
.c-img img { border-radius: 15px; }
.c-content { display: flex; flex-direction: column; justify-content: center; color: white; font-family: 'Heebo', sans-serif; }
.author { font-size: 11px; }
.text { font-size: 13px; }
.game-title { font-size: 25px; color: white; }
.namegame { display: none; }

footer { color: #1E5128; text-align: center; padding: 25px 0px; }

@media screen and (max-width: 866px)
{
     .container { width: 100%; }
}
@media screen and (max-width: 600px)
{
     .column { width: 100%; }
     h2 { font-size: 28px !important; }
     .logo-row img { max-width: 60px }
     .header .logo p { font-size: 16px !important; }
}
@media screen and (max-width: 400px)
{
     .c-img { min-width: 30%; max-width: 30%; }
}