#container {
    background-position: center;
    background-size: cover;
}

#app-grid,
#app-bar {
    display: grid;
}

@media (max-aspect-ratio: 2/3) {

    #app-grid,
    #app-bar {
        grid-template-columns: repeat(4, 16dvw);
    }
}

@media not (max-aspect-ratio: 2/3) {

    #app-grid,
    #app-bar {
        grid-template-columns: repeat(4, 7.2dvh);
    }
}

#app-grid>a,
#app-bar>a {
    display: grid;
}

#app-grid img,
#app-bar img {
    border-radius: 20%;
}

@media (max-aspect-ratio: 2/3) {

    #app-grid,
    #app-bar {
        gap: 8dvw;
    }

    #app-grid {
        padding: 6dvw;
    }

    #app-bar {
        margin: 2dvw;
        padding: 4dvw;
    }

    #app-grid img,
    #app-bar img {
        height: 16dvw;
        width: 16dvw;
    }
}

@media not (max-aspect-ratio: 2/3) {

    #app-grid,
    #app-bar {
        gap: 2dvh;
    }

    #app-grid {
        padding: 2.7dvh;
    }

    #app-bar {
        margin: .9dvh;
        padding: 1.8dvh;
    }

    #app-grid img,
    #app-bar img {
        height: 7.2dvh;
        width: 7.2dvh;
    }
}

#app-bar {
    margin-top: auto;

    background-color: #f2f2f760;

    border-radius: 3dvh;

    backdrop-filter: blur(.4dvh);
}

#app-bar>img {
    float: inline-end;
}

#back {
    height: 6dvh;
    width: 6dvh;

    position: absolute;
    bottom: 20dvh;
    left: -.8dvh;

    display: flex;

    background-color: #ff000080;
    color: black;
    text-decoration: none;

    border-radius: 0 50% 50% 0;
}

#back>span {
    font-size: 4dvh;
    margin: auto;
}

#dot {
    position: absolute;

    background-color: red;

    border-radius: 50%;

    color: white;
    text-align: center;
}

@media (max-aspect-ratio: 2/3) {
    #dot {
        bottom: 18.5dvw;
        left: 67dvw;

        width: 5dvw;
        height: 5dvw;
    }
}

@media not (max-aspect-ratio: 2/3) {
    #dot {
        bottom: 8.5dvh;
        left: 27dvh;

        width: 1.8dvh;
        height: 1.8dvh;
    }
}