@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;500&display=swap');

:root {
    --blue: #03BFD7;
    --blue-rgb: 3,191,215;
    --gray: #666666;
    --gray-rgb: 102,102,102;
    --black: #000000;

    --navbar-height: 8rem;
}

/* colors */
a, a:link, a:visited {color:var(--blue)}
.card-body a, .card-body a:link, .card-body a:visited {color:white}
a:hover, .card-body a:hover {color:var(--gray)}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background-color:var(--blue);color:white}
.bg-blue {background-color:var(--blue)}
.btn-blue {
    color: var(--blue)!important;
    background-color: white;
    border-color: var(--blue)
}
.btn-blue path {fill: white}
.btn-blue:hover, .btn-blue.active {
    color: white!important;
    background-color: var(--blue);
    border-color: var(--blue)
}

/* basics */
body {font-family: 'Oswald', sans-serif;font-weight:200}
main {margin-top: var(--navbar-height)}

/* navbar */
.navbar {position:fixed;padding:.5rem 1rem}
.navbar-brand {padding:0;}
.navbar-brand svg {width:auto;height:7rem;padding:1rem}
.navbar-brand {position:relative;top:auto;left:auto}

/* main */
/*main article {background:white;}*/
[id*=parallax] {height: 100vh;overflow: hidden}
.parallaxParent > img {
    height: 125%!important;
    position: relative;
    top: -55%;
}
.parallaxParent h1 {
    position: absolute;
    color: white;
    top:calc(var(--navbar-height));
    left:0;
    font-weight:500;
    text-transform:uppercase;
    text-shadow: 2px 2px 4px var(--black);
}
.parallaxParent.featured h1 {
    left:50%;
    height:100vh;
    top:0;
    display:grid;
    align-items:center;
    background-color: rgba(var(--blue-rgb),.9);
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.td-text {color:var(--gray)}
article.column {
    min-height:calc(100vh - var(--navbar-height));
    display:grid;
    align-items:center;
}

@media screen and (max-width:768px){
    .fs-7 {font-size: 2.5rem}
    [id*=parallax], .parallaxParent.featured h1 {height:50vh}
    .parallaxParent > img {
        top: -45%;
    }
    .parallaxParent h1 {top:0}
}
@media screen and (max-width:480px){
    .fs-7 {font-size: 1.75rem}
    [id*=parallax] {height:40vh}
    .parallaxParent.featured {height:30vh}
    .parallaxParent.featured h1 {
        left:0;
        text-align:center;
        height:30vh
    }
    .parallaxParent.featured > img {top:-35%;}
}