@import url(button.css);
@import url(card.css);
@import url(fonts/all.css);

body {
    background-color: var(--nb-body-bg-color);
}

p {
    font-family: 'DM Sans';
}

h1, h2, h3, h4, h5 {
    font-family: 'Space Grotesk';
}


.maincontent {
    width: 40%;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

/* phone */
@media screen and (max-width: 600px) {
    .maincontent {
        width: 95%;
    }
}

/* anything in between a phone and a laptop */
@media screen and (min-width: 600px) {
    .maincontent {
        width: 70%;
    }

    :root {
        --maincontent-width: 70%;
    }
}

/* desktop laptop etc */
@media screen and (min-width: 1100px) {
    .maincontent {
        width: 45%;
    }

    :root {
        --maincontent-width: 45%;
    }
}

/* 4K, ultrawide, TV and other rich stuff */
@media screen and (min-width: 2000px) {
    .maincontent {
        width: 30%;
    }

    :root {
        --maincontent-width: 30%;
    }
}