.parent {
        background-color: #ba895e;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 0.94fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        height: 100vh;
        padding: 0%;
        margin: 0%;
        position: relative;
        width: 80%;
        overflow: hidden;
    }

    .div1 {
        background-color: #4a1b09; 
        grid-area: 3 / 1 / 4 / 2; 
        width: 100%;
        height: 100%;
    }

    .compu{
        position: absolute;
    }

    .manzana{
        max-width: 8%;
        position: absolute;
        top: 59.2%;
        left: 1%;
    }

    .lapices{
        position: absolute;
        max-width: 12%;
        left: 34%;
        top: 53%;
    }

    .camara{
        position: absolute;
    }

    .rollo{
        position: absolute;
        max-width: 3.8%;
        left: 61%;
        top: 64%;
    }

    .dvds{
        position: absolute;
    }

    .celuloide{
        max-width: 17%;
        left: 82%;
        position: absolute;
        top: 78%;
    }

    .ipod{
       position: absolute;

    }

    .sketchbook{
        position: absolute;
    }

    .sticky{
        position: absolute;
    }

    .gato{
        position: absolute;
        max-width: 25%;
        left: 12%;
        top: 19%;
    }
    


    .mrfox{
        position: absolute;
        max-width: 18%;
        left: 1%;
        top: 2.5%;
    }

    .vangogh{
        position: absolute;
        max-width: 16%;
        left: 67%;
        top: 3%;
    }

    .kiki{
        position: absolute;
        max-width: 17%;
        left: 80%;
        top: 14%;
    }

    .vaquita{
        position: absolute;
    }

    body {
        margin: 0;
        padding: 0;
        height: 100vh; 
        display: flex;
        justify-content: center; 
        align-items: center; 
        background-image: url(imgs/fondo.jpg);
        background-size: contain;
    }

    .firulete{
        position: absolute;
        max-width: 100%;
        left: 0.1%;
    }

    .polaroid{
        position: absolute;
        max-width: 4.2%;
       
    }
    .polaroid.uno{
        left: 54%;
        top: 41%;
    }

    .polaroid.dos{
        left: 49%;
        top: 50%;
        transform: rotate(-5deg);
    }
    .polaroid.tres{
        left: 58.5%;
        top: 51.2%;
        transform: rotate(8deg);
    }
    .tiraFotos{
        position: absolute;
        width: 3%;
        left: 66%;
        top: 50%;
    }
    .ruido{
        opacity: 10%;
        position: absolute;
    }
    .firuleteRojo{
        position: absolute;
        max-width: 49%;
        top: 8%;
        left: 5.6%;
    }
    .crayon{
        position: absolute;
    }
    .crayon.gris{
        top: 83%;
        left: 45%;
        transform: rotate(-16deg);
        max-width: 1.5%;
    }
    .crayon.naranja{
        top: 94.5%;
        left: 59%;
        max-width: 4.75%;
        transform: rotate(-9deg);
    }
    .crayon.vm{
        max-width: 5.75%;
        top: 91.5%;
        left: 65%;
    }
    .crayon.azul{
        max-width: 4%;
        top: 95.4%;
        left: 51%;
        transform: rotate(-14deg);
    }
    .crayon.ra{
        max-width: 6%;
        top: 92%;
        left: 41%;
    }
    .crayon.rosa{
        max-width: 2.7%;
        top: 72.5%;
        left: 46.5%;
        transform: rotate(-40deg);
    }
    .madera{
        position: absolute;
        width: 100%;
        opacity: 50%;
        height: 100%;
    }
    .compu:hover, .camara:hover, .dvds:hover, .ipod:hover, .sketchbook:hover, .sticky:hover, .vaquita:hover{
        transform: rotate(3deg);
    }

    .compu:hover + #blog{
        display: block;
    }


    @font-face {
        font-family: 'fuenteDOS';
        src: url('rscrs/Perfect-DOS-VGA-437.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }



    /*Compu*/

    .botonCompu {
        position: absolute; 
        top: 37%;         
        left: 6%;
        width: 38%;        
        display: inline-block;
    }

    .botonCompu .compu {
        width: 100%;       
        display: block;
    }

    .botonCompu .textoBlog {
        text-decoration: none;
        position: absolute;
        text-shadow: 2px 2px 0 black,-2px 2px 0 black,2px -2px 0 black,-2px -2px 0 black;
        left: 50%;
        transform: translate(-44%, 239%);
        color: white;
        font-family: 'fuenteDOS', monospace;
        font-size: 50px;
        display: none;
        z-index: 1;
    }

    .botonCompu:hover .compu {
        transform: rotate(3deg);
    }

    .botonCompu:hover .textoBlog {
        display: block;
    }

    /*Camara*/

    .botonCamara {
        position: absolute;
        top: 60%;
        left: 50%;
        width: 10%;
        display: inline-block;
    }

    .botonCamara .camara {
        width: 100%;       
        display: block;
    }

    .botonCamara .textoFotos {
        text-decoration: none;
        position: absolute;
        text-shadow: 2px 2px 0 black,-2px 2px 0 black,2px -2px 0 black,-2px -2px 0 black;
        left: 50%;
        transform: translate(-46%, 141%);
        color: white;
        font-family: 'fuenteDOS', monospace;
        font-size: 35px;
        display: none;
        z-index: 1;
    }

    .botonCamara:hover .camara {
        transform: rotate(3deg);
    }

    .botonCamara:hover .textoFotos {
        display: block;
    }

    /*DvDs*/

    .botonDvd {
        position: absolute;
        top: 55%;
        left: 75.5%;
        width: 13%;
        display: inline-block;
    }

    .botonDvd .dvds {
        width: 100%;       
        display: block;
    }

    .botonDvd .textoDvds {
        text-decoration: none;
        position: absolute;
        text-shadow: 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black;
        left: 50%;
        transform: translate(-53%, 199%);
        color: white;
        font-family: 'fuenteDOS', monospace;
        font-size: 40px;
        display: none;
        z-index: 1;
    }

    .botonDvd:hover .dvds {
        transform: rotate(3deg);
    }

    .botonDvd:hover .textoDvds {
        display: block;
    }


    /*iPod*/

    .botoniPod {
        position: absolute;
        top: 75%;
        left: 68%;
        width: 9.5%;
        display: inline-block;
    }

    .botoniPod .ipod {
        width: 100%;       
        display: block;
    }

    .botoniPod .textoiPod {
        text-decoration: none;
        position: absolute;
        text-shadow: 2px 2px 0 black,-2px 2px 0 black,2px -2px 0 black,-2px -2px 0 black;
        left: 50%;
        transform: translate(-46%, 114%);
        color: white;
        font-family: 'fuenteDOS', monospace;
        font-size: 35px;
        display: none;
        z-index: 1;
    }

    .botoniPod:hover .ipod {
        transform: rotate(3deg);
    }

    .botoniPod:hover .textoiPod {
        display: block;
    }


    /*Sketchbook*/

    .botonSketchbook {
        position: absolute;
        top: 75%;
        left: 48%;
        width: 18%;
        display: inline-block;
    }

    .botonSketchbook .sketchbook {
        width: 100%;       
        display: block;
    }

    .botonSketchbook .textoSketchbook {
        text-decoration: none;
        position: absolute;
        text-shadow: 2px 2px 0 black,-2px 2px 0 black,2px -2px 0 black,-2px -2px 0 black;
        left: 50%;
        transform: translate(-51%, 115%);
        color: white;
        font-family: 'fuenteDOS', monospace;
        font-size: 50px;
        display: none;
        z-index: 1;
    }

    .botonSketchbook:hover .sketchbook {
        transform: rotate(3deg);
    }

    .botonSketchbook:hover .textoSketchbook {
        display: block;
    }

    /*Sticky*/
    .botonSticky {
        position: absolute;
        top: 40%;
        left: 15%;
        width: 5.5%;
        display: inline-block;
    }

    .botonSticky .sticky {
        width: 100%;       
        display: block;
    }

    .botonSticky .textoSticky {
        text-decoration: none;
        position: absolute;
        text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
        left: 50%;
        transform: translate(-50%, 137%);
        color: white;
        font-family: 'fuenteDOS', monospace;
        font-size: 25px;
        display: none;
        z-index: 1;
    }

    .botonSticky:hover .sticky {
        transform: rotate(3deg);
    }

    .botonSticky:hover .textoSticky {
        display: block;
    }

    /*Vaquita*/
    .botonVaquita {
        position: absolute;
        top: 83%;
        left: 0%;
        width: 13%;
        display: inline-block;
    }

    .botonVaquita .vaquita {
        width: 100%;       
        display: block;
    }

    .botonVaquita .textoVaquita {
        text-decoration: none;
        position: absolute;
        text-shadow: 2px 2px 0 black,-2px 2px 0 black,2px -2px 0 black,-2px -2px 0 black;
        left: 50%;
        transform: translate(-51%, 43%);
        color: white;
        font-family: 'fuenteDOS', monospace;
        font-size: 50px;
        display: none;
        z-index: 1;
        text-align: center;
    }

    .botonVaquita:hover .vaquita {
        transform: rotate(3deg);
    }

    .botonVaquita:hover .textoVaquita {
        display: block;
    }

    .botonVaquita:hover .textoVaquita[lang="es"]:not(.hidden) {
        display: block;
        }

        .botonVaquita:hover .textoVaquita[lang="en"]:not(.hidden) {
        display: block;
        }

    .kyle{
        position: absolute;
        max-width: 8.5%;
        top: 57.5%;
        left: 89.5%;
    }

    .lapicesColores{
        position: absolute;
        max-width: 15%;
    }
    .lapicesColores.uno{
        left: 28%;
        transform: rotate(10deg);
        top: 83%;
        max-width: 13%;
    }
    .lapicesColores.dos{
        top: 85%;
        max-width: 7%;
        left: 21.5%;
        transform: rotate(7deg);
    }
    .lapicesColores.dosOtro{
        top: 86%;
        max-width: 7%;
        left: 74.5%;
        transform: rotate(242deg);
    }
    .lapicesColores.tres{
       max-width: 7%;
        top: 86%;
        left: 16.5%;
        transform: rotate(8deg);
    }
    .lapicesColores.cuatro{
        max-width: 7%;
        top: 86%;
        left: 13%;
        transform: rotate(363deg);
    }
    .reloj{
        max-width: 12%;
        position: absolute;
        left: 50%;
        top: 8%;
    }
    .boton{
        position: absolute;
        top: 95%;
        left: 93%;
        max-width: 6%;
    }

    .traductor{
        position: absolute;
        top: 50%;
        left: 1.5%;
        font-size: 25px;
        color: white;
        cursor: pointer;
        font-family: 'lazyDog';
        text-decoration: underline;
        text-align: center;
    }
    .traductor:hover{
        color: green;
    }

    @font-face {
        font-family: 'lazyDog';
        src: url('rscrs/lazy_dog.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }


    /*Media Queries*/
    @media (max-width: 1280px) {
        body{
            background-size: cover;
        }
        .parent{
            height: 64%;
            top:-8%;
        }

    }