body {
    margin: 0px;
    height: 100%;
    width: 100%;
}

.text-center {
    text-align: center !important;
}
.m-auto {
    margin: auto !important;
}
.p-2 {
    padding: 0.5rem !important;
}
.mb-0, .my-0 {
    margin-bottom: 0 !important;
}
@media screen and (max-width: 40em) {
    main {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr 4fr;
        grid-template-areas:
            "header header"
            "article article"
            "footer footer"
            "nav nav";
    }
}

@media screen and (min-width: 40em) {
    main {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr 6fr;
        grid-template-rows: auto 10fr auto;
        grid-template-areas:
            "header header"
            "nav article"
            "footer footer";
    }
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h4,
.h4 {
  font-size: 1.5rem !important;
}

h5,
.h5 {
  font-size: 1.25rem !important;
}

h6,
.h6 {
  font-size: 1rem !important;
}
header {
    grid-area: header;
    background: lightblue;
}


article {
    grid-area: article;
    background: lightgoldenrodyellow;
}

nav {
    grid-area: nav;
    background: lightseagreen;
}

footer {
    grid-area: footer;
    background: lightgrey;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: green;
    background-color: lightseagreen;
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: lightslategrey;
    border-color: lightslategrey;
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgb(32 178 170 / 30%)
}

.no-border {
    border-radius: 0%;
}