@font-face {
    font-family: "Futura PT";
    font-weight: bold;
    src: local('Futura PT'), url('/static/fonts/Futura PT Medium.ttf') format("truetype");
}

* {
    box-sizing: border-box;
    /* border: 0.5px solid #f0f; */
}

html,
body {
    font-family: "Futura PT";
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    margin: 0px;
    padding: 0px;
    position: relative;
    align-self: flex-start;
    width: 100%;
}

.no-header {
    display: none;
}

.header-content {
    background-color: #BB2232;
}

.header-img {
    width: 100%;
}

.header-img-only {
    width: calc(100% - 5rem);
    position: sticky;
    top: 0px;
}

.header-img g {
    fill: #BB2232;
}

footer {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: flex-end;
    flex-direction: column;
}

.footer-content {
    background-color: #CCCCCC;
    min-height: 10vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    padding-left: 10%;
    padding-right: 10%;
}

.footer-img {
    width: 100%;
    transform: scaleY(-1);
    margin-bottom: -1px;
}


.footer-img g {
    fill: #CCCCCC;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.backButton {
    color: white;
    background-color: #BA2231;
    left: 20px;
    bottom: 70px;
    z-index: 100;
    position: fixed;
}

.logoutButton {
    color: white;
    background-color: #BA2231;
    left: 20px;
    bottom: 20px;
    z-index: 100;
    position: fixed;
}

.btn, .theme2 {
    background: #BA2231;
    color: #fff;
}

.btn:hover, .theme-2:hover {
    background: #BA2231;
    color: #fff;
}

.theme-link {
    font-family: "Futura PT";
    color: #999999;
}

.theme-link:hover {
    color: #BA2231;
}


.theme3 {
    color: #999999;
    background: #fff;
    margin-top: 2vh;
}

.theme3:hover {
    color: #999999;
    background: #fff;
    margin-top: 2vh;
}
@media screen and (min-width: 800px) {
    .header-img-only {
      width: calc(100% - 20rem);
    }
}