@media only screen and (max-width: 1024px) {
    body {
        background-color: #00010a;
        color: rgb(235, 235, 235);
        font-family: 'tahoma', segoe ui;
        transition: 0.5s;
    }

    nav {
        margin: 25px;
        animation-name: fadeing;
        animation-duration: 2s;
    }

    @keyframes fadeing {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    nav a {
        text-decoration: none;
        color: rgb(6, 8, 15);
        font-family: tahoma;
    }

    nav ul {
        list-style: none;
    }

    nav ul a {
        margin-left: -45px;
        text-transform: capitalize;
        letter-spacing: 1px;
    }

    nav ul a:nth-child(1) {
        background: linear-gradient(55deg, #a1c4fd, #c2e9fb);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(2) {
        background: linear-gradient(55deg, #667eea, #764ba2);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(3) {
        background: linear-gradient(55deg, #ffc3a0, #ffafbd);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(4) {
        background: linear-gradient(55deg, #f3fd60, #d2df1f);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(5) {
        background: linear-gradient(55deg, #fda1f1, #ff38f5);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(6) {
        background: linear-gradient(55deg, #b6fda1, #81ff46);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(7) {
        background: linear-gradient(55deg, #fda1a1, #ff5252);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(8) {
        background: linear-gradient(55deg, #fdc6a1, #ff7d31);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    nav ul a:nth-child(9) {
        background: linear-gradient(55deg, #a1fdda, #40fd95);
        padding: 10px;
        border-radius: 25px;
        margin-bottom: 10px;
    }

    .main-heading {
        text-align: center;
        text-decoration: underline;
        font-size: 35px;
    }

    #boys ul li {
        font-size: 17px;
        letter-spacing: 0.5px;
        line-height: 25px;
        list-style: decimal;
        border-bottom: 1px rgb(88, 88, 88) solid;
    }

    #girls ul li {
        font-size: 17px;
        letter-spacing: 0.5px;
        line-height: 25px;
        list-style: decimal;
        border-bottom: 1px rgb(88, 88, 88) solid;
    }



    div {
        background: linear-gradient(rgb(28, 28, 29), #0b0b0c);
        width: 90%;
        border-radius: 8px;
        color: #d3d3d3;
    }

    div {
        width: 90%;
        margin: auto;
    }

    #boys ul {
        border-bottom: 1px white solid;
    }

    .backcolor2 {
        background: linear-gradient(90deg, #8cbaff, #0091d4);
        color: #0b0b0c;
    }

    .backcolor1 {
        background: linear-gradient(90deg, #667eea, #764ba2);
        color: #0b0b0c;
    }

    .backcolor3 {
        background: linear-gradient(90deg, #ffc3a0, #ff6c84);
        color: #0b0b0c;
    }

    .backcolor4 {
        background: linear-gradient(90deg, #f3fd60, #d2df1f);
        color: #0b0b0c;
    }

    .backcolor5 {
        background: linear-gradient(90deg, #fda1f1, #ff38f5);
        color: #0b0b0c;
    }

    .backcolor6 {
        background: linear-gradient(90deg, #b6fda1, #81ff46);
        color: #0b0b0c;
    }

    .backcolor7 {
        background: linear-gradient(90deg, #fda1a1, #ff5252);
        color: #0b0b0c;
    }

    .backcolor8 {
        background: linear-gradient(90deg, #fdc6a1, #ff7d31);
        color: #0b0b0c;
    }

    .backcolor9 {
        background: linear-gradient(90deg, #a1fdda, #40fd95);
        color: #0b0b0c;
    }

    nav ul {
        display: grid;
        grid-template-columns: 50% 50%;
    }
}