@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

body {
    height: 100vh;
    width: 100vw;
    color: white;
    background-color: black;
    font-family: "Dosis",sans-serif;
    background-image: url("../assets/bg.jpg");
    background-size: cover;
}

div, img {
    width: 100%;
    height: 100%;
}

.maingrid {
    display: grid;
    grid-template-rows: repeat(100,1fr);
    grid-template-columns: repeat(100,1fr);
}

.footer {
    grid-row: 94 / span 5;
    grid-column: 1 / span 100;
    transform: translateY(22px)
}
.footer p {
    text-align: center;
    transform: translateY(-33px);
}

.navbar {
    grid-row: 1 / span 7;
    grid-column: 1 / span 100;
}
.homeicon {
    grid-row: 3 / span 4;
    grid-column: 23 / span 8;
}
.abouticon {
    grid-row: 3 / span 4;
    grid-column: 32 / span 8;
}
.contacticon {
    grid-row: 3 / span 4;
    grid-column: 41 / span 11;
}
.picssongsicon {
    grid-row: 3 / span 5;
    grid-column: 52 / span 15;
    transform: translateY(-4px)
}
.upnexticon {
    grid-row: 3 / span 5;
    grid-column: 68 / span 13;
    transform: translateY(-4px)
}
.homeicon,.abouticon,.contacticon,.picssongsicon,.upnexticon {
    transition: ease-in-out;
    transition-duration: 0.1s;
    opacity: 0.6;
}
.homeicon:hover,.abouticon:hover,.contacticon:hover,.picssongsicon:hover,.upnexticon:hover {
    opacity: 1;
}

b {
    font-weight: bold;
}

@media screen and (max-width: 410px) {
    body {
        height: 300vh;
        background-color: black;
        color: white;
        background-image: none;
    }

    .navbar {
        grid-row: 2 / span 6;
        grid-column: 1 / span 100;
    }
    .homeicon {
        grid-row: 2 / span 2;
        grid-column: 3 / span 28;
    }
    .abouticon {
        grid-row: 2 / span 2;
        grid-column: 33 / span 28;
    }
    .contacticon {
        grid-row: 2 / span 2;
        grid-column: 63 / span 35;
    }
    .picssongsicon {
        grid-row: 5 / span 2;
        grid-column: 1 / span 53;
        transform: translateY(-4px)
    }
    .upnexticon {
        grid-row: 5 / span 2;
        grid-column: 53 / span 47;
        transform: translateY(-4px)
    }
    .footer {
    grid-row: 90 / span 5;
    grid-column: 1 / span 100;
    transform: translateY(22px)
    }
    .footer p {
        text-align: center;
        transform: translateY(-33px);
    }
}