@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: #ffffff; font-family: 'Montserrat', sans-serif; }
.container { width: 866px; margin: 0 auto; padding: 50px 20px; }
header { background: #3498db; 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: 5px solid #ffbc00; 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: #3498db; border-radius: 15px; padding: 10px 25px; align-items: center; border: 2px solid #ffbc00; }
.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: #4600a2; 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%; }
}


.popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        z-index: 1000;
        transition: opacity 0.5s ease-out; /* Fade transition */
		border: 2px solid #ffbc00; 
    }
	
	 @keyframes fadeInOut {
        0% { opacity: 0; }
        25% { opacity: 0.25; }
        50% { opacity: 0.5; }
        75% { opacity: 0.75; }
        100% { opacity: 1; }
    }
	
.popup:hover {
        box-shadow: 0 0 20px rgba(0,0,0,0.2); /* Example: increase shadow on hover */
    }
	
	
    .popup p {
        font-size: 18px;
        color: #333;
       
    }