body {
    display:flex;
    flex-direction:row;
margin:0;
justify-content: center;
background-color:#7EB0F1;
background-position: center;
gap:10px;
background-attachment: top;
background-image:url("hobbies/beachgif.gif");
background-repeat:no-repeat;
background-size:cover;
background-attachment: center;

}
.layout {
    display:flex;
    width:100%;
    height:650px;
    padding:10px;
    gap:10px;
    margin-top:20px;
    flex-direction:row;
 

    justify-content: center;
    align-items: center;
   
   
}
.layout::before {
    inset:0;
    content:"";
    position:absolute;
    background-image:url("hobbies/videogames/pics/bottomscreen.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    z-index:-1;
    opacity:0.1;
}

.layout::after {
    inset:0;
    content:"";
    position:absolute;
    background-image:url("home/brillofuxia.gif");
    z-index:-1;
    opacity:0.1;
}

.dscontainer {
    display: flex;
    flex-direction:column;
    gap:10px;
width:70%;
height:600px;
background-image:url("hobbies/videogames/3ds.png");
background-size:cover;
background-repeat:no-repeat;
justify-content: center;
align-items: center;
border: 2px solid;

padding:10px;
}
.right {
    width:20%;
    height:20%;
    
    background-size:cover;
}


.left {
   
    
    position:relative;
    overflow-y:scroll;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    gap: 30px;
    width:30%;
    margin:5px;
    
    padding:10px;
    word-wrap:break-word;
    box-sizing:border-box;
   
    

}
.info {
    display:flex;
    width:100%;
    height:100%;
}


.layout2 {
display:flex;
flex-direction:column;
width:41%;
margin-top:20px;
height:350px;
top:138px;
right:198px;
justify-content: center;
padding:10px;
position:absolute;
background-color:rgba(248, 255, 184, 1);
background-image: url("hobbies/notebook.png");
overflow-x:hidden;
background-attachment: center;


gap:10px;
}