/* GOOGLE FONTS */

.source-serif-4-regular {
  font-family: "Source Serif 4", serif;
  font-weight: 400;
  font-style: normal;
}

.source-sans-3-regular {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.source-code-pro-regular {
  font-family: "Source Code Pro", monospace;
  font-weight: 400;
  font-style: normal;
}


/* COMMON SENSE RESETS */

/* You *might* want to convert all elements to box-sizing: border box */
* {
    box-sizing: border-box;
}
   
/* this removes default margin/padding from these elements. You might want to add a few others in here.*/
h1, h2, h3, p, nav ul {
    margin: 0;
    padding: 0;
}
   
/* this sets images as block elements and makes sure they don't bust out of their containers, and that they maintain their aspect ratio. */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* gets rid of bullets */
nav ul {
    list-style-type: none;
}


/* MOBILE LAYOUT */
body {
    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
}

header, main, footer, a {
    color: #111;
}

header, main {
    margin: 0 2em 0 2em;
}

header {
    margin-top: 4em;
}

article {
    margin: 2em 0 2em 0;
}

article div {
    margin: 1em 0 0 0;
}

h1, h2 {
    font-family: "Source Serif 4", serif;
    font-weight: 400;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 24px;
}

p, .button {
    margin-top: 1em;
}

a {
    text-decoration: none;
}

.button {
    display: block;
    padding: 1em 0 1em 0;
    border: 1px solid #777;
    font-family: "Source Code Pro", monospace;
    text-align: center;
    background-color: white;
}

.image-placeholder {
    flex: 1;
    margin: 0;
    min-width: 10vw;
    min-height: 25vh;
    background-color: #777;
}

.eyebrow-text {
    margin: 0;
    text-transform: uppercase;
}

.inline {
    display: inline;
    padding: 0;
    border: none;
    color: #777;
    background: none;
}

#sign-off {
    margin-top: 1em;
    text-align: right;
}

footer {
    padding: 2em 0 2em 0;
    text-align: center;
}

footer {
    margin-top: 4em;
    border-top: 1px solid #777;
}

footer p {
    margin: 0;
}

nav .button {
    margin: 0;
    padding: 2em 0 2em 0;
    border-top: none;
    border-right: none;
    border-left: none;
}

/* ANIMATED BLOBS START */
#megablob1 {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 0;
    height: 0;
}

.megablob-a {
    position: relative;
    animation-name: ani-megablob-a;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
}

@keyframes ani-megablob-a {
    0% {transform: scale(0.9) rotate(0deg);}
    25% {transform: scale(1) rotate(90deg);}
    50% {transform: scale(1.1) rotate(180deg);}
    75% {transform: scale(1) rotate(270deg);}
    100% {transform: scale(0.9) rotate(360deg);}
}

.megablob-b {
    position: relative;
    top: -1000px;
    animation-name: ani-megablob-b;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-fill-mode: none;
}

@keyframes ani-megablob-b {
    0% {transform: scale(1.1) rotate(0deg);}
    25% {transform: scale(1) rotate(90deg);}
    50% {transform: scale(0.9) rotate(180deg);}
    75% {transform: scale(1) rotate(270deg);}
    100% {transform: scale(1.1) rotate(360deg);}
}

.megablob-c {
    position: relative;
    top: -2000px;
    animation-name: ani-megablob-c;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
}

@keyframes ani-megablob-c {
    0% {transform: scale(1.1) rotate(0deg);}
    25% {transform: scale(1) rotate(90deg);}
    50% {transform: scale(0.9) rotate(180deg);}
    75% {transform: scale(1) rotate(270deg);}
    100% {transform: scale(1.1) rotate(360deg);}
}

.megablob-d {
    position: relative;
    top: -3000px;
    animation-name: ani-megablob-d;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-fill-mode: none;
}

@keyframes ani-megablob-d {
    0% {transform: scale(0.9) rotate(0deg);}
    25% {transform: scale(1) rotate(90deg);}
    50% {transform: scale(1.1) rotate(180deg);}
    75% {transform: scale(1) rotate(270deg);}
    100% {transform: scale(0.9) rotate(360deg);}
}
/* ANIMATED BLOB END */


/* DESKTOP LAYOUT */
@media only screen and (min-width: 800px) {
    body {
        font-size: 20px;
    }

    header, main {
        margin-left: auto;
        margin-right: auto;
        padding: 0 2em 0 2em;
        max-width: 1100px;
    }

    header, footer {
        margin-top: 8em;
    }

    h1 {
        font-size: 80px;
    }

    h2 {
        font-size: 40px;
    }

    article {
        flex: 1;
    }

    .button:hover {
        border-color: #111;
        color: white;
        background-color: #111;
    }

    .inline:hover {
        color: #111;
    }

    .two-col {
        display: flex;
        gap: 2em;
        margin: 80px 0 80px 0;
    }

    .two-col article {
        margin: 0;
    }

    .reverse {
        flex-direction: row-reverse;
    }

    .info {
        flex: 2;
        margin-top: 0;
    }
}