:root {
    /*
    fonts
    */
    --main-font: 'Nunito Sans', sans-serif;
    --title-font: 'Montserrat', sans-serif;
    --fun-font: 'Permanent Marker', cursive;
    /*
    sizes
    */
    --main-font-size: 12pt;
    --title-font-size: 40px;
    /* --h1-font-size: 2.5rem; */
    --h2-font-size: 24pt;
    --h3-font-size: 18pt;
    --alt-font-size: 14pt;
    --fun-font-size: 18pt;
    --anchor-font-size: 10pt;
    --anchor-big-font-size: 18pt;
    --mobile-font-size: 18pt;
    --callout-font-size: 10pt;
    --lesson-card-title: 14pt;
    --margin-size: 10px;
    --padding-size: 10px;
    --grid-padding-size: 20px;
    --card-padding-bottom: 30px;
    --border-radius-size: 10px;
    --banner-text-size: 14pt;
    --banner-margin: 0;
    /*
    colors
    */
    --main-color: #000;
    --alt-color: #fff;
    --hilite-color: #67acc4;
    --section-color: #fff;
    --section-main-color: #131737;
    --section-alt-color: #262834;
    --border-color: #ccc;
    --divider-color: #ccc;
    --button-color: #af2818;
    --button-hover-color: #cb3a13;
    --link-color: #000;
    --link-hover-color: #cb3a13;
    --caption-color: #a12f36;
    --card-color: #383b4e;
    --banner-color: #af2818;
    --banner-text-color: #fff;
    /*
    margins & padding
    */
    --lesson-card-spacer: 20px;
    --spacer-bottom: 20px;
}

* {
    font-family: var(--main-font);
    font-size: var(--main-font-size);
}

html,
body {
    background-color: var(--section-color);
    margin: 0;
    padding: 0;
}

header,
footer {
    background-color: var(--main-color);
    color: var(--alt-color);
    display: inline-grid;
    margin: auto;
    text-align: center;
    width: 100%;
}

header {
    height: 60px;
}

footer {
    height: 600px;
}

header div,
footer div {
    align-self: center;
    justify-self: center;
}

#section-1 {
    background-color: var(--section-main-color);
}

#section-2,
#section-4,
#section-6 {
    background-color: var(--section-color);
}

h1,
h1 span,
h2,
h2 span,
h3,
h3 span {
    font-family: var(--title-font);
    text-transform: uppercase;
}

h1,
h2,
h3 {
    color: var(--main-color);
}

/* h1,
h1 span {
    font-size: var(--h1-font-size) !important;
} */

h2,
h2 span {
    font-size: var(--h2-font-size) !important;
}

h3,
h3 span {
    font-size: var(--h3-font-size) !important;
}

h1 span,
h2 span,
h3 span {
    color: var(--hilite-color);
}

.alt {
    color: var(--alt-color);
}

a {
    font-size: var(--anchor-font-size);
    text-decoration: none !important;
}

.a-btn,
.a-btn-big {
    background-color: var(--button-color);
    border-radius: 20px;
    color: var(--alt-color) !important;
    display: inline-block;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}

.a-btn:hover,
.a-btn-big:hover {
    background-color: var(--button-hover-color);
    color: var(--alt-color) !important;
}

.a-btn {
    width: 300px;
}

.a-btn-big {
    font-size: var(--anchor-big-font-size);
    height: 60px;
    line-height: 40px;
    margin: auto;
    width: 400px;
}

.columns-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
}

.columns-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
}

.columns-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    -o-column-count: 4;
    column-count: 4;
}

.hero_img {
    margin-bottom: 20px;
    object-fit: none;
}

.info-callout {
    cursor: default;
    display: inline-block;
    font-family: var(--title-font) !important;
    font-size: var(--alt-font-size);
    margin: 0 !important;
    padding: 0;
    position: relative;
    text-transform: uppercase;
}

.callout {
    background-image: url("../images/callout-overlay.png");
    background-repeat: no-repeat, no-repeat;
    color: var(--alt-color);
    height: 120px;
    left: 110%;
    padding: 20px;
    padding-top: 35px;
    position: absolute;
    text-align: center;
    text-transform: none;
    top: -78px;
    visibility: hidden;
    width: 120px;
    z-index: 999;
}

.callout,
.callout span {
    font-size: var(--callout-font-size) !important;
}

.callout::after {
    content: " ";
    height: 0;
    left: 40%;
    position: absolute;
    width: 0;
}

.info-callout:hover .callout {
    visibility: visible;
}

.list-a {
    color: var(--link-color) !important;
    font-size: var(--main-font-size);
}

.list-a:hover {
    color: var(--link-hover-color) !important;
}

.divider-1 {
    background-color: var(--divider-color);
    border-width: 0;
    color: var(--divider-color);
    height: 1px;
}

.small-card,
.medium-card {
    background-color: var(--card-color);
    width: 90%;
}

.small-card img,
.medium-card img {
    width: 100%;
}

.small-card h6,
.small-card p,
.medium-card h6,
.medium-card p {
    padding: var(--lesson-card-spacer);
}

.small-card h6,
.medium-card h6 {
    font-size: var(--lesson-card-title);
    font-weight: bold;
    padding-bottom: 0;
}

.half-round {
    background-color: var(--banner-color);
    border-top-left-radius: var(--border-radius-size);
    border-top-right-radius: var(--border-radius-size);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--banner-text-color);
    font-size: var(--banner-text-size);
    font-weight: bold;
    margin-bottom: var(--banner-margin);
    padding: var(--padding-size);
    text-align: center;
}

.half-round-img {
    margin-top: var(--banner-margin);
}

#section-2 .styles-list p a,
#section-4 .genres-list h6 a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
}

#section-2 .styles-list p a:hover,
#section-4 .genres-list h6 a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

#section-3,
#section-5 {
    background-color: var(--section-alt-color);
    color: var(--alt-color);
}

#section-4 {
    text-align: center;
}

#section-4 .visual {
    margin-bottom: 40px;
}

#section-4 .genres-list {
    margin: 20px;
    text-align: left;
}

#section-4 .genres-list .row {
    --bs-gutter-x: 0;
}

#section-4 .genres-list h6 {
    margin: 0;
    text-transform: uppercase;
}

#section-4 .genres-list p,
#section-4 .genres-list p span {
    color: var(--hilite-color);
    font-size: 10pt;
    margin: 0;
}

.genres-grid-item,
.genres-grid-item-mobile,
.skills-grid-item,
.skills-grid-item-mobile {
    border-top: solid 1px var(--border-color);
    border-left: solid 1px var(--border-color);
    padding: var(--grid-padding-size);
}

.genres-list .row-right,
.skills-list .row-right {
    border-right: solid 1px var(--border-color);
}

.genres-list .row-right:nth-last-child(1),
.skills-list .row-right:nth-last-child(1) {
    border-bottom: solid 1px var(--border-color);
}

.genres-grid-item-mobile,
.skills-grid-item-mobile {
    border-top: none;
    border-left: none;
    border-bottom: solid 1px var(--border-color);
}

.skills-grid-item,
.skills-grid-item-mobile,
.skills-grid-item a,
.skills-grid-item-mobile a {
    color: var(--main-color);
    font-size: var(--main-font-size);
    text-transform: uppercase;
}

#section-4 a {
    margin-top: 30px;
    text-decoration: none;
}

.lessons-grid-item {
    width: 100%;
}

.lessons-grid-item a,
.lessons-grid-item-mobile a {
    font-size: var(--alt-font-size);
}

.lessons-grid-item-mobile {
    border-bottom: solid 1px var(--divider-color);
    margin-bottom: var(--spacer-bottom);
    padding-bottom: var(--spacer-bottom);
    text-transform: uppercase;
}

.lessons-artists-list ul {
    padding-bottom: var(--card-padding-bottom);
}

.anatomy-points.list-mobile {
    margin-bottom: var(--card-padding-bottom);
}

.anatomy-points.list-mobile li {
    list-style: none;
    margin-bottom: var(--margin-size);
}

.anatomy-points-mobile-item {
    background-color: var(--alt-color);
    border-radius: 50%;
    color: var(--banner-color);
    display: inline-block;
    font-family: var(--title-font);
    font-size: var(--mobile-font-size);
    padding: var(--padding-size);
    text-align: center;
    width: 50px;
}

.spacer-bottom,
.vt-spacer {
    margin-bottom: var(--spacer-bottom);
}