* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.page-title {
    padding: 15px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.main-header {
    font-weight: bold;
    font-size: 18px;
    padding: 15px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.main-body {
    gap: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px;
}
.about-us ul nav {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: stretch;
    gap: 50px;
    list-style-type: none;
}


.er {
    display: grid;
    grid-row: 1;
    grid-column: 1;
    justify-content: center;
}

.cr {
    display: grid;
    grid-row: 1;
    grid-column: 2;
    justify-content: center;
}

.er2 {
    display: grid;
    grid-row: 1;
    grid-column: 3;
    justify-content: center;
}

.sr3d {
    display: grid;
    grid-row: 1;
    grid-column: 4;
    justify-content: center;
}

.crosroad {
    display: grid;
    grid-row: 1;
    grid-column: 5;
    justify-content: center;
}

a:link {
    color: black;
}

a:hover {
    color: blue;
}

.name {
    border-radius: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    padding: 5px;
}

.shockers {
    display: grid;
    grid-row: 3;
    grid-column: 1;
    justify-content: center;
}

/* .eri:hover {
    transform: scale(1.5);
} */

.eri {
    display: grid;
    grid-row: 2;
    grid-column: 1;
    justify-content: center;
}

/* .ci:hover {
    transform: scale(1.5);
} */

.ci {
    display: grid;
    grid-row: 2;
    grid-column: 5;
    justify-content: center;
}

/* .er2i:hover {
    transform: scale(1.5);
} */

.er2i {
    display: grid;
    grid-row: 2;
    grid-column: 3;
    justify-content: center;
}

/* .sri:hover {
    transform: scale(1.5);
} */

.sri {
    display: grid;
    grid-row: 2;
    grid-column: 4;
    justify-content: center;
}

/* .cri:hover {
    transform: scale(1.5);
} */

.cri {
    display: grid;
    grid-row: 2;
    grid-column: 2;
    justify-content: center;
}

/* .ssi:hover {
    transform: scale(1.5);
} */

.ssi {
    display: grid;
    grid-row: 4;
    grid-column: 1;
    justify-content: center;
}

.slope {
    display: grid;
    grid-row: 3;
    grid-column: 2;
    justify-content: center;
}

/* .slopei:hover {
    transform: scale(1.5);
} */

.slopei {
    display: grid;
    grid-row: 4;
    grid-column: 2;
    justify-content: center;
}

body {
    color: white;
    background-color: black;
}

.gd {
    display: grid;
    grid-row: 3;
    grid-column: 3;
    justify-content: center;
}

.gdi {
    display: grid;
    grid-row: 4;
    grid-column: 3;
    justify-content: center;
}

/* .gdi:hover {
    transform: scale(1.5);
} */


a:visited {
    color: white
}

a:link {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.cluster {
    display: grid;
    grid-row: 3;
    grid-column: 4;
    justify-content: center;
}

/* .clusterim:hover {
    transform: scale(1.5);
} */

.clusterim {
    display: grid;
    grid-row: 4;
    grid-column: 4;
    justify-content: center;
}

.two48 {
    display: grid;
    grid-row: 3;
    grid-column: 5;
    justify-content: center;
}

/* .img2048:hover {
    transform: scale(1.5);
} */

.img2048 {
    display: grid;
    grid-row: 4;
    grid-column: 5;
    justify-content: center;
}

.about-us ul menu {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: stretch;
    gap: 50px;
    list-style-type: none;
}
.drift {
    display: grid;
    grid-row: 5;
    grid-column: 1;
    justify-content: center;
}

.drifti {
    display: grid;
    grid-row: 6;
    grid-column: 1;
    justify-content: center;
}
/* 
.drifti:hover {
    transform: scale(1.5);
} */

.pacman {
    display: grid;
    grid-row: 5;
    grid-column: 2;
    justify-content: center;
}

.pacmanim {
    display: grid;
    grid-row: 6;
    grid-column: 2;
    justify-content: center;
}

.escapecity2 {
    display: grid;
    grid-row: 5;
    grid-column: 3;
    justify-content: center;
}

.escapecityimg {
    display: grid;
    grid-row: 6;
    grid-column: 3;
    justify-content: center;
}

.vex3 {
    display: grid;
    grid-row: 5;
    grid-column: 4;
    justify-content: center;
}

.vex3img {
    display: grid;
    grid-row: 6;
    grid-column: 4;
    justify-content: center;
}

.taproad {
    display: grid;
    grid-row: 5;
    grid-column: 5;
    justify-content: center;
}

.taproadimg {
    display: grid;
    grid-row: 6;
    grid-column: 5;
    justify-content: center;
}

.chickenjokey {
    display: grid;
    grid-row: 7;
    grid-column: 1;
    justify-content: center;
}

.chickenjokeyimg {
    display: grid;
    grid-row: 8;
    grid-column: 1;
    justify-content: center;
}

.basketball {
    display: grid;
    grid-row: 7;
    grid-column: 2;
    justify-content: center;
}

.basketballimg {
    display: grid;
    grid-row: 8;
    grid-column: 2;
    justify-content: center;
}

.paper {
    display: grid;
    grid-row: 7;
    grid-column: 3;
    justify-content: center;
}

.paperimg {
    display: grid;
    grid-row: 8;
    grid-column: 3;
    justify-content: center;
}

.jockeyclicker {
    display: grid;
    grid-row: 7;
    grid-column: 4;
    justify-content: center;
    }

.jockeyimg {
    display: grid;
    grid-row: 8;
    grid-column: 4;
    justify-content: center;
}


.menubar ul nav {
    font-size: 20px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
    padding: 50px;
    font-weight: bold;
}

.hexanaut {
    display: grid;
    grid-row: 7;
    grid-column: 5;
    justify-content: center;
}

.hexanautimg {
    display: grid;
    grid-row: 8;
    grid-column: 5;
    justify-content: center;
}

.smashcarts {
    display: grid;
    grid-row: 9;
    grid-column: 1;
    justify-content: center;
}

.smashcartsimg {
    display: grid;
    grid-row: 10;
    grid-column: 1;
    justify-content: center;
}


@media (max-width: 900px) {
    .main-body{
        display: inline;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px;
    }
    .main-body div{
        display: grid;
        padding: 15px;
        grid-row: auto;
        grid-column: auto;
    }
}


@media (min-width: 901px) {
    .main-body {
        gap: 10px;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 50px 200px 50px 200px 50px 200px 50px 200px 50px 200px;
}

    .er {
        display: grid;
        grid-row: 1;
        grid-column: 1;
        justify-content: center;
    }

    .cr {
        display: grid;
        grid-row: 1;
        grid-column: 2;
        justify-content: center;
    }

    .er2 {
        display: grid;
        grid-row: 1;
        grid-column: 3;
        justify-content: center;
    }

    .sr3d {
        display: grid;
        grid-row: 1;
        grid-column: 4;
        justify-content: center;
    }

    .crosroad {
        display: grid;
        grid-row: 1;
        grid-column: 5;
        justify-content: center;
    }

    a:link {
        color: black;
    }

    a:hover {
        color: blue;
    }

    .name {
        border-radius: 50px;
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        padding: 5px;
    }

    .shockers {
        display: grid;
        grid-row: 3;
        grid-column: 1;
        justify-content: center;
    }

    /* .eri:hover {
        transform: scale(1.5);
    } */

    .eri {
        display: grid;
        grid-row: 2;
        grid-column: 1;
        justify-content: center;
    }

    /* .ci:hover {
        transform: scale(1.5);
    } */

    .ci {
        display: grid;
        grid-row: 2;
        grid-column: 5;
        justify-content: center;
    }

    /* .er2i:hover {
        transform: scale(1.5);
    } */

    .er2i {
        display: grid;
        grid-row: 2;
        grid-column: 3;
        justify-content: center;
    }

    /* .sri:hover {
        transform: scale(1.5);
    } */

    .sri {
        display: grid;
        grid-row: 2;
        grid-column: 4;
        justify-content: center;
    }

    /* .cri:hover {
        transform: scale(1.5);
    } */

    .cri {
        display: grid;
        grid-row: 2;
        grid-column: 2;
        justify-content: center;
    }

    /* .ssi:hover {
        transform: scale(1.5);
    } */

    .ssi {
        display: grid;
        grid-row: 4;
        grid-column: 1;
        justify-content: center;
    }

    .slope {
        display: grid;
        grid-row: 3;
        grid-column: 2;
        justify-content: center;
    }

    /* .slopei:hover {
        transform: scale(1.5);
    } */

    .slopei {
        display: grid;
        grid-row: 4;
        grid-column: 2;
        justify-content: center;
    }

    body {
        color: white;
        background-color: black;
    }

    .gd {
        display: grid;
        grid-row: 3;
        grid-column: 3;
        justify-content: center;
    }

    .gdi {
        display: grid;
        grid-row: 4;
        grid-column: 3;
        justify-content: center;
    }

    /* .gdi:hover {
        transform: scale(1.5);
    } */


    a:visited {
        color: white
    }

    a:link {
        color: white;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    .cluster {
        display: grid;
        grid-row: 3;
        grid-column: 4;
        justify-content: center;
    }

    /* .clusterim:hover {
        transform: scale(1.5);
    } */

    .clusterim {
        display: grid;
        grid-row: 4;
        grid-column: 4;
        justify-content: center;
    }

    .two48 {
        display: grid;
        grid-row: 3;
        grid-column: 5;
        justify-content: center;
    }

    /* .img2048:hover {
        transform: scale(1.5);
    } */

    .img2048 {
        display: grid;
        grid-row: 4;
        grid-column: 5;
        justify-content: center;
    }

    .drift {
        display: grid;
        grid-row: 5;
        grid-column: 1;
        justify-content: center;
    }

    .drifti {
        display: grid;
        grid-row: 6;
        grid-column: 1;
        justify-content: center;
    }
    /* 
    .drifti:hover {
        transform: scale(1.5);
    } */

    .pacman {
        display: grid;
        grid-row: 5;
        grid-column: 2;
        justify-content: center;
    }

    .pacmanim {
        display: grid;
        grid-row: 6;
        grid-column: 2;
        justify-content: center;
    }

    .escapecity2 {
        display: grid;
        grid-row: 5;
        grid-column: 3;
        justify-content: center;
    }

    .escapecityimg {
        display: grid;
        grid-row: 6;
        grid-column: 3;
        justify-content: center;
    }

    .vex3 {
        display: grid;
        grid-row: 5;
        grid-column: 4;
        justify-content: center;
    }

    .vex3img {
        display: grid;
        grid-row: 6;
        grid-column: 4;
        justify-content: center;
    }

    .taproad {
        display: grid;
        grid-row: 5;
        grid-column: 5;
        justify-content: center;
    }

    .taproadimg {
        display: grid;
        grid-row: 6;
        grid-column: 5;
        justify-content: center;
    }

    .chickenjokey {
        display: grid;
        grid-row: 7;
        grid-column: 1;
        justify-content: center;
    }

    .chickenjokeyimg {
        display: grid;
        grid-row: 8;
        grid-column: 1;
        justify-content: center;
    }

    .basketball {
        display: grid;
        grid-row: 7;
        grid-column: 2;
        justify-content: center;
    }

    .basketballimg {
        display: grid;
        grid-row: 8;
        grid-column: 2;
        justify-content: center;
    }

    .paper {
        display: grid;
        grid-row: 7;
        grid-column: 3;
        justify-content: center;
    }

    .paperimg {
        display: grid;
        grid-row: 8;
        grid-column: 3;
        justify-content: center;
    }

    .jockeyclicker {
        display: grid;
        grid-row: 7;
        grid-column: 4;
        justify-content: center;
    }

    .jockeyimg {
        display: grid;
        grid-row: 8;
        grid-column: 4;
        justify-content: center;
    }

    .menubar ul nav {
        font-size: 20px;
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-direction: row;
        align-items: center;
        list-style-type: none;
        padding: 50px;
        font-weight: bold;
    }

    .hexanaut {
        display: grid;
        grid-row: 7;
        grid-column: 5;
        justify-content: center;
    }

    .hexanautimg {
        display: grid;
        grid-row: 8;
        grid-column: 5;
        justify-content: center;
    }

    .smashcarts {
        display: grid;
        grid-row: 9;
        grid-column: 1;
        justify-content: center;
    }

    .smashcartsimg {
        display: grid;
        grid-row: 10;
        grid-column: 1;
        justify-content: center;
    }
}