/* TYPOGRAPHY */

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 87.5%;
    color: white;
    line-height: 1.5;
    background-color: #f16a78;
    /* background-image: url(../img/2024-studentshow-bg.jpg); */
    background-size: cover, cover;
    background-repeat: repeat-x, no-repeat;
    background-image: url("../img/Kapiolani_Type.svg"), linear-gradient(#2b2f7a, #f16a78);
    background-position: center center, center center;

}

/* HEADINGS
    Headings are based on a Traditional Typographic Scale
    48, 36, 24, 21, 18, 16 */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: .5em 0;
}

h1 {
    font-size: 3em;
    /* 48px: 48/16 = 3em */
    line-height: 1;
}

h2 {
    font-size: 2.25em;
    /* 36px: 36/16 = 2.25em */
    line-height: 1.1;
}

h3 {
    font-size: 1.5em;
    /* 24px: 24/16 = 1.5em */
    line-height: 1.2;
}

h4 {
    font-size: 1.3125em;
    /* 21px: 21/16 = 1.3125em */
    line-height: 1.3;
}

h5 {
    font-size: 1.125em;
    /* 18px: 18/16 = 1.125em */
    line-height: 1.4;
}

h6 {
    font-size: 1em;
    /* 16px: 16/16 = 1em */
    line-height: 1.5;
}


/* PARAGRAPHS */

p {
    margin: .5em 0;
    max-width: 38em;
}

.centered p {
    margin-left: auto;
    margin-right: auto;
}


/* HELPER CLASSES */

.text-centered {
    text-align: center;
}

.full-width {
    width: 100%;
}

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

/* IMAGES */
img {
    max-width: 100%;
    height: 75vh;
}


/* LAYOUT */

/* SIMPLE RESET */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* CONTAINER */

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 4%;
}

#container {
    max-width: 100%;
    height: 75vh;
    object-fit: contain;
}

/* MEDIA QUERIES */

@media (min-width: 768px) {
    /* TABLET-SIZED STYLING GOES HERE */
}

@media (min-width: 1050px) {
    body {
        font-size: 100%;
        /* 16px */
    }
}

@media (min-width: 1250px) {
    body {
        font-size: 112.5%;
        /* 18px */
    }

    .container {
        max-width: 1200px;
    }
}


/* SEMANTIC GRID SYSTEM */

.row>.column {
    margin-bottom: 4%;
}

@media (min-width: 768px) {
    .row {
        display: flex;
        justify-content: space-between;
        margin-left: -2%;
        margin-right: -2%;
    }

    .row>.column {
        flex-grow: 1;
        margin-left: 2%;
        margin-right: 2%;
    }

    .row>.column.one-half {
        max-width: 46%;
    }

    .row>.column.one-third {
        max-width: 29.3333%;
    }

    .row>.column.two-thirds {
        max-width: 62.6666%;
    }

    .row>.column.one-fourth {
        max-width: 21%;
    }

    .row>.column.centered {
        margin-left: auto;
        margin-right: auto;
    }
}


/* SECTIONS */

section {
    padding: 3em 0;
}

/* HERO */

.hero {
    padding: 10vh 4%;
    /* background-color: #174248; */
    text-align: center;
}

.hero h1,
p {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.hero.full-width {
    margin-top: 0;
    margin-left: 0;
    background-color: rgb(65, 77, 77);
}

.hero.full-width h1 {
    color: white;
    font-size: 4em;
    margin-bottom: 0;
}

.hero.full-width p {
    color: rgba(255, 255, 255, 0.459);
}

.hero p {
    max-width: 400px;
}

.svg {
    max-width: 100%;
    height: 75vh;
    object-fit: contain;
}