/*=========================GRID MOBILE=====================*/
@media (max-width:499px) {
    .grid {
        grid-template-columns:auto;
        grid-auto-rows:auto;
        grid-template-areas:
        "W1"
        "HOME"
        "W4";
        gap:1.5em;margin: o auto;
    }

    #NAV-Mobile {
        display:block;
        margin-bottom:20px;
    }
    #NAV {display:none;}

   #W1-Mobile {
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap:1em;
   }
   body {
    gap:2.5em;
    } 
    #HOME,#MUSIC,#BRAIN{
    Max-width:270px;
    max-height:320px;
    }

    #PfP  {
    max-height: 100px;
    height:100%;
    max-width: 120px; 
    }
    .info {
    max-width:100px;
    width:100%;
    }
    .y {display:none;} .info {line-height:0.8;}
    #WHO,#MORE,#HATE {
    Max-WIDTH:200px;
    max-height:50px;
    overflow-y: scroll;
    }
    .content1 {
        max-height:280px;
    }
}
/* ================= GRID PRINCIPAL ================= */
@media (min-width:500px) {
    #NAV-Mobile {display:none;}
    
    .grid {
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-rows: auto;
    grid-template-areas: 
    "HOME W1"
    "HOME W4";

    gap: 2em;
    }

    body {
    gap:8em;
    overflow:auto;
    }
    #W1 {
    max-width:245px;
    padding:10px 15px;
    display:flex;
    flex-direction:column;
    gap:1em;
    }
    .Main_1 {
    max-width:350px;
    width:100%;
    }
}
/*================================*/
#W1,#W1-Mobile {grid-area:W1;}
#W4 {grid-area: W4;}
#HOME,#MUSIC,#GAMES,#BRAIN 
{grid-area: HOME;}

body {
    margin:0;
    height:100vh;
    display:flex;
    justify-content:start;
    align-items: center;
    flex-flow:column;
}

.brain-body {
    display:flex;
    justify-content: center;
    align-items: center;
}