body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url(clouds.jpg);
    overflow-y: hidden;
    overflow-x: hidden;
}

.container {
    position: relative;
    text-align: center;
    max-width: 100vw;
    margin: auto;
    display: flex;
    flex-direction: column;

}

#backgroundmobile {
    width: 100%;
    height: auto;
}


#arrow, #notesapp, #aboutapp, #comicapp, #chptapp, #guysapp, #artapp, #meapp, #miscapp, #mailapp {
    position: absolute;
    width: 50vw;
    max-width: 23vw;
    height: auto;
    margin-bottom: 10px;
}


.footer {
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100vw;
}

/* Media Query for Tablets and Phones */
@media only screen and (max-width: 500px) {

    #backgroundmobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit:cover;
    }

    .container {
        max-width: 600px;
    }

    #notesapp, #aboutapp, #comicapp, #chptapp, #guysapp, #artapp, #meapp, #miscapp, #mailapp {
        max-width: 100px;
        min-width: 50px
        position: fixed;
    }
   
    #arrow {
        max-width: 100px;
        position: fixed; 
        bottom: 10px; 
        left: 39%;
    }

    #notesapp {
        position: fixed;
        top: 25px;
        left: 5%;
    }

    #aboutapp {
        position: fixed;
        top: 25px;
        left: 40%;

    }

    #comicapp {
        position: fixed;
        top: 25px;
        left: 74%;
    }

    #chptapp {
        position:fixed;
        top: 170px;
        left: 5%
    }

    #guysapp {
        position: fixed;
        top: 170px;
        left: 40%;
    }

    #artapp {
        position: fixed;
        top: 170px;
        left: 74%;
    }

    #meapp {
        position: fixed;
        top: 330px;
        left: 5%
    }

    #miscapp {
        position:fixed;
        top: 330px;
        left: 40%
    }

    #mailapp {
        position: fixed;
        top: 330px;
        left: 74%;
    }


}
/* Media Query for Desktops */
@media only screen and (min-width: 501px) {
    .container {
        max-width: 400px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
   
   
    #arrow {
        max-width: 100px;
        position: relative; 
        top: -143px; 
        left: 145px;
    }

    #notesapp {
        position: relative;
        top: -780px;
        left: -80px;
    }

    #aboutapp {
        position: relative;
        top: -777px;
        left: -42px;

    }

    #comicapp {
        position: relative;
        top: -778px;
        left: -10px;
    }

    #chptapp {
        position: relative;
        top: -750px;
        left: 17px
    }

    #guysapp {
        position: relative;
        top: -750px;
        left: 55px;
    }

    #artapp {
        position: relative;
        top: -750px;
        left: 88px;
    }

    #meapp {
        position: relative;
        top: -600px;
        left: -278px;
    }

    #miscapp {
        position:relative;
        top: -730px;
        left: 55px;
    }

    #mailapp {
        position: relative;
        top: -730px;
        left: 88px;;
    }
    

    #arrow, #notesapp, #aboutapp, #comicapp, #chptapp, #guysapp, #artapp, #meapp, #miscapp, #mailapp {
        max-width: 95px;
    }
}