html, body {
    width: 100%;
    font: 16px Arial, sans-serif;
    margin: 0;
    background-color: #1d4e89;
    background-image: linear-gradient(45deg, grey, transparent);
}

body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

header a, footer a {
    color: black;
}

header a:hover, footer a:hover {
    color: #91FDFF;
}

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}
#goodtherapy a{
    text-decoration: none;
}

h1 {
    text-align: center;
}

/* Adjust px here (1024px for tablets maybe) */
@media only screen and (max-width: 480px) { 
    a[href^="tel"]:link,
    a[href^="tel"]:visited{
        text-decoration: none;
        pointer-events: visible;
        cursor: pointer;
    }
    a[href^="tel"]:hover {
        text-decoration: none;
        pointer-events: visible;
        cursor: pointer;
    }
}

#phrase {
    font-weight: bold;
    font-style: italic;
    text-align: right;
}

.wrapper {
    flex: 1;
}

#navigation {
    margin-left: 30px;
    margin-right: 30px;
}

.navbar {
    flex: 0 0 100%;
    padding: 0;
    margin-top: 5px;
    order: 0;
    background-color: #858585;
}

.navbar-brand {
    padding-left: 1rem;
    color: white;
}

.active {
    background-color: #997171;
    font-weight: bold;
}

#steps {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

#content {
    order: 1;
}

#main {
    background-color: #FFF;
    padding: 2px;
    margin-left: 30px;
    margin-right: 30px;
}

#main a {
    color: #891d4e;
}

header {
    color: black;
}

footer {
    order: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    color: lightskyblue;
}