/* html styling */
html {
    height: 100vh;
    width: 100vw;
    margin: 0rem;
    padding: 0rem;
}

/* body styling */
body {
    height: 100%;
    width: 100%;
    margin: inherit;
    padding: inherit;
}

/* wrapper styling use on <main> */
.wrapper {
    height: 100vh;
    width: 100vw;

    overflow-x: hidden;
    overflow-y: auto;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.wrapper:-webkit-scrollbar {
    display: none;
}

/* section styling use on all instances of <section> */
.section {
    display: grid;
    align-items: center;
    justify-items: center;

    position: relative;
    height: 100vh;
}

#Splash {
    height: 70vh;
}

.content-wrapper {
    display: grid;

    align-items: center;
    justify-items: center;

    height: 100%;
    width: 100%;

    background-color: rgba(0,112,190,1);
}

.billboard {
    display: grid;

    grid-gap: 0;

    margin: 0rem;
    padding: 0rem;

    align-self: center;

    align-items: center;
    justify-items: center;

    height: 100%;
    width: 100%;
}

.billboard-header {
    display: grid;

    margin: 0;
    padding-top: 1rem;

    align-self: start;

    align-items: center;
    justify-items: center;

    width: 100%;

    grid-template-areas:
    'cc-logo-wrapper cc-socials-wrapper';
}

.cc-logo-wrapper {
    display: grid;
    
    justify-self: start;

    align-items: center;
    justify-items: center;

    margin-left: 2rem;
    margin-right: 2rem;

    height: 100%;
    max-width: 20rem;

    grid-area: cc-logo-wrapper;

    color: #f1f1f1;
}

.cc-logo-wrapper > img {
    display: grid;

    height: 5rem;
    width: 5rem;
}

.cc-socials-wrapper {
    display: grid;

    grid-gap: 3rem;

    justify-self: end;

    align-items: center;
    justify-items: center;

    margin-left: 3rem;
    margin-right: 3rem;

    height: 100%;
    max-width: 20rem;

    grid-area: cc-socials-wrapper;

    grid-template-areas:
    'cc-twitter cc-instagram';

    color: #f1f1f1;
}

.cc-twitter {
    display: grid;

    grid-area: cc-twitter;
}

.cc-twitter > img {
    display: grid;

    max-height: 2rem;
    width: auto;
}

.cc-instagram {
    display: grid;

    grid-area: cc-instagram;
}

.cc-instagram > img {
    display: grid;

    max-height: 2rem;
    width: auto;
}

.billboard-text {
    display: grid;

    align-items: center;
    justify-items: center;

    grid-gap: 1rem;

    margin: 0;

    width: 80%;
}

.billboard-text > h1 {
    display: grid;

    margin: 0;
    padding: 0;

    font-family: 'Bitter', serif;
    font-size: 3rem;

    text-align: center;

    color: #f1f1f1;
}

.billboard-text > h3 {
    display: grid;

    margin: 0;
    padding: 0;

    padding-left: 0.5rem;

    font-family: 'Sanchez', serif;
    font-weight: 200;
    font-size: 1.25rem;

    text-align: center;

    color: #f1f1f1;
}

.billboard-button-wrapper {
    display: inline-flex;

    align-items: center;
    justify-content: space-around;

    flex-wrap: wrap;

    width: 60%;
}

.billboard-button {
    display: grid;

    align-items: center;
    justify-items: center;

    margin: 0.5rem;

    height: 4.5rem;
    width: 14rem;

    border-radius: 0.5rem;

    text-decoration: none;
    
    font-family: 'Sanchez', serif;
    font-weight: 200;
    font-size: 1rem;

    color: #fff;
    background-color: rgba(0,0,0,0);
    border: 0.2rem #fff solid;
}

@media screen and (max-width: 600px){
    .billboard-button {
        height: 4rem;
        width: 10rem;

        font-size: 0.85rem;
    }

    .billboard-text > h1 {
        font-size: 2rem;
    }

    .billboard-text > h3 {
        font-size: 1rem;
    }
}

.billboard-button:hover {
    color: rgba(0,112,190,1);
    background-color: #f1f1f1;
}

/* static styling use on all <section>'s without a background image */
.static {
    display: grid;

    height: 50vh;
    background: #f1f1f1;
}

.static-content-wrapper {
    display: grid;

    align-items: center;
    justify-items: center;

    height: 100%;
    width: 100%;

    background-color: #f1f1f1;
}

.static-text {
    display: grid;

    align-self: center;

    align-items: center;
    justify-items: center;

    grid-gap: 1.5rem;

    width: 100%;
}

.static-text > h1 {
    display: grid;

    margin: 0;
    padding-top: 1rem;

    font-family: 'Bitter', serif;
    font-size: 2rem;

    text-align: center;
    color: #111;
}

.static-text > h3 {
    display: grid;

    margin: 0;

    font-family: 'Sanchez', serif;
    font-size: 1rem;

    text-align: center;
    color: #111;
}

.static-footer {
    display: grid;

    justify-self: end;

    align-items: center;
    justify-items: center;

    width: 100%;
}

.static-footer > h4 {
    display: grid;

    margin: 0;

    font-family: 'Sanchez', serif;
    font-size: 0.8rem;

    text-align: center;

    color: #555;
    background-color: #f1f1f1;
}

@media screen and (max-width: 600px) {
    #Splash {
        height: 100vh;
    }

    .static-text > h1 {
        font-size: 1.5rem;
    }

    .static-text > h3 {
        font-size: 0.8rem;
    }

    .static-footer > h4 {
        font-size: 0.65rem;
    }
}