@import url(type.css);

body {
    margin: 0;
    background-position: center bottom;
    background-attachment: fixed;
}

.titleHeader {
    margin: 16px;
}

img {
    max-width: 100%;
    max-height: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
}

html {
    background-color: var(--background);
}

.button {
    background-color: var(--hotPink);
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }

.button:hover {
    background-color: black;
    color: var(--hotPink);
}

.banner {
    background-color: var(--hotPink);
    max-height: 48px;
    overflow: hidden;
    white-space: nowrap;
    position: sticky; 
    top: 0;
}

.bannerBlack {
    background-color: black;
    max-height: 48px;
    overflow: hidden;
    white-space: nowrap;
}

hr.solid {
    border-top: 40px;
    border-color: var(--hotPink);
}

hr.none {
    border-color: var(--background);
}

.bigTitle {
    grid-area: bigTitle;
    text-align: center;
    position: relative;
    height: 400px;
}

.centerObject {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.centerVertical {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.wrapper-title {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: 
    "title title title title title titleButton"
}

.title {
    grid-area: title;
    text-align: left;
}

.titleButton {
    grid-area: titleButton;
    text-align: center;
    margin: 16px;
}

.wrapper-header {
    display: grid;
    margin-top: 24px;
    margin-bottom: 24px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
    "hero hero hero hero"
    "headText headText headText headText"
}
.hero {
    grid-area: hero;
    text-align: left;
    background-color: black;
    padding-left: 16px;
    padding-right: 16px;
}
.headText {
    grid-area: headText;
    text-align: left;
    background-color: black;
    padding-left: 16px;
    padding-right: 16px;
    height: 400px;
}

.wrapper-highlights {
    display: grid;
    margin-top: 40px;
    margin-bottom: 40px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "highlightCard1 highlightCard1 highlightCard1 highlightCard1" 
    "highlightCard2 highlightCard2 highlightCard2 highlightCard2" 
    "highlightCard3 highlightCard3 highlightCard3 highlightCard3" 
    "highlightCard4 highlightCard4 highlightCard4 highlightCard4" 
}

.highlightCard1 {
    grid-area: highlightCard1;
    text-align: left;
    padding: 16px;
}
.highlightCard2 {
    grid-area: highlightCard2;
    text-align: left;
    padding: 16px;
}
.highlightCard3 {
    grid-area: highlightCard3;
    text-align: left;
    padding: 16px;
}
.highlightCard4 {
    grid-area: highlightCard4;
    text-align: left;
    padding: 16px;
}

.wrapper-twoImages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "twoImages1 twoImages2"
    "twoImages3 twoImages4";
}

.twoImages1 {
    grid-area: twoImages1;
    padding: 16px;
}

.twoImages2 {
    grid-area: twoImages2;
    padding: 16px;
}

.twoImages3 {
    grid-area: twoImages3;
    padding: 16px;
}

.twoImages4 {
    grid-area: twoImages4;
    padding: 16px;
}

.wrapper-moreContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 24px;
    margin-bottom: 24px;
    grid-template-areas: 
    "moreContentTitle moreContentTitle"
    "moreContent moreContent"
}

.moreContentTitle {
    grid-area: moreContentTitle;
    text-align: center;
    vertical-align: top;
    margin: auto;
}
.moreContent {
    grid-area: moreContent;
}

.flexContainer {
    display: flex;
    flex-wrap: row wrap;
    justify-content: space-around;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}
  
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 744px) {
    .banner {
        background-color: var(--eggplantPurple);
    }
    
    hr.solid {
        border-color: var(--eggplantPurple);
    }

    .button {
        background-color: var(--eggplantPurple);
      }
    
    .button:hover {
        color: var(--eggplantPurple);
    }

    .wrapper-header {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "hero heroText"
        "hero headText"
    }

    .wrapper-highlights {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "highlightCard1 highlightCard2" 
        "highlightCard3 highlightCard4" 
    }

    .wrapper-moreContent {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "moreContentTitle moreContent"
        "moreContentTitle moreContent"
    }
}

@media (min-width: 1240px) {
    .banner {
        background-color: var(--forestGreen);
    }
    
    hr.solid {
        border-color: var(--forestGreen);
    }

    .button {
        background-color: var(--forestGreen);
      }
    
    .button:hover {
        color: var(--forestGreen);
    }

    .wrapper-highlights {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
        "highlightCard1 highlightCard2 highlightCard3 highlightCard4" 
    }

    .wrapper-moreContent {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: 
        "moreContentTitle moreContent moreContent"
    }
}