@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

body {
    height: 100%;
    font-family: 'Roboto Condensed', sans-serif !important;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5rem !important;
}

.nav-link {
    font-weight: 300;
    font-size: 1.2rem;
    color: #ffffff !important;
}

.nav-link:hover {
    color: #ffffff5d !important;
}

.navbar .navbar-collapse {
    text-align: center;
}

.mainPage{
    background: url("https://i.ibb.co/QQPB7Nf/The-Unique-Punks-BG.png") no-repeat center center fixed;
    background-size: cover;
}

.logoImg {
    --animate-duration: 1s;
    height: 36rem;
}

.brandName {
    text-transform: uppercase;
    color: white;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 0.15rem;

    --animate-duration: 2s;
}

.brandDescription {
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: 0.5rem;

    --animate-duration: 3s;
}

.btnOpenSea {
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    --animate-duration: 4s;
    text-transform: uppercase;
}


.aboutPage {
    background: url("https://i.ibb.co/QQPB7Nf/The-Unique-Punks-BG.png") no-repeat center center fixed;
    background-size: cover;
}

.textDescription {
    color: white;
    font-weight: 300;
    font-size: 2rem;
}






/* Media Queries */


@media (min-width: 320px) and (max-width: 376px) {
    .logoImg {
        height: 20rem;
    }

    .brandName {
        font-size: 1.8rem;
    }

    .brandDescription {
        font-size: 1rem;
    }

    .textDescription {
        font-size: 1.2rem;
    }
}

@media (min-width: 376px) and (max-width: 576px) {
    .logoImg {
        height: 25rem;
    }

    .brandName {
        font-size: 2.4rem;
    }

    .brandDescription {
        font-size: 1.4rem;
    }
    .textDescription {
        font-size: 1.2rem;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .logoImg {
        height: 30rem;
    }

    .brandName {
        font-size: 3rem;
    }

    .brandDescription {
        font-size: 2rem;
    }

    .textDescription {
        font-size: 1.4rem;
    }
}