@font-face {
    font-family: Lexend-Regular;
    src: url('/fonts/Lexend-Regular.ttf');
}

@font-face {
    font-family: Lexend-Bold;
    src: url('/fonts/Lexend-SemiBold.ttf');
}

body {
    line-height: 26px;
    font-family: Lexend-Regular;
    /*background-image: url('/images/sky-hc-images/background.jpg');
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;*/
    height: 100vh;
    background-color: black;
    margin-top: 0px;
}

b {
    font-family: Lexend-Bold;
}

.overall-centerer {
    display: flex;
    justify-content: center;
}

.main-content {
    margin-left: 15px;
    margin-right: 15px;
    max-width: 900px;
    padding: 20px;
    /*background-color: white;*/
}

.big-title  {
    text-align: center;
    font-size: 50px;
    line-height: 40px;
}

.nav-bar { text-align: center; }

.sub-title { text-align: center; }

.other-pages-nav {
    padding: 0px;
    text-align: center;
}

.other-pages-nav > li {
    display: inline-block;
    /*background-color: rgb(226, 226, 226);*/
    border-radius: 10px;
    margin: 5px;
}

.other-pages-nav > li > p {
    margin: 0px;
    padding: 15px;
}

form {
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-caption-holder {
    width: 100%;
    text-align: center;
    margin: 5px;
}

.img-caption-holder > img {
    width: 60%;
}

.img-caption-holder > p {
    font-size: small;
}

.fright {float:right; width: 40%;}
.fright-narrow {width: 20%;}
.fright > img {width: 100%;}

.fleft {float: left; width: 40%;}
.fleft-narrow {width: 20%;}
.fleft > img {width: 100%;}

/*For non-float images that are wide and short V*/
.img-wideshort > img { width: 80%; }

@media screen and (max-width: 750px) {
    .main-content {
        margin-left: 0px;
        margin-right: 0px;
        max-width: 100%;
        padding: 20px;
        /*background-color: white;*/
    }

    .img-caption-holder > img {
        width: 100%;
    }

    .img-wideshort > img { width: 100%; }

    .fright {float:right; width: 60%;}
    .fright-narrow {width: 45%;}

    .fleft {float: left; width: 60%;}
    .fleft-narrow {width: 45%;}

}