html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: floralwhite;
    font-family: sans-serif;
}

a {
    color: white;
}
.footer-link {
    text-decoration: none;
    color: black;
}
.footer-link:hover {
    cursor: pointer;
}
.footer-hr{
    border-color: lightgray;
    border-style: solid;
    border-width: thin;
}
.copyright-txt {
    color: lightgray;
}

hr {
    border-style: solid;
    border-width: thin;
}

/*Utility classes*/
.u-pA15 {
    padding: 1.5em;
}
.u-pA0 {
    padding: 0;
}
.u-pA10 {
    padding: 1em;
}
.u-pB10 {
    padding-bottom: 1em;
}
.u-mB35 {
    margin-bottom: 3.5em;
}
.u-mT10 {
    margin-top: 10%;
}
.u-mL5 {
    margin-left: 5%;
}
.u-mL10 {
    margin-left: 10%;
}
.u-txt-center {
    text-align: center;
}
.u-txt-black {
    color: black;
}
.u-txt-light-grey {
    color: lightgray;
}
.hidden {
    visibility: hidden;
}
.text-scroll {
    overflow-y: scroll;
}
.text-scroll::-webkit-scrollbar {
    display: none;
}

ul {
    padding: 1em;
    margin: 0;
}
li {
    padding-bottom: 1em;
}

/* Flex container settings*/
.flex-container-col {
    display: flex;
    flex-direction: column;
}

.flex-container-row {
    display: flex;
    flex-direction: row;
}
.flex-container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}
/* Flex basis sizing */
.basis-forty {
    flex-basis: 40%;
}
.basis-fifty {
    flex-basis: 50%;
}
.basis-eighty {
    flex-basis: 80%
}
.basis-thirty {
    flex-basis: 30%
}
.basis-fifteen {
    flex-basis: 15%
}
.basis-third {
    flex-basis: 33%
}
.basis-ten {
    flex-basis: 10%
}
.basis-whole {
    flex-basis: 100%
}

/* Images and logos */
.thought-bubble {
    background-repeat: no-repeat;
    background-image: url("../img/drawing.svg");
    background-position: center;
    background-size: contain;
    padding-top: 10em;
    width: 56%;
    height: 30%;
    margin: auto;
}
.thinking-img {
    background-repeat: no-repeat;
    background-image: url("../img/thinking.png");
    background-position: center;
    background-size: cover;
    border-radius: 25px;
    min-height: 800px;
}
.logo-container {
    opacity: 65%;
    margin: 4% 0 0 50%;
}

.main-image {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-image: url("../img/taps.png");
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 700px) {

    .logo-container { 
        flex-basis: 15%;
    }
    .logo-text { 
        flex-basis: 30%;
    }
    #nav-links > h3 {
        flex-basis: 40%;
    }
    .thinking-img {
        flex-basis: 100%;
    }
    #md-it-does-txt {
        display: none;
    }
    #sm-it-does-txt {
        visibility: visible;
        color: white;
        float: right;
        flex-direction: column;
    }

    #sm-it-does-txt > p {
        flex-wrap: wrap;
    }
    .thought-bubble {
        display: none;
    }
}