@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

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

html {
    scroll-padding-top: 110px;
}

body {
    background-color: #f5f6f8;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.ascfix {

    /* Grid */
    display: grid;
    gap: 20px;

    /* *----- Variables -----* */

    /* Grid: Fluid Columns */
    --fluid-grid-200: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    --fluid-grid-250: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    --fluid-grid-300: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    --fluid-grid-325: repeat(auto-fill, minmax(min(325px, 100%), 1fr));
    --fluid-grid-350: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    --fluid-grid-400: repeat(auto-fill, minmax(min(400px, 100%), 1fr));

    /* Color */
    --ascbackground: #f5f6f8;
    --ascgold: #ffcc00;
    --asclightblue: #0085ca;
    --ascblue: #003c71;
    --ascblue90: hsla(208, 100%, 22%, 0.9);
    --ascblue80: hsla(208, 100%, 22%, 0.8);
    --ascblue70: hsla(208, 100%, 22%, 0.7);
    --ascblue60: hsla(208, 100%, 22%, 0.6);
    --ascblue50: hsla(208, 100%, 22%, 0.5);
    --ascblue40: hsla(208, 100%, 22%, 0.4);
    --ascblue30: hsla(208, 100%, 22%, 0.3);
    --ascblue20: hsla(208, 100%, 22%, 0.2);
    --ascblue15: hsla(208, 100%, 22%, 0.15);
    --ascblue10: hsla(208, 100%, 22%, 0.1);
    --ascblue05: hsla(208, 100%, 22%, 0.05);
    --ascdarkblue: #00203c;
    --sea-green: hsla(149, 54%, 75%, 0.9);
    --pale-orange: hsla(30, 100%, 80%, 0.9);
    --pink: hsla(0, 86%, 83%, 0.9);
    --light-blue: hsla(195, 53%, 79%, 0.9);
    --light-yellow: hsla(60, 100%, 81%, 0.9);

    /* Hover Transitions */
    --transition150: 150ms ease-in-out;

}

.ascfix * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ascfix :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--ascblue);
    line-height: 1;
    text-wrap: balance;
}

.ascfix figcaption {
    display: block;
    font-size: 12px;
    font-weight: 500;
    opacity: .7;
}

.ascfix :is(ul) {
    padding-left: 28px;
}

.ascfix a {
    font-family: inherit;
    font-weight: bold;
}

.ascfix a[href^=tel] {
    text-decoration: inherit;
    color: inherit;
}

.ascfix img {
    display: block;
    max-width: 100%;
}

.ascfix .text-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ascfix .drop_cap::first-letter,
.ascfix .drop_cap_word {
    display: block;
    background: linear-gradient(to top, var(--ascblue), #0085CA);
    border-radius: 5px;
    color: var(--ascgold);
    float: left;
    font-family: 'asc_pioneers_boldbold_italic', 'ASCPioneers' !important;
    font-size: 47px;
    font-weight: 500;
    line-height: 1;
    margin: 6px 10px 5px 0;
    padding: 6px 15px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
        0 2px 2px rgba(0, 0, 0, 0.11),
        0 4px 4px rgba(0, 0, 0, 0.11),
        0 8px 8px rgba(0, 0, 0, 0.11);
}

/* Floats */
.l-float {
    float: left;
    margin: 0 16px 5px 0;
    max-width: 35%;
}

.r-float {
    float: right;
    margin: 0 0 5px 16px;
    max-width: 35%;
}

.ascfix [class*="-float"] img {
    border-radius: 5px;
}

.flow>*+* {
    margin-top: 16px;
}

/* Navigation Icons */
.ascfix nav ul {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin-bottom: 16px;
    padding: 0;
}

.ascfix nav li {
    width: 100%;
}

.ascfix nav a {
    border-radius: 5px;
    overflow: hidden;
    background-color: #003C71;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    opacity: .8;
    padding-left: 0;
    padding-right: 15px;
    text-decoration: none;
    transition: var(--transition150);
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon {
    display: flex;
    align-items: center;
}

.icon::before {
    display: inline-flex;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    justify-content: center;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.ascfix nav :is(a:hover, a:focus) {
    background-color: #FFCC00;
    color: #003C71;
    opacity: 1;
    transform: scale(1.01);
    box-shadow: 0.5px 0.5px 0.7px rgba(0, 0, 0, 0.042),
        1.1px 1.1px 1.7px rgba(0, 0, 0, 0.061),
        2.1px 2.1px 3.1px rgba(0, 0, 0, 0.075),
        3.8px 3.8px 5.6px rgba(0, 0, 0, 0.089),
        7.1px 7.1px 10.4px rgba(0, 0, 0, 0.108),
        17px 17px 25px rgba(0, 0, 0, 0.15);
}

.ascfix nav .icon::before {
    background-color: var(--ascgold);
    color: var(--ascblue);
    font-size: 24px;
    margin-right: 10px;
    min-width: 50px;
    padding-block: 7.5px;
    transition: var(--transition150);
}

.ascfix nav .icon:hover::before {
    background-color: var(--ascblue);
    color: var(--ascgold);
}

.article_end {
    margin-bottom: -10px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.article_end::after {
    border-top: var(--ascblue30) 1px solid;
    display: block;
    font-family: 'asc_pioneers_boldbold_italic', 'ASCPioneers' !important;
    font-size: 50px;
    line-height: 1 !important;
    content: '\00A1';
    color: #003C71;
    margin-top: 8px;
    padding-top: 8px;
    text-align: center;
}

/* Content */

.ascfix section {
    border-radius: 5px;
    overflow: hidden;
}

.ascfix .photo-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.ascfix .photo-block img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.ascfix .tagline {
    font-weight: 700;
}

.ascfix .tagline span {
    font-style: italic;
    letter-spacing: 2px;
}

.ascfix .tagline sup {
    font-size: 10px;
    vertical-align: text-top;
}

/* .ascfix :is(.choose, .cost, .life) {
            display: flex;
        } */

.ascfix :is(.cost, .choose, .life)>div:first-of-type {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.ascfix .content {
    background: linear-gradient(to right, var(--ascblue15), var(--ascblue05));
    padding: 20px;
}

.ascfix .content p:first-of-type::first-line {
    font-size: 18px;
    font-weight: 700;
}

.ascfix .new ul>*+* {
    margin-top: 10px;
}

.ascfix .links {
    background: var(--ascblue90);
    min-width: 300px;
    padding: 20px;
}

.ascfix .links h3 {
    color: var(--ascbackground);
    margin-bottom: 10px;
}

.ascfix .fa-check-square:before,
.ascfix .fa-square-check:before {
    color: var(--ascgold);
}

.ascfix .links h3.icon::before {
    margin-right: 5px;
}

.ascfix .links ul {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

.ascfix .links ul:first-of-type>*+* {
    border-top: hsla(220, 18%, 97%, 0.4) 1px solid;
    margin-top: 2.5;
    padding-top: 2.5px;
}

.ascfix .links ul a {
    color: var(--ascgold);
    line-height: 1.1;
    text-decoration: none;
}

.ascfix .note {
    background: var(--ascblue50);
    color: var(--ascbackground);
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding: 10px;
}

.ascfix .caring {
    position: relative;
}

.ascfix .caring::before {
    position: absolute;
    content: "";
    inset: 0;
    background-image: url('https://www.alfredstate.edu/sites/default/files/Admissions/Images/BigBlueSky.png');
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.ascfix .caring .content {
    background: hsla(0, 0%, 0%, 0.6);
    max-width: 50ch;
    padding-block: 60px;
}

.ascfix .caring .content :is(h2) {
    color: var(--ascgold);
}

.ascfix .caring .content :is(h3, p) {
    color: var(--ascbackground);
}

.ascfix .caring .content :is(a) {
    color: var(--ascgold);
}

.ascfix .pnet {
    position: relative;
}

.ascfix .pnet::before {
    position: absolute;
    content: "";
    inset: 0;
    background-image: url('https://www.alfredstate.edu/sites/default/files/Admissions/Images/christin-hume-mfB1B1s4sMc-unsplash.jpg');
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.ascfix .pnet .content {
    background: hsla(0, 0%, 0%, 0.6);
    max-width: 50ch;
    padding-block: 60px;
}

.ascfix .pnet .content :is(h2) {
    color: var(--ascgold);
}

.ascfix .pnet .content :is(h3, p) {
    color: var(--ascbackground);
}

.ascfix .pnet .content :is(a) {
    color: var(--ascgold);
}

.dark {
    background: var(--ascblue90) !important;
}

.dark h2 {
    color: var(--ascgold) !important;
}

.dark p {
    color: var(--ascbackground) !important;
}

.dark li {
    color: var(--ascbackground) !important;
}

.dark a {
    color: var(--ascgold) !important;
}

.ascfix .info-text {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
}

.ascfix .info-text li {
    background: hsla(220, 18%, 97%, 0.678);
    border-radius: 5px;
    color: var(--ascblue);
    padding: 10px;
    text-align: center;
}

.ascfix .info-text li span {
    border-bottom: 1px solid;
    display: block;
    font-size: 18px;
    font-weight: 700;
}

@media only screen and (max-width: 950px) {
    .ascfix .caring .content {
        max-width: 100%;
    }

    .ascfix .pnet .content {
        max-width: 100%;
    }
}

@media only screen and (max-width: 700px) {
    .ascfix :is(.cost, .choose, .life)>div:first-of-type {
        grid-template-columns: 1fr;
    }
}