@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;
}

body{

background:
linear-gradient(
135deg,
#071320,
#233c6d,
#5d2fb4
);

min-height:100vh;

padding:30px;

color:white;

}

.layout{

display:grid;

grid-template-columns:
340px 1fr;

gap:30px;

max-width:1200px;

margin:auto;

}

.sidebar,
.gameArea{

background:
rgba(255,255,255,.08);

backdrop-filter:
blur(20px);

border-radius:30px;

padding:30px;

}

.sidebar{

display:flex;
flex-direction:column;

gap:15px;

}

.logo{

width:120px;

margin:auto;

}

.sidebar h1{

text-align:center;

}

input,
select{

padding:15px;

border-radius:15px;

border:none;

font-size:16px;

}

.score{

background:
rgba(255,255,255,.08);

padding:20px;

border-radius:20px;

text-align:center;

}

.catalogBtn,
.restartBtn{

padding:15px;

border-radius:15px;

background:#ff4c89;

text-decoration:none;

color:white;

font-weight:600;

text-align:center;

border:none;

cursor:pointer;

}

.gameArea{

display:flex;
flex-direction:column;
align-items:center;

}

.status{

font-size:24px;

font-weight:600;

margin-bottom:30px;

}

.container{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:12px;

}

.box{

width:120px;
height:120px;

background:
rgba(255,255,255,.1);

border-radius:20px;

display:flex;
justify-content:center;
align-items:center;

font-size:60px;

cursor:pointer;

transition:.3s;

}

.box:hover{

transform:translateY(-5px);

}

.win{

background:#00ff95!important;

}

@media(max-width:900px){

.layout{

grid-template-columns:
1fr;

}

.sidebar{

order:1;

}

.gameArea{

order:2;

}

}

@media(max-width:500px){

.box{

width:90px;
height:90px;

font-size:45px;

}

}

.box img{

    width:65px;

    height:65px;

    object-fit:contain;

    pointer-events:none;

}