* {
    margin: 0;
    /*padding: 0;*/
}

html { scroll-behavior: smooth; }

:root {
    --color-primary: base-color;
    --color-accent: #32e2e2;;
    --color-error: #ff5252;
    --color-success: #66bb6a;

    --color-waves-accent: #EF12DC;
    --color-light: #fefefe;
    --color-light-gray: #dcddde;
    --color-gray: #aaaaaa;
    --color-medium-gray: #5e6472;
    --color-dark-gray: #3d3d3d;
    --color-dark: black;

    --font-family-primary: 'Katahdin Round';
    --font-family-secondary: 'Outfit';
    --font-family-paragraph: 'Literata';
    --font-family-quote: 'Biz UDPMincho';
    --color-blog-category-nursing: #9747FF;
    --color-blog-category-online-learning: #0088FF;
    --color-blog-category-highschool: #118700;
    --color-blog-category-stories: #EF12DC;
    --color-blog-category-tips: #EFAC24;
    --color-blog-category-offerings: #F93827;
    --color-blog-category-organization: #132C9A;
}

.activeNavLink {
    color: #0eccde;
}

h3 {
    color: var(--color-waves-accent);
}

.pageNotFound {
    width: 100%;
    height: auto;
}

li {
    padding: inherit;
}

.hoverAnimation {
    transform: scale(102%);
    transition-duration: 0.4s;
    will-change: transform;
}

.hoverAnimation:not(:hover) {
    transform: scale(100%);
    transition-duration: 0.4s;
}
  

a {
    color: inherit;
}

@font-face {
    font-family: 'Katahdin Round';
    src: url('fonts/KatahdinRound-Regular.woff2') format('woff2'),
    url('fonts/KatahdinRound-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit', sans-serif;
}

.sectionHeader {
    font-family: var(--font-family-primary), sans-serif;
    font-size: clamp(14px, 2vw, 25px);
    color: black;
    padding: 15px;
    border-radius: 9px;
}

.categoryBadge {
    padding: 1em;
    background-color: #d3d3d34f;
    border-radius: 25px;
    width: fit-content;
    font-family: var(--font-family-primary), sans-serif;
    font-size: clamp(8px, 1vw, 14px);
    letter-spacing: 1.5px;
    backdrop-filter: blur(4px);
    margin-bottom: 5px;
    color: white;
    margin-left: 5rem;

}

.calloutText {
    margin-bottom: 40px;
    margin-top: 40px;
    width: 100%;
    font-size: clamp(20px, 3vw, 40px);
    letter-spacing: 1px;
    line-height: 125%;
    color: var(--color-waves-accent);
    text-align: center;
    display: block;
}

.photoCaption {
    font-size: 13px;
    margin-left: 5px;
    display: block;
    line-height: 135%
}

.articlePhoto {
    width: 100%;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 1px;
    display: block;

}

.outfit-normal {
    font-family: var(--font-family-secondary), sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.outfit-medium {
    font-family: var(--font-family-secondary), sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.outfit-bold {
    font-family: var(--font-family-secondary), sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.literata-normal {
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.appImage {
    display: flex;
    width: 100px;
    height: 100px;
}

.navLinks {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

/*College Advice/ Tips*/
.collegeAdvice {
    background-color: var(--color-blog-category-tips);
}

/*Nursing/Healthcare*/
.nursing {
    background-color: var(--color-blog-category-nursing);
}

/*Our Organization*/
.ourOrganization {
    background-color: var(--color-blog-category-organization);
}

/*Course Offerings*/
.courseOfferings {
    background-color: var(--color-blog-category-offerings);
}

/*Early College/ High School*/
.earlyCollege {
    background-color: var(--color-blog-category-highschool);
}

/*Student Stories*/
.studentStories {
    background-color: var(--color-blog-category-stories);
}

/*Online Learning*/
.onlineLearning {
    background-color: var(--color-blog-category-online-learning);
}

@media only screen and (max-width: 800px) {
    .sectionHeader {
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 600px) {
    div.navLinks {
        display: none;
    }

    .categoryBadge {
        margin-left: 3rem;
    }
}

@media screen and (max-width: 450px) {
    .categoryBadge {
        margin-left: 1rem;
    }
}