/* reset */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Verdana;
background:#63bdd2 url("poke-photos/background.jpg");
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}

/* page container */
.page{
width:900px;
margin:20px auto;
background:#63bdd2;
padding:10px;
border:2px solid #999;
}

/* header */
.header{
height:150px;
background:orange;
margin-bottom:10px;

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

.header-img{
max-height:60%;
}

.stamps{
display:flex;
gap:6px;
margin-bottom:10px;
justify-content:center;
}

.stamps img{
width:99px;
height:56px;
}

/* main layout */

.layout{
display:grid;
grid-template-columns:180px 1fr 200px;
gap:10px;
}

/* sidebars */

.sidebar{
display:flex;
flex-direction:column;
gap:10px;
}

/* sidebar boxes */

.menu{
height:200px;
background:gold;
}

.trainer{
height:200px;
background:gray;
}

.pokemon{
height:200px;
background:gray;
}

.inventory{
height:260px;
background:gray;
}

/* center content */

.content{
display:flex;
flex-direction:column;
gap:10px;
}

/* TEAM BOX */

.team{
background:gray;
padding:10px;
}

.team-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.slot{
height:70px;
width: 70px;
background:#d0d0d0;
border:2px solid black;
}

/* CARD AREA */
.cards{
height:300px;
background:gray;
padding:10px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:12px;
}

.card-row{
display:flex;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
gap:8px;
max-width:100%;
}

/* slightly smaller cards */

.card{
width:65px;
height:95px;
background:#dcdcdc;
}

/* arrows */

.arrow{
width:20px;
height:20px;
background:black;
flex-shrink:0;
}