html {
    height: 100%;
}

body {
    height: 100%;
    min-height: 100%;
    width: 100%;
    background-color: #19364A;

    display: flex;
    flex-direction: column;
    min-height: 100%;
}

main {
    background-color: #19364A;
    color: #FFFFFF;
    margin: auto;
    width: 95%;
    max-width: 650px;

    flex: 1;

}


#title {
    margin: auto;
    min-width: 200px;
    max-width: 310px;
}

p {
    font-family: 'Open Sans Condensed', sans-serif;
    color: black;
    font-size: 13px;
    margin-bottom: 2px;
}

h1 {
    font-family: 'Anton', sans-serif;
    color: #FFC701;
    text-align: center;
    font-size: 42px;
    margin-bottom: 5px;
    margin-top: 10px;
    text-decoration: none;
}

h2 {
    color: #FFC701;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-size: 22px;
}

#logoLeft {
    float: left;
    width: 30px;
    margin-top: 9px;
    margin-right: 10px;
}

#logoRight {
    /* float: right; */
    width: 25px;
    /* margin-top: 9px; */
    /* margin-left: 10px; */
}

.font-white {
    color: #FFFFFF;
    font-family: 'Open Sans Condensed', sans-serif;
}

.font-black {
    color: black;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 600;
    transition: .2s all ease-out;
    margin: auto;   
}

.font-black:hover {
    color: white;
    text-decoration: none;
}

.personal {
    text-align: center;
}

.personal a {
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: .2s all ease-out;
    -moz-transition: .2s all ease-out;
    transition: .2s all ease-out;
    font-size: 16px;
}

span {
    display: inline-block;
}

.card-header {
    background-color: #19364A;
    color: #FFFFFF;
    border: none;
    padding: 0px;
}

/* #accordion {
    background-color: #19364A;
    color: #FFFFFF;
} */

/* Where the pixel bug is I think */
.card {
    border: none;
}

h3 {
    border: none;
    padding: 0px;
}

.card-body {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #FFC701;
    margin: 0px;
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 12px;
}

.btn-link:hover {
    color: #FFC701;
    text-decoration: none;
}

.btn-link {
    border: none;
    color: white;
    text-decoration: none;
}

.nowrap {
    white-space: nowrap;
}

.bigger {
    font-size: 1.5em;
}

.big {
    font-size: 1.25em;
}

li {
    display: inline;
    color: black;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

ul {
    margin-right: 22px;
    margin-bottom: 2px;
    /* text-align: center; */
}

.h2-title {
    color:  #FFC701;
    font-size: 22px;
    /* font-family: 'Oswald', sans-serif; */
    font-family: 'Anton', sans-serif;
}

.h2-title:hover {
    color:  white;
    transition: .3s all ease-out;
}

.h2-glyph {
    font-size: 22px;
    font-weight: 500px;
}

header {
    background-color:  #FFC701;
    width: 100%;
    height: 6%;
    min-height: 25px;

    display: flex; 
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

footer {
    background-color:  #FFC701;
    width: 100%;
    height: 6%;
    min-height: 25px;

    display: flex; 
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

.header-content {
    margin-top: auto;
    margin-bottom: auto;
    color: black;
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    margin-left:auto;
    margin-right:5px;
}

.header-content a {
    color: black;
    text-align: right;
    transition: .2s all ease-out;
}

.header-content a:hover {
    color: white;
    text-decoration: none;
}

.footer-content {
    margin: auto;
    color: black;
    font-family: 'Anton', sans-serif;
    font-size: 18px;
}

.footer-content a {
    color: black;
    text-align: right;
    transition: .2s all ease-out;
}

.footer-content a:hover {
    color: white;
    text-decoration: none;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    .header-content {
        margin: auto;
    }
}

#tagline {
    color: white;
    max-width: 500px;
    margin: auto;
    padding-left: 7px;
    margin-bottom: 5px;
    font-size: 14px;
}

.margin-auto {
    margin: auto;
}

#bottom-space {
    height: 20px;
}

#tagline a {
    text-decoration: none;
    color: #FFC701;
}

#tagline a:hover {
    color: white;
    transition: .3s all ease-out;
}